Agent Skills: Svelte Template Directives

Svelte Template Directives

@attach (Svelte 5.29+)

The reactive alternative to use: actions. Re-runs when dependencies change, passes through components via spread, supports cleanup functions.

<script>
	import ImageZoom from 'js-image-zoom';

	function useZoom(options) {
		return (element) => {
			new ImageZoom(element, options);
			return () => console.log('cleanup');
		};
	}
</script>

<!-- Re-runs if options changes (use: wouldn't!) -->
<figure {@attach useZoom({ width: 400 })}>
	<img src="photo.jpg" alt="zoomable" />
</figure>

Quick Reference

| Directive | Purpose | Reactive? | | ---------------- | ------------------------------ | --------- | | {@attach} | DOM manipulation, 3rd-party | Yes | | {@html} | Render raw HTML strings | Yes | | {@render} | Render snippets | Yes | | {@const} | Local constants in blocks | N/A | | {@debug} | Pause debugger on value change | N/A | | {#each (key)} | Keyed iteration (always key!) | Yes | | <svelte:window> | Window event listeners | N/A |

@attach vs use: Actions

| Feature | use: | @attach | | --------------------- | ------- | ------------------- | | Re-runs on arg change | No | Yes | | Composable | Limited | Fully | | Pass through props | Manual | Auto via spread | | Convert legacy | N/A | fromAction() |

Reference Files

• attach-patterns.md - Real-world @attach examples
• other-directives.md - @html, @render, @const, @debug

Notes

• @attach requires Svelte 5.29+
• Use fromAction from svelte/attachments to convert legacy actions
• Attachments pass through wrapper components when you spread props
• Always use keyed each blocks — never use index as key
• Use <svelte:window>/<svelte:document> for global events, not $effect
• Last verified: 2026-03-12