How to use
- Copy the installation command and review the source package before installing it in your own agent environment.
- Check the source document for required tools, credentials and supported hosts.
- Describe your input and desired deliverable; review the output against the source material.
npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-template-directivesBefore you start
- Installation does not include a model subscription, API allowance or permission to access your files.
- Repository stars and installation counts describe activity, not an independent quality or security test.
Original skill document
Rendered from the source repository. Headings, examples, code, tables, links, and referenced images are preserved.
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.
svelte
<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
@attachrequires Svelte 5.29+- Use
fromActionfromsvelte/attachmentsto 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
<!-- PROGRESSIVE DISCLOSURE GUIDELINES:
- Keep this file ~50 lines total (max ~150 lines)
- Use 1-2 code blocks only (recommend 1)
- Keep description <200 chars for Level 1 efficiency
- Move detailed docs to references/ for Level 3 loading
- This is Level 2 - quick reference ONLY, not a manual
-->
