Svelte template directives

Skill spences10/skills/svelte-template-directives

Portable Agent Skills for coding agents, including Svelte/SvelteKit and workflow tooling skills.

Install

npx -y skills add spences10/skills --skill svelte-template-directives

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

2 things to look at

no licenseNo license file was found in the repository. Code published without one is not open source by default, so using it at work is a question for whoever answers licensing questions where you are.
13 stars13 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Svelte template directive guidance. Use when working with snippets, attachments, dynamic HTML, declaration tags, debugging tags, or global DOM events.

SKILL.md

2.9 KB, as published. Nobody here has run it

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
`{let ...}` / `{const ...}`	Local declarations in markup	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, declaration tags, @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
Use {const ...} / {let ...} declaration tags for local markup variables; {@const ...} is legacy syntax.
Last verified: 2026-05-31