ReddRadar
Agent skill
svelte-template-directives
Install this agent skill to your Project
npx add-skill https://github.com/spences10/svelte-skills-kit/tree/main/plugins/svelte-skills/skills/svelte-template-directives
SKILL.md
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
@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
Recommended Agent Skills
Expand your agent's capabilities with these related and highly-rated skills.
spences10/svelte-skills-kit
sveltekit-data-flow
SvelteKit data flow guidance. Use for load functions, form actions, server/client data, and invalidation. Covers +page.server.ts vs +page.ts, serialization, fail(), redirect(), error(), invalidateAll().
spences10/svelte-skills-kit
sveltekit-structure
SvelteKit structure guidance. Use for routing, layouts, error handling, SSR, or svelte:boundary. Covers file naming, nested layouts, error boundaries, pending UI, and hydration.
spences10/svelte-skills-kit
layerchart-svelte5
LayerChart Svelte 5 patterns. Use for chart components with tooltip snippets, Chart context access, and all Svelte 5 snippet patterns for tooltips, gradients, highlights, and axes.
spences10/svelte-skills-kit
svelte-runes
Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.
spences10/svelte-skills-kit
svelte-deployment
Svelte deployment guidance. Use for adapters, Vite config, pnpm setup, library authoring, PWA, or production builds.
spences10/svelte-skills-kit
svelte-styling
Didn't find tool you were looking for?