What problem does it solve?
This Skill helps you avoid common Svelte 5 performance and correctness pitfalls by guiding you to use the recommended runes and patterns for reactivity, events, context, styling, and async rendering.
Core Features & Use Cases
- Correct reactivity with runes: Prefer
$state for reactive state, $derived for derived values, and reserve $effect for true side effects to prevent update bugs and unnecessary reruns.
- Event and lifecycle best practices: Attach event listeners with
on* attributes and use svelte:window / svelte:document instead of onMount for external events.
- Maintainable UI composition: Use keyed
{#each} blocks, snippets ({#snippet ...} / {@render ...}), and CSS scoping patterns to keep components predictable and performant.
- Async and SSR guidance: Apply
await in supported Svelte 5.36+ contexts, understand boundaries/pending, and use hydratable when needed to keep SSR and hydration consistent.
Quick Start
Load this skill and ask for guidance to rewrite a Svelte component so it uses runes correctly (for example, replacing incorrect $effect/$: usage with $derived and $state), while improving performance and update behavior.
