sveltekit · davila7 — скилл для Claude Code: что делает и как установить
Скилл для Claude, который помогает собирать приложения на SvelteKit: маршруты по файлам, серверный рендеринг, эндпоинты и обработка форм.
npx claude-code-templates@latest --skill web-development/sveltekitЧто делает sveltekit
Скилл описывает работу с SvelteKit — официальным фреймворком поверх Svelte. Агент получает инструкции по маршрутизации от файлов, серверному рендерингу и генерации статики, эндпоинтам и действиям форм. Внутри — пошаговый разбор: создание проекта, структура каталогов, загрузка данных через load, эндпоинты в +server.ts, формы с use:enhance, вложенные макеты и режимы рендеринга по маршруту.
Отдельно разобраны защищённые маршруты, хуки как middleware для сессий и перезапуск загрузчиков через invalidateAll. Есть список практик: серверную логику держать в +page.server.ts, общие серверные модули — в $lib/server/, типизировать возвраты загрузчиков через сгенерированные $types.
Скилл рассчитан на проект, который уже создаётся командой npm create svelte@latest. Без установленного Node.js и npm шаги из него не выполнить, поэтому сначала проверьте окружение. Ставить его имеет смысл, когда вы начинаете новый проект на SvelteKit или переносите одностраничное приложение на фреймворк с серверной частью.
Какие задачи решает
- разложить маршруты по файлам и папкам без ручного роутера
- подключить серверный рендеринг или статику для отдельных страниц
- написать эндпоинт рядом со страницей, а не в отдельном слое
- обработать отправку формы без клиентского запроса
- закрыть раздел сайта проверкой сессии в хуке
Примеры запросов агенту
- Создай новый проект SvelteKit с TypeScript и покажи структуру
src/routes - Добавь эндпоинт
+server.tsдля списка постов с параметромlimit - Сделай форму подписки с действием в
+page.server.tsиuse:enhance
Как установить sveltekit
1Через claude-code-templates
npx claude-code-templates@latest --skill web-development/sveltekit2Через Skills CLI (Vercel)
npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code3Вручную: положить файлы
~/.claude/skills/sveltekit/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/sveltekit/
Вручную: положить файлы
.agents/skills/sveltekit/SKILL.mdДля всех проектов — ~/.agents/skills/
Вручную: положить файлы
.cursor/skills/sveltekit/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install davila7/claude-code-templates sveltekit2Вручную: положить файлы
.github/skills/sveltekit/SKILL.mdКомандой платформы
gemini skills install https://github.com/davila7/claude-code-templates --path cli-tool/components/skills/web-development/sveltekitВручную: положить файлы
.devin/skills/sveltekit/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Claude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
По шагам, с командами для каждой платформы: Как установить скилл в Claude Code: пять способов
Вопросы о sveltekit
Как установить sveltekit в Claude Code?
Через шаблоны: npx claude-code-templates@latest --skill web-development/sveltekit. Второй способ — npx skills add davila7/claude-code-templates --skill sveltekit -a claude-code. После установки файл скилла лежит в ~/.claude/skills/sveltekit/SKILL.md.
Что делает скилл sveltekit?
Даёт агенту инструкции по SvelteKit: маршрутизация от файлов, загрузка данных, эндпоинты, действия форм, макеты и режимы рендеринга. Плюс примеры защищённого маршрута и хука для сессий.
Что нужно, чтобы скилл сработал?
Проект создаётся командой npm create svelte@latest, значит нужны Node.js и npm. Серверную логику скилл советует держать в +page.server.ts и $lib/server/.
Похожие скиллы
Всё по теме «Фронтенд и UI» →Сначала — sveltekit от других авторов.
