Can it help with SvelteKit SSR hydration issues?

Absolutely. It provides specific strategies for handling hydration mismatches and correctly guarding browser-only APIs like localStorage during server-side rendering.

What debugging tools does this skill leverage?

It guides users through Svelte's native $inspect() rune, {@debug} tags, svelte-check CLI diagnostics, and Vite's verbose logging modes.

Does this skill support Svelte 5 runes?

Yes, it includes comprehensive patterns for Svelte 5 runes like $state, $derived, and $effect, including guidance on deep reactivity and avoiding infinite loops.

How does it help with infinite update loops?

It identifies circular dependencies in $derived and $effect runes and suggests the correct use of untrack() to break dependency chains.

Svelte Debugging & Optimization

Name: Svelte Debugging & Optimization
Author: SnakeO

bySnakeO

安全与测试

Diagnoses and resolves Svelte reactivity issues, hydration mismatches, and state management errors using systematic debugging patterns.

关于

This skill provides a comprehensive framework for troubleshooting Svelte applications, spanning from legacy Svelte 4 store patterns to the modern Svelte 5 runes system ($state, $derived, $effect). It helps developers identify root causes for common pitfalls like reactivity failures, infinite update loops, and SSR hydration mismatches while leveraging native tools like $inspect(), {@debug}, and svelte-check. Whether you are migrating a codebase to Svelte 5 or fixing complex lifecycle bugs, this skill ensures your Svelte components are performant and error-free.

主要功能

Resolution of SSR hydration mismatches and browser-only API errors
Memory leak detection for Svelte 4 store subscriptions
Systematic debugging for Svelte 5 runes ($state, $derived, $effect)
Advanced usage guidance for $inspect(), {@debug}, and svelte-check CLI
Identification of reactivity pitfalls in class properties and object mutations
0 GitHub stars

使用场景

Troubleshooting UI update failures in complex Svelte 5 reactive systems
Fixing 'Cannot use runes in .js files' and other Svelte compiler-specific errors
Migrating Svelte 4 legacy reactivity and stores to Svelte 5 runes safely

关于

主要功能

Resolution of SSR hydration mismatches and browser-only API errors
Memory leak detection for Svelte 4 store subscriptions
Systematic debugging for Svelte 5 runes ($state, $derived, $effect)
Advanced usage guidance for $inspect(), {@debug}, and svelte-check CLI
Identification of reactivity pitfalls in class properties and object mutations
0 GitHub stars

使用场景

Troubleshooting UI update failures in complex Svelte 5 reactive systems
Fixing 'Cannot use runes in .js files' and other Svelte compiler-specific errors
Migrating Svelte 4 legacy reactivity and stores to Svelte 5 runes safely