Mode d’emploi
- Copiez la commande et examinez le paquet avant de l’installer dans votre environnement agent.
- Consultez le document original pour les outils, identifiants et environnements requis.
- Décrivez les entrées et le livrable souhaité ; comparez la sortie aux sources.
npx skills add https://github.com/spences10/svelte-skills-kit --skill svelte-template-directivesAvant de commencer
- L’installation n’inclut ni abonnement au modèle, ni quota API, ni accès aux fichiers.
- Étoiles et installations reflètent l’activité, pas un test indépendant de qualité ou de sécurité.
Document Skill original
Rendu depuis le dépôt source en conservant titres, exemples, code, tableaux, liens et images.
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
-->
