command

svelte-debug — Claude Code command: debug Svelte and SvelteKit

Q: How do I install svelte-debug in Claude?

Use the templates CLI: `npx claude-code-templates@latest --command svelte/svelte-debug`. The command lands at `.claude/commands/svelte-debug.md`.

Q: Which Svelte issues does it cover?

Reactive statements, SSR and CSR conflicts, `load` function errors, form actions, routing, plus build and deployment failures.

Reads a Svelte or SvelteKit error and stack trace, finds whether the cause is compilation, runtime or config, and hands you a fix.

Install into Claude Code · claude-code-templates All methods and platforms ↓

npx claude-code-templates@latest --command svelte/svelte-debug

Open on GitHub

What svelte-debug does

This command turns Claude into a debugging agent for Svelte. Paste an error message or describe the symptom, and it parses the trace, looks for the root cause, and reads the surrounding code. You get a concrete fix with a code example plus an explanation of what broke.

It checks the usual suspects: reactive statements ($state, $derived, $effect), SSR versus CSR conflicts, load function errors, form action problems, routing, build and deploy failures. It also inspects vite.config.js and svelte.config.js for version mismatches and dependency conflicts. For diagnosis it suggests console.log, {@debug} and browser DevTools.

Handy when a load function throws something like "Cannot access 'user' before initialization": the command walks the function structure, checks async/await usage and the order of data dependencies. It needs the project open in your Claude session, because it reads files rather than guessing at them.

What it helps with

parse a SvelteKit stack trace and locate the source
tell a compilation error from a runtime or config one
fix broken $state, $derived and $effect reactivity
resolve an SSR versus CSR conflict in a component
find why a load function fails

Example prompts for the agent

/svelte:debug Cannot access 'user' before initialization in my load function
/svelte:debug why does SSR break on this component import
/svelte:debug here's the build error stack, find the cause

How to install svelte-debug

1claude-code-templates

npx claude-code-templates@latest --command svelte/svelte-debug

2Manually: put the files in place

.claude/commands/svelte-debug.md

Call it with /svelte-debug. For all projects use ~/.claude/commands/

Manually: put the files in place

~/.codex/prompts/svelte-debug.md

Call it with /prompts:svelte-debug. Codex marks this format deprecated in favour of skills

Manually: put the files in place

.github/prompts/svelte-debug.prompt.md

Manually: put the files in place

.gemini/commands/svelte-debug.toml

Gemini stores commands as TOML: the prompt text goes into the prompt field

Questions about svelte-debug

How do I install svelte-debug in Claude?

Use the templates CLI: npx claude-code-templates@latest --command svelte/svelte-debug. The command lands at .claude/commands/svelte-debug.md.

What does svelte-debug do?

It analyzes Svelte and SvelteKit error messages and stack traces, identifies the root cause, and proposes a fix with code examples.

Which Svelte issues does it cover?

Reactive statements, SSR and CSR conflicts, load function errors, form actions, routing, plus build and deployment failures.

Source text

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

Similar slash commands

Everything for Frontend and UI →

svelte-code-writer sveltejs Fetches Svelte 5 documentation and analyzes components using autofixer. Useful when authoring or debugging .svelte and .svelte.ts files. CX Codex +1 12,900installs svelte PatrickJS A Cursor rule that steers the agent toward Svelte conventions: component structure, reactivity, stores, SvelteKit routing and tests. Useful when the agent writes or edits Svelte code. ★ 41,011repo stars sentry-svelte-sdk getsentry A skill that walks your agent through full Sentry setup in Svelte and SvelteKit: it scans the project, proposes a feature set and writes the config files. CX Codex +1 2,100installs svelte-core-bestpractices sveltejs A skill that tells the agent how to write Svelte components with runes: $state, $derived, events, styling. Useful as soon as the agent edits a Svelte project. CX Codex +1 10,900installs svelte5-best-practices ejirocodes A skill that feeds your coding agent Svelte 5 runes, snippets and SvelteKit patterns while you write or refactor components. CX Codex +1 16,600installs svelte-components spences10 Tells your agent how to build Svelte components: headless libraries, custom elements, and forms that cannot wrap their inputs. CX Codex +1 531installs

From the same set205

The whole set →

crewai Designs multi-agent teams on CrewAI: roles, tasks, orchestration and process types. Useful once a single agent stops being enough. 141installs perplexity This skill wires Perplexity into Claude: web search, conversational answers, and deep research through an agent. Handy when you need current information rather than library docs. 140installs dependency-updater A skill that detects your project type, applies safe dependency updates on its own and asks before touching major versions. 136installs data-processing-ray-data A Claude skill that tells the agent how to process large datasets with Ray Data: streaming, GPU transforms, batch inference. 134installs paper-2-web Turns an academic paper in LaTeX or PDF into an interactive homepage, a conference poster and a presentation video. Handy before a talk or when promoting a preprint. 133installs react-useeffect A skill that walks through React's useEffect rules from the official docs and points out what to use instead when an Effect is unnecessary. 127installs svelte-scaffold Builds out a new SvelteKit project, feature module or component library with a ready folder layout and config files. Handy when you want a starting point without wiring it by hand. 127installs vercel-deployment A Claude skill that tells your agent how to deploy Next.js to Vercel: env vars per environment, edge vs serverless, build cache. 124installs