svelte-runes — скилл для Claude Code: что делает и как установить
Помогает ИИ-агенту писать код на Svelte 5 с рунами без смешивания устаревшего синтаксиса. Пригодится при настройке реактивности, пропсов и миграции компонентов.
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a claude-codeЧто делает svelte-runes
Скилл передаёт агенту правила работы с реактивностью Svelte 5. Он описывает базовые руны $state, $derived, $effect, а также интерфейс компонентов через $props и $bindable. Массивы и объекты внутри $state становятся глубоко реактивными сразу.
Руны работают только на верхнем уровне скрипта. Смешивание синтаксиса Svelte 4 и 5 ломает реактивность, поэтому агент следит за новыми директивами шаблонов: onclick вместо on:click и сниппеты {@render children()} вместо слотов. В версии 5.25 и выше значение руны $derived можно переназначить. Чтобы оставить вычисляемое поле неизменяемым, его объявляют через const.
Для контекста скилл предлагает использовать createContext ради типизации, а отслеживать сбои в зависимостях советует через $inspect.trace. Для шаблонных директив вроде @attach автор вынес отдельный набор инструкций.
Какие задачи решает
- перевести компоненты с синтаксиса Svelte 4 на руны Svelte 5
- объявить состояние и вычисляемые значения через
$stateи$derived - настроить двустороннюю привязку пропсов с помощью
$bindable - отладить цепочки реактивности вызовом
$inspect.trace
Примеры запросов агенту
- Перепиши этот компонент со старого синтаксиса Svelte 4 на руны
$stateи$derived. - Сделай пропс
valueдвусторонним через$bindableи замени устаревшийon:clickнаonclick.
Как установить svelte-runes
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a claude-code2Вручную: положить файлы
~/.claude/skills/svelte-runes/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svelte-runes/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a codex2Вручную: положить файлы
.agents/skills/svelte-runes/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a cursor2Вручную: положить файлы
.cursor/skills/svelte-runes/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit svelte-runes2Вручную: положить файлы
.github/skills/svelte-runes/SKILL.md1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a gemini-cli2Командой платформы
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-runesВручную: положить файлы
.devin/skills/svelte-runes/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-runes -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о svelte-runes
Как установить svelte-runes в Claude Code?
Выполните команду npx skills add spences10/svelte-skills-kit --skill svelte-runes -a claude-code. Агент сразу получит доступ к файлу с правилами.
Что делает скилл svelte-runes?
Он инструктирует модель по синтаксису Svelte 5, помогая объявлять реактивные переменные, пропсы и вычисляемые значения без смешивания со старыми директивами.
Почему для $derived рекомендуют использовать const?
Начиная с версии Svelte 5.25 значения $derived допускают переназначение. Объявление через const гарантирует, что вычисляемое состояние останется доступным только для чтения.
