From svelte-skills
Explains Svelte template directives (@attach, @html, @render, @const, @debug) for DOM manipulation, third-party libs, tooltips, canvas, dynamic HTML. @attach replaces use: actions with reactive re-runs.
How this skill is triggered — by the user, by Claude, or both
Slash command
/svelte-skills:svelte-template-directivesThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**The reactive alternative to `use:` actions.** Re-runs when dependencies
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>
| 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 |
| 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() |
@attach requires Svelte 5.29+fromAction from svelte/attachments to convert legacy actions<svelte:window>/<svelte:document> for global events, not $effectnpx claudepluginhub spences10/svelte-skills-kit --plugin svelte-skillsProvides Svelte 5.0 knowledge patch on runes ($state, $derived, $effect, $props), snippets replacing slots, callback props for events, mount/hydrate API. Auto-loads for Svelte tasks.
Provides best practices for Svelte runes: $state for reactive variables, $derived for computations, minimal $effect use, reactive $props handling, and $inspect.trace debugging. For Svelte component writing, editing, analysis.
Svelte runes-first reactivity and SvelteKit fullstack conventions. Invoke whenever task involves any interaction with Svelte code — writing, reviewing, refactoring, debugging, or understanding .svelte, .svelte.js, .svelte.ts files and SvelteKit projects.