svelte-template-directives — Claude Code skill: features and setup
A reference for Svelte template directives, from DOM attachments to HTML and snippets. Useful when building or debugging Svelte components.
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-codeWhat svelte-template-directives does
The skill covers {@attach}, {@html}, {@render}, {@const}, and {@debug}, along with keyed {@each} blocks and global event handling. An attachment can connect a DOM element to an external library and run again when its dependencies change.
It comes with a compact reference and separate files containing examples for attachments and other directives. {@attach} needs Svelte 5.29 or later, so check the project version before relying on it. For converting older actions, the guide points to fromAction from svelte/attachments.
What it helps with
- connect a third-party library to a DOM element
- render an HTML string in a Svelte template
- insert a snippet into component markup
- define a local constant inside a block
- pause debugging when a value changes
Example prompts for the agent
- Show how to connect a library to a Svelte element with {@attach}.
- Explain when to use {@html} instead of {@render} in this component.
- Help me convert this older action using fromAction.
How to install svelte-template-directives
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-code2Manually: put the files in place
~/.claude/skills/svelte-template-directives/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svelte-template-directives/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a codex2Manually: put the files in place
.agents/skills/svelte-template-directives/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a cursor2Manually: put the files in place
.cursor/skills/svelte-template-directives/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit svelte-template-directives2Manually: put the files in place
.github/skills/svelte-template-directives/SKILL.md1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a gemini-cli2Platform CLI
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-template-directivesManually: put the files in place
.devin/skills/svelte-template-directives/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about svelte-template-directives
How do I install svelte-template-directives in Claude Code?
Run npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-code. The skill file is at ~/.claude/skills/svelte-template-directives/SKILL.md.
What does svelte-template-directives do?
It explains Svelte template directives for DOM integration, HTML output, snippets, local values, and debugging. It also covers keyed each blocks and global event listeners.
Which Svelte version supports {@attach}?
{@attach} requires Svelte 5.29 or later. The guide also describes converting older actions with fromAction from svelte/attachments.
