svelte-development — Claude Code skill: what it does, how to install
Guides coding assistants on Svelte 5 conventions, focusing on reactivity runes, scoped styling, and component props.
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-codeWhat svelte-development does
This skill injects Svelte 5 guidelines directly into the agent context. It instructs the assistant to use modern runes such as $state, $derived, $effect, and $props rather than legacy syntax.
The reference material covers single-file component anatomy, scoped CSS, event dispatching, and slot projection. Generating code with these patterns breaks immediately on projects configured for older Svelte versions lacking runes support.
What it helps with
- manage reactive local state using $state and $derived runes
- define typed component interfaces with the $props rune
- handle lifecycle logic and timers with cleanup in $effect
- build isolated UI components with scoped styles and slots
Example prompts for the agent
- Create a counter component using Svelte 5 runes with doubled count logic.
- Build a modal component featuring named slots and backdrop click handling.
- Define a TypeScript card component that accepts typed properties via $props.
How to install svelte-development
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code2Manually: put the files in place
~/.claude/skills/svelte-development/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svelte-development/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a codex2Manually: put the files in place
.agents/skills/svelte-development/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a cursor2Manually: put the files in place
.cursor/skills/svelte-development/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install manutej/luxor-claude-marketplace svelte-development2Manually: put the files in place
.github/skills/svelte-development/SKILL.md1Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a gemini-cli2Platform CLI
gemini skills install https://github.com/manutej/luxor-claude-marketplace --path plugins/luxor-frontend-essentials/skills/svelte-developmentManually: put the files in place
.devin/skills/svelte-development/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add manutej/luxor-claude-marketplace --skill svelte-development -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-development
How do I install svelte-development in Claude Code?
Run npx skills add manutej/luxor-claude-marketplace --skill svelte-development -a claude-code. Alternatively, copy the skill file to ~/.claude/skills/svelte-development/SKILL.md.
What does the svelte-development skill do?
It provides syntax references for Svelte 5, preventing the assistant from emitting obsolete export let statements or dollar label reactivity.
Does this skill cover TypeScript support?
Yes, it contains examples for typing component properties by passing TypeScript interfaces to $props.