svelte-code-writer — скилл для Claude Code: что делает
Скилл ищет официальную документацию Svelte 5 и проверяет компоненты через autofixer. Пригодится при написании и правке файлов .svelte или .svelte.ts.
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-codeЧто делает svelte-code-writer
Скилл вызывает утилиты пакета @sveltejs/mcp через npx. С помощью команды list-sections агент получает перечень доступных глав документации Svelte 5 и SvelteKit, а затем запрашивает нужный текст через get-documentation. Это даёт точные примеры по рунам прямо во время генерации кода.
Для проверки разметки и логики запускается svelte-autofixer. Утилита разбирает файл или фрагмент кода, находит частые ошибки и даёт готовые рекомендации. Анализатор изначально настроен на Svelte 5. Если передать флаг --svelte-version 4 или точный номер из package.json, он включит правила под конкретный релиз. Флаг --async активирует асинхронный режим.
При передаче кода в терминал символ доллара в рунах нужно экранировать как \$. Если этого не сделать, командная оболочка воспримет $state или $derived как системную переменную и подставит пустоту.
Какие задачи решает
- проверить компонент утилитой autofixer перед сохранением
- загрузить документацию по рунам
$stateи$derived - получить список разделов справки Svelte 5 и SvelteKit
- настроить анализ синтаксиса под Svelte 4 через
--svelte-version
Примеры запросов агенту
- Проверь файл `./src/lib/Component.svelte` через svelte-autofixer и исправь ошибки
- Найди в документации разделы про `$state` и покажи примеры использования
- Запусти `list-sections` и покажи доступные темы документации по SvelteKit
Как установить svelte-code-writer
1Через Skills CLI (Vercel)
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code2Вручную: положить файлы
~/.claude/skills/svelte-code-writer/SKILL.mdПапка скилла целиком; для одного проекта — .claude/skills/svelte-code-writer/
1Через Skills CLI (Vercel)
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a codex2Вручную: положить файлы
.agents/skills/svelte-code-writer/SKILL.mdДля всех проектов — ~/.agents/skills/
1Через Skills CLI (Vercel)
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a cursor2Вручную: положить файлы
.cursor/skills/svelte-code-writer/SKILL.mdCursor читает и .agents/skills/, и .claude/skills/
1GitHub CLI
gh skill install sveltejs/ai-tools svelte-code-writer2Вручную: положить файлы
.github/skills/svelte-code-writer/SKILL.md1Через Skills CLI (Vercel)
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a gemini-cli2Командой платформы
gemini skills install https://github.com/sveltejs/ai-tools --path tools/skills/svelte-code-writerВручную: положить файлы
.devin/skills/svelte-code-writer/SKILL.mdСтарый путь .windsurf/skills/ тоже читается
Через Skills CLI (Vercel)
npx skills add sveltejs/ai-tools --skill svelte-code-writer -a opencodeClaude.ai
Упакуйте папку в zip и загрузите в Settings → Capabilities → Skills
Из того же набора2
Весь набор →Похожие
Вопросы о svelte-code-writer
Как установить svelte-code-writer в Claude Code?
Выполните команду npx skills add sveltejs/ai-tools --skill svelte-code-writer -a claude-code в терминале проекта.
Что делает скилл svelte-code-writer?
Он обращается к CLI-инструментам @sveltejs/mcp, чтобы скачивать документацию Svelte 5 и проверять код компонентов перед сохранением.
Можно ли проверять проекты на Svelte 4?
Да, для этого утилите svelte-autofixer передают аргумент --svelte-version 4 или точную версию из package.json.
Исходный текст
SKILL.md · MIT
--- name: svelte-code-writer description: CLI tools for Svelte 5 documentation lookup and code analysis. MUST be used whenever creating, editing or analyzing any Svelte component (`.svelte`) or Svelte module (`.svelte.ts`/`.svelte.js`). If possible, this skill should be executed within the `svelte-file-editor` subagent for optimal results. --- ## CLI tools You have access to `@sveltejs/mcp` CLI for Svelte-specific assistance. Use these commands via `npx`: ### List documentation sections ```bash npx @sveltejs/mcp list-sections ``` Lists all available Svelte 5 and SvelteKit documentation sections with titles and paths. ### Get documentation ```bash npx @sveltejs/mcp get-documentation "<section1>,<section2>,..." ``` Retrieves full documentation for specified sections. Use after `list-sections` to fetch relevant docs. **Example:** ```bash npx @sveltejs/mcp get-documentation "$state,$derived,$effect" ``` ### Svelte autofixer ```bash npx @sveltejs/mcp svelte-autofixer "<code_or_path>" [options] ``` Analyzes Svelte code and suggests fixes for common issues. **Options:** - `--async` - Enable async Svelte mode (default: false) - `--svelte-version` - Target version, ideally the full version from `package.json` (e.g. `5.16.0`) so version-specific suggestions are enabled. The major must be 4 or 5 (default: 5) **Examples:** ```bash # Analyze inline code (escape $ as \$) npx @sveltejs/mcp svelte-autofixer '<script>let count = \$state(0);</script>' # Analyze a file npx @sveltejs/mcp svelte-autofixer ./src/lib/Component.svelte # Target Svelte 4 npx @sveltejs/mcp svelte-autofixer ./Component.svelte --svelte-version 4 ``` **Important:** When passing code with runes (`$state`, `$derived`, etc.) via the terminal, escape the `$` character as `\$` to prevent shell variable substitution. ## Workflow 1. **Uncertain about syntax?** Run `list-sections` then `get-documentation` for relevant topics 2. **Reviewing/debugging?** Run `svelte-autofixer` on the code to detect issues 3. **Always validate** - Run `svelte-autofixer` before finalizing any Svelte component
© sveltejs · MIT · sveltejs/ai-tools