svelte-components — Claude Code skill: Svelte component patterns
Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs.
npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-codeWhat svelte-components does
This skill covers Svelte component patterns and kicks in when a project needs web components, libraries such as Bits UI, Ark UI or Melt UI, form handling, or third-party integration. The main file is a short quick reference, with three reference files behind it: component-libraries.md for Bits UI and Ark UI setup, web-components.md for building custom elements, and form-patterns.md for advanced form handling.
The useful bit is the form attribute trick for cases where a form cannot wrap its inputs, like a table layout. The form sits outside, and the input and button point at it by id. For custom elements you flip compilerOptions.customElement in svelte.config.js and add <svelte:options customElement="my-button" /> to the component.
Everything here assumes Svelte, so a React or Vue codebase gets nothing out of it. The notes call Bits UI 1.0 flexible, unstyled and accessible, and mark the content as last verified on 2025-01-14. If the library has moved its API since then, check its own docs before trusting the snippets.
What it helps with
- turn a Svelte component into a custom element
- set up a headless library like Bits UI or Ark UI
- link inputs to a form with the
formattribute - handle form resets with
defaultValue - integrate a third-party UI component into Svelte
Example prompts for the agent
- show me how to build a web component from a Svelte component
- how do I link an input to a form with the form attribute when the form can't wrap the table
- give me the form pattern with reset via defaultValue
How to install svelte-components
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-code2Manually: put the files in place
~/.claude/skills/svelte-components/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/svelte-components/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a codex2Manually: put the files in place
.agents/skills/svelte-components/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a cursor2Manually: put the files in place
.cursor/skills/svelte-components/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit svelte-components2Manually: put the files in place
.github/skills/svelte-components/SKILL.md1Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a gemini-cli2Platform CLI
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-componentsManually: put the files in place
.devin/skills/svelte-components/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -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-components
How do I install svelte-components in Claude?
Run npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-code. The skill file then lives at ~/.claude/skills/svelte-components/SKILL.md.
What does svelte-components do?
It gives the agent Svelte component patterns: web components, headless libraries, forms and third-party integration. The details sit in three reference files inside the skill.
Which platforms can run this skill?
Besides Claude, it installs for Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode. GitHub Copilot uses a different command: gh skill install spences10/svelte-skills-kit svelte-components.
