# svelte-components

Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 531 installs · ★ 94
- Author: spences10
- License: not stated · policy=link-only · description only; the file stays with the author
- Source: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/svelte-components/SKILL.md
- Updated: 2026-10-12
- HTML: https://affpapa.org/en/nevibecode/skills/svelte-components

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/svelte-components/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/svelte-components/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-components -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/svelte-components/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-components -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/svelte-components/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install spences10/svelte-skills-kit svelte-components
```

2. **Manually: put the files in place**
- File: `.github/skills/svelte-components/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-components -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-components
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/svelte-components/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add spences10/svelte-skills-kit --skill svelte-components -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/spences10/svelte-skills-kit/tree/HEAD/plugins/svelte-skills/skills/svelte-components/SKILL.md

## When to use it
- 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 `form` attribute
- handle form resets with `defaultValue`
- integrate a third-party UI component into Svelte

## Example prompts
- 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

## Similar
- [svelte](https://affpapa.org/en/nevibecode/rules/patrickjs-svelte.md) — rule · ★ 41011
- [svelte-code-writer](https://affpapa.org/en/nevibecode/skills/svelte-code-writer.md) — skill · 12900 installs
- [svelte-core-bestpractices](https://affpapa.org/en/nevibecode/skills/svelte-core-bestpractices.md) — skill · 10900 installs
- [svelte-debug](https://affpapa.org/en/nevibecode/commands/svelte-debug.md) — command · 134 installs
- [formisch](https://affpapa.org/en/nevibecode/skills/formisch.md) — skill · 418 installs
- [tauri-svelte-typescript-guide-cursorrules-prompt-f](https://affpapa.org/en/nevibecode/rules/tauri-svelte-typescript-guide-cursorrules-prompt-f.md) — rule · ★ 41011

From the same set: [spences10/svelte-skills-kit](https://affpapa.org/en/nevibecode/by/spences10/svelte-skills-kit.md) — 4 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md