skills.rest
SnakeO
SnakeOCOMMUNITY
Explore all skills by this author →
GitHub

debug:svelte

Diagnose and fix Svelte 5 reactivity and runes issues.

9|1|Updated Jan 12, 2026
Search Tags:#debugging#svelte#runes#reactivity#ssr#svelte-check
One-click install
npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-svelte
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug:svelte
Source: https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin/tree/main/plugins/debug-and-refactor/skills/debug-svelte
Command: npx skills add https://github.com/SnakeO/claude-debug-and-refactor-skills-plugin --skill debug-svelte

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps developers systematically diagnose and fix Svelte 5 reactivity and runes-based issues across SvelteKit and standalone Svelte apps.

Core Features & Use Cases

  • Rune-aware debugging: diagnose reactivity problems using Svelte 5 runes ($state, $derived, $effect) and migrate patterns from Svelte 4.
  • SSR hydration and compatibility checks: detect hydration mismatches and browser-only code.
  • Guided debugging workflow: follow structured phases (Gather information, Isolate the problem, Form hypotheses, Fix and verify) with concrete examples and tooling guidance.
  • Tooling guidance: leverage svelte-check, $inspect(), and the {@debug} tag to inspect state and props in real-time.

Quick Start

Pick a component exhibiting stale UI updates and run the step-by-step debugging workflow described above to identify and fix the underlying reactivity issues.

Frequently Asked Questions about debug:svelte

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I fix Svelte 5 reactivity issues with $state and $derived runes?▼

Fix Svelte 5 reactivity issues by following a structured workflow to gather information, isolate problems, and form hypotheses about $state and $derived runes. Inspect state changes in real-time using the $inspect() utility and the {@debug} tag to verify fixes.

Why does my SvelteKit app have SSR hydration mismatches?▼

SSR hydration mismatches happen when server-rendered HTML differs from the client, often due to browser-only code. Detect these mismatches using compatibility checks and structured debugging workflows to isolate and fix the hydration logic.

What is the best way to migrate Svelte 4 reactivity patterns to Svelte 5 runes?▼

Migrate Svelte 4 reactivity to Svelte 5 runes by diagnosing stale UI updates and replacing old patterns with $state, $derived, and $effect. Follow guided debugging workflows with concrete migration examples to systematically update and verify components.

Can I use svelte-check to diagnose stale UI updates in standalone Svelte applications?▼

Yes, you can use svelte-check to diagnose stale UI updates in standalone Svelte applications. Leverage svelte-check alongside $inspect() and {@debug} to systematically identify and fix rune-related reactivity issues without external software.

When should I use the $effect rune during Svelte 5 debugging?▼

Use the $effect rune during Svelte 5 debugging to synchronize state changes or perform side effects affecting reactivity. Form hypotheses around $effect behavior to isolate stale UI updates and verify fixes within your component logic.

Related Skills

Explore More Software Engineering Skills→
Tobbe3108Tobbe3108
3

svelte-code-writer

Fetches Svelte 5 documentation and analyzes components via MCP CLI.

Community
Intermediate
afonsoftafonsoft
1

angular-ssr

Configure Angular SSR, hydration, and prerendering for v20+ apps.

Community
Advanced
TanStackTanStack
485

devtools-vite-plugin

Configure the @tanstack/devtools-vite plugin for Vite projects.

Official
Advanced
kensleDevkensleDev

svelte-runes

Explains Svelte 5 runes including $state, $derived, $effect, $props, and $bindable for reactivity and migration from Svelte 4.

Community
Intermediate