К основному содержанию
команда

svelte-debug — команда для Claude Code: отладка Svelte и SvelteKit

Разбирает ошибки Svelte и SvelteKit по сообщению и стеку: находит причину в компиляции, рантайме или конфиге и предлагает правку.

Установить в Claude Code · Через claude-code-templates Все способы и платформы ↓
npx claude-code-templates@latest --command svelte/svelte-debug
Открыть на GitHub

Что делает 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-debug

2Вручную: положить файлы

.claude/commands/svelte-debug.md

Вызов — /svelte-debug. Для всех проектов — ~/.claude/commands/

Вопросы о 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

Похожие слэш-команды

Всё по теме «Фронтенд и UI» →
svelte-code-writer sveltejs Скилл ищет официальную документацию Svelte 5 и проверяет компоненты через autofixer. Пригодится при написании и правке файлов .svelte или .svelte.ts. CX Codex +1 12 900установок svelte PatrickJS Правило для Cursor с набором практик по Svelte: структура компонентов, реактивность, сторы, роутинг через SvelteKit и тесты. Пригодится, когда агент пишет или правит код на Svelte. ★ 41 011звёзд репо sentry-svelte-sdk getsentry Скилл проводит агента через полную настройку Sentry в Svelte и SvelteKit: сканирует проект, предлагает набор функций и пишет конфиги. CX Codex +1 2 100установок svelte-core-bestpractices sveltejs Скилл объясняет агенту, как писать код на Svelte с рунами: $state, $derived, события, стили. Пригодится, когда агент правит компоненты в проекте на Svelte. CX Codex +1 10 900установок svelte5-best-practices ejirocodes Скилл для ИИ-агента, который подсказывает руны Svelte 5, сниппеты и паттерны SvelteKit при написании и рефакторинге компонентов. CX Codex +1 16 600установок svelte-components spences10 Подсказывает агенту, как строить компоненты Svelte: headless-библиотеки, веб-компоненты и формы, которые не оборачивают поля ввода. CX Codex +1 531установок

Из того же набора205

Весь набор →
crewai Помогает проектировать команды ИИ-агентов на CrewAI: роли, задачи, оркестрация и процессы. Пригодится, когда один агент уже не тянет. 141установок perplexity Скилл подключает Perplexity к Claude: поиск по вебу, разговорные ответы и глубокое исследование через агента. Пригодится, когда нужны свежие данные, а не документация библиотеки. 140установок dependency-updater Скилл сам определяет тип проекта, ставит безопасные обновления и спрашивает разрешение на мажорные версии. 136установок data-processing-ray-data Скилл для Claude, который подсказывает агенту, как обрабатывать большие датасеты через Ray Data: стриминг, GPU, батч-инференс. 134установок paper-2-web Превращает научную статью в LaTeX или PDF в интерактивный сайт, постер для конференции и презентационное видео. Пригодится перед докладом или для продвижения препринта. 133установок react-useeffect Скилл разбирает правила работы с useEffect по официальной документации React и подсказывает, чем заменить Effect там, где он лишний. 127установок svelte-scaffold Разворачивает новый SvelteKit-проект, модуль или библиотеку компонентов с готовой структурой папок и конфигами. Пригодится, когда нужен стартовый каркас без ручной возни. 127установок vercel-deployment Скилл для Claude, который подсказывает, как правильно выкатывать Next.js на Vercel: переменные окружения, edge и serverless, кэш сборки. 124установок

Спонсоры проекта

Компании, которые помогают держать аналитику открытой