svelte-components — скилл для Claude Code: паттерны компонентов Svelte
Подсказывает агенту, как строить компоненты Svelte: headless-библиотеки, веб-компоненты и формы, которые не оборачивают поля ввода.
npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-codeЧто делает svelte-components
Скилл описывает паттерны компонентов Svelte и подключается, когда в проекте нужны веб-компоненты, библиотеки вроде Bits UI, Ark UI или Melt UI, работа с формами и сторонние интеграции. Внутри — краткая справка и три файла-справочника: component-libraries.md про настройку Bits UI и Ark UI, web-components.md про сборку кастомных элементов, form-patterns.md про сложную обработку форм.
Из практичного: показан трюк с атрибутом form, когда форма не может обернуть поля ввода — например, при вёрстке таблицы. Кнопка и input ссылаются на форму по её id, а сама форма стоит снаружи. Для кастомных элементов в svelte.config.js включается compilerOptions.customElement, а в компоненте добавляется <svelte:options customElement="my-button" />.
Скилл рассчитан на Svelte, поэтому в проекте на React или Vue он не пригодится — там свои паттерны. В заметках указано, что Bits UI 1.0 даёт нестилизованные доступные компоненты, а последняя проверка содержимого датируется 2025-01-14: если библиотека успела сменить API, сверяйтесь с её документацией.
Какие задачи решает
- собрать кастомный элемент из Svelte-компонента
- подключить headless-библиотеку вроде Bits UI или Ark UI
- связать поля ввода с формой через атрибут
form - разобраться с обработкой форм и сбросом значений
- встроить сторонний UI-компонент в Svelte-проект
Примеры запросов агенту
- покажи, как сделать веб-компонент из Svelte-компонента
- как связать input с формой через атрибут form, если форма не оборачивает таблицу
- подскажи паттерн формы со сбросом через defaultValue
Как установить svelte-components
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-code2Вручную: положить файлы
~/.claude/skills/svelte-components/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svelte-components/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a codex2Вручную: положить файлы
.agents/skills/svelte-components/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a cursor2Вручную: положить файлы
.cursor/skills/svelte-components/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit svelte-components2Вручную: положить файлы
.github/skills/svelte-components/SKILL.md1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a gemini-cli2Командой платформы
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-componentsВручную: положить файлы
.devin/skills/svelte-components/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-components -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о svelte-components
Как установить svelte-components в Claude?
Выполните npx skills add spences10/svelte-skills-kit --skill svelte-components -a claude-code. После этого файл скилла лежит по пути ~/.claude/skills/svelte-components/SKILL.md.
Что делает svelte-components?
Даёт агенту паттерны компонентов Svelte: веб-компоненты, headless-библиотеки, формы и сторонние интеграции. Подробности вынесены в три файла-справочника внутри скилла.
Для каких платформ подходит этот скилл?
Кроме Claude есть установка для Codex, Cursor, GitHub Copilot, Gemini CLI и OpenCode. Для GitHub Copilot команда другая: gh skill install spences10/svelte-skills-kit svelte-components.
