svelte-template-directives — скилл для Claude Code
Скилл помогает работать с директивами шаблонов Svelte: от подключения к DOM до вывода HTML и сниппетов. Пригодится при разработке компонентов на Svelte.
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-codeЧто делает svelte-template-directives
Скилл объясняет, как применять {@attach}, {@html}, {@render}, {@const} и {@debug}, а также ключи в блоках {@each} и обработчики глобальных событий. Например, {@attach} связывает элемент с внешней библиотекой и может повторно срабатывать при изменении зависимостей.
Материалы включают краткую справку и файлы с примерами для {@attach} и остальных директив. Для {@attach} нужна Svelte 5.29 или новее; это стоит учесть, если проект использует более раннюю версию. Для преобразования старых actions описан fromAction из svelte/attachments.
Какие задачи решает
- подключить стороннюю библиотеку к DOM-элементу
- вывести строку как HTML в шаблоне
- отрисовать сниппет в разметке
- задать локальную константу внутри блока
- останавливать отладчик при изменении значения
Примеры запросов агенту
- Покажи, как подключить библиотеку к элементу Svelte через {@attach}.
- Объясни, когда использовать {@html}, а когда {@render} в этом шаблоне.
- Помоги заменить старый action на attachment с помощью fromAction.
Как установить svelte-template-directives
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-code2Вручную: положить файлы
~/.claude/skills/svelte-template-directives/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svelte-template-directives/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a codex2Вручную: положить файлы
.agents/skills/svelte-template-directives/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a cursor2Вручную: положить файлы
.cursor/skills/svelte-template-directives/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install spences10/svelte-skills-kit svelte-template-directives2Вручную: положить файлы
.github/skills/svelte-template-directives/SKILL.md1Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a gemini-cli2Командой платформы
gemini skills install https://github.com/spences10/svelte-skills-kit --path plugins/svelte-skills/skills/svelte-template-directivesВручную: положить файлы
.devin/skills/svelte-template-directives/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о svelte-template-directives
Как установить svelte-template-directives в Claude Code?
Выполните npx skills add spences10/svelte-skills-kit --skill svelte-template-directives -a claude-code. Файл скилла будет доступен по пути ~/.claude/skills/svelte-template-directives/SKILL.md.
Что делает svelte-template-directives?
Скилл описывает директивы шаблонов Svelte, включая работу с DOM, HTML, сниппетами и отладкой. Также в нём разобраны ключи блоков {@each} и глобальные события.
Какая версия Svelte нужна для {@attach}?
Для {@attach} требуется Svelte 5.29 или новее. Старые actions можно преобразовать через fromAction из svelte/attachments.
