svelte-debug — команда для Claude Code: отладка Svelte и SvelteKit
Разбирает ошибки Svelte и SvelteKit по сообщению и стеку: находит причину в компиляции, рантайме или конфиге и предлагает правку.
npx claude-code-templates@latest --command svelte/svelte-debugЧто делает svelte-debug
Команда превращает Claude в агента по отладке Svelte. Вы кидаете текст ошибки или описываете симптом, он парсит сообщение и стек, ищет корень проблемы и смотрит на код рядом. Дальше — конкретный фикс с примером и объяснение, почему сломалось.
Проверяет типичные места: реактивные конструкции ($state, $derived, $effect), расхождение SSR и CSR, ошибки в load-функциях, проблемы с form actions и роутингом, сборку и деплой. Заодно смотрит vite.config.js и svelte.config.js на несовпадение версий и конфликты зависимостей. Для диагностики советует console.log, {@debug} и DevTools.
Полезно, когда ошибка в load выглядит как «Cannot access 'user' before initialization»: команда разберёт структуру функции, проверит async/await и порядок зависимостей данных. Без открытого проекта в текущей сессии Claude толку мало — команда читает файлы, а не угадывает.
Какие задачи решает
- разобрать стек ошибки SvelteKit и найти её источник
- отличить ошибку компиляции от рантайма или конфига
- починить реактивные
$state,$derived,$effect - разрулить конфликт SSR и CSR в компоненте
- найти причину падения
load-функции
Примеры запросов агенту
- /svelte:debug Cannot access 'user' before initialization в load-функции
- /svelte:debug почему падает SSR при импорте этого компонента
- /svelte:debug вот стек ошибки сборки, найди причину
Как установить svelte-debug
1Через claude-code-templates
npx claude-code-templates@latest --command svelte/svelte-debug2Вручную: положить файлы
.claude/commands/svelte-debug.mdВызов — /svelte-debug. Для всех проектов — ~/.claude/commands/
Вручную: положить файлы
~/.codex/prompts/svelte-debug.mdВызов — /prompts:svelte-debug. В Codex этот формат помечен устаревшим, замена — скиллы
Вручную: положить файлы
.github/prompts/svelte-debug.prompt.mdВручную: положить файлы
.gemini/commands/svelte-debug.tomlGemini хранит команды в TOML: текст запроса — в поле prompt
Вопросы о svelte-debug
Как установить svelte-debug в Claude?
Через шаблоны: npx claude-code-templates@latest --command svelte/svelte-debug. Файл появится по пути .claude/commands/svelte-debug.md.
Что делает svelte-debug?
Анализирует сообщения об ошибках и стек вызовов Svelte и SvelteKit, ищет первопричину и предлагает исправление с примером кода.
Какие проблемы Svelte она проверяет?
Реактивные конструкции, конфликты SSR и CSR, ошибки в load-функциях, form actions, роутинг, а также сборку и деплой.
Исходный текст
svelte-debug.md · MIT
---
description: "Help debug Svelte and SvelteKit issues by analyzing error messages, stack traces, and common problems."
---
# /svelte:debug
Help debug Svelte and SvelteKit issues by analyzing error messages, stack traces, and common problems.
## Instructions
You are acting as the Svelte Development Agent with a focus on debugging. When the user provides an error or describes an issue:
1. **Analyze the Error**:
- Parse error messages and stack traces
- Identify the root cause (compilation, runtime, or configuration)
- Check for common Svelte/SvelteKit pitfalls
2. **Diagnose the Problem**:
- Examine the relevant code files
- Check for syntax errors, missing imports, or incorrect usage
- Verify configuration files (vite.config.js, svelte.config.js, etc.)
- Look for version mismatches or dependency conflicts
3. **Common Issues to Check**:
- Reactive statement errors ($state, $derived, $effect)
- SSR vs CSR conflicts
- Load function errors (missing returns, incorrect data access)
- Form action problems
- Routing issues
- Build and deployment errors
4. **Provide Solutions**:
- Offer specific fixes with code examples
- Suggest debugging techniques (console.log, {@debug}, browser DevTools)
- Recommend relevant documentation sections
- Provide step-by-step resolution guides
5. **Preventive Measures**:
- Suggest TypeScript additions for better error catching
- Recommend linting rules
- Propose architectural improvements
## Example Usage
User: "I'm getting 'Cannot access 'user' before initialization' error in my load function"
Assistant will:
- Examine the load function structure
- Check for proper async/await usage
- Verify data dependencies
- Provide corrected code
- Explain the fix and how to avoid similar issues
© davila7 · MIT · davila7/claude-code-templates