svelte-components
installsforks
How to install svelte-components?
spences10/svelte-skills-kit/svelte-components
$npx -y skills add spences10/svelte-skills-kit --skill svelte-componentsSvelte component patterns. Use for web components, component libraries (Bits UI, Ark UI, Melt UI), form patterns, or third-party integration.
SKILL.md
| 1 | # Svelte Components |
| 2 | |
| 3 | ## Quick Start |
| 4 | |
| 5 | **Component libraries:** Bits UI (headless) | Ark UI | Melt UI |
| 6 | (primitives) |
| 7 | |
| 8 | **Form trick:** Use `form` attribute when form can't wrap inputs: |
| 9 | |
| 10 | ```svelte |
| 11 | <form id="my-form" action="/submit"><!-- outside table --></form> |
| 12 | <table> |
| 13 | <tr> |
| 14 | <td><input form="my-form" name="email" /></td> |
| 15 | <td><button form="my-form">Submit</button></td> |
| 16 | </tr> |
| 17 | </table> |
| 18 | ``` |
| 19 | |
| 20 | ## Web Components |
| 21 | |
| 22 | ```javascript |
| 23 | // svelte.config.js |
| 24 | export default { |
| 25 | compilerOptions: { |
| 26 | customElement: true, |
| 27 | }, |
| 28 | }; |
| 29 | ``` |
| 30 | |
| 31 | ```svelte |
| 32 | <!-- MyButton.svelte --> |
| 33 | <svelte:options customElement="my-button" /> |
| 34 | |
| 35 | <button><slot /></button> |
| 36 | ``` |
| 37 | |
| 38 | ## Reference Files |
| 39 | |
| 40 | - [component-libraries.md](references/component-libraries.md) - Bits |
| 41 | UI, Ark UI setup |
| 42 | - [web-components.md](references/web-components.md) - Building custom |
| 43 | elements |
| 44 | - [form-patterns.md](references/form-patterns.md) - Advanced form |
| 45 | handling |
| 46 | |
| 47 | ## Notes |
| 48 | |
| 49 | - Bits UI 1.0: flexible, unstyled, accessible components for Svelte |
| 50 | - Form `defaultValue` attribute enables easy form resets |
| 51 | - Use snippets to wrap rich HTML in custom select options |
| 52 | - **Last verified:** 2025-01-14 |
| 53 | |
| 54 | <!-- |
| 55 | PROGRESSIVE DISCLOSURE GUIDELINES: |
| 56 | - Keep this file ~50 lines total (max ~150 lines) |
| 57 | - Use 1-2 code blocks only (recommend 1) |
| 58 | - Keep description <200 chars for Level 1 efficiency |
| 59 | - Move detailed docs to references/ for Level 3 loading |
| 60 | - This is Level 2 - quick reference ONLY, not a manual |
| 61 | --> |
People who liked this also viewed
6 picksType
- hyperframes-cliUse the HyperFrames CLI development loop: init, add, catalog, capture, lint, check, snapshot, compare, grade-compare, preview, play, present, beats, keyframes, single or batch render, publish, cloud, SkillsJul 2026
- request-refactor-planSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- analyze-projectRigor Analyze / Rigor Audit read-only skill for deep learning research repositories. Use when the user wants to read and understand a repository, inspect model structure and training or inference entrSkillsMay 2026
- explore-codeRigor Improve implementation leaf skill for auditable candidate implementation in deep learning research repositories. Use when the researcher explicitly authorizes exploratory work on an isolated braSkillsMay 2026
- ubiquitous-languageSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
- scaffold-exercisesSkills for Real Engineers. Straight from my .agents directory.SkillsJul 2026
