svelte

Svelte

Reactivity is explicit, compiler-driven, and minimal-runtime. Every reactive declaration uses a $ rune. The compiler transforms declarative code into surgical DOM updates -- no virtual DOM, no diffing, no hidden magic. References contain extended examples, rationale, and edge cases for each topic.

References

• Runes — [${CLAUDE_SKILL_DIR}/references/runes.md]: $state, $derived, $effect, $props, $bindable details
• Components — [${CLAUDE_SKILL_DIR}/references/components.md]: Snippets, events, context, special elements
• SvelteKit — [${CLAUDE_SKILL_DIR}/references/sveltekit.md]: Routing, load functions, form actions, hooks, imports

Runes

$state

• Every mutable reactive value must use $state or $state.raw. Plain let declarations are not reactive.
• Arrays and plain objects become deeply reactive proxies. Mutations trigger granular updates.
• Destructuring $state objects breaks reactivity -- destructured values are snapshots, not live references.
• Use $state on class fields or as first assignment in constructor. The compiler transforms these into getter/setter pairs. Use arrow functions to preserve this in event handlers on classes.
• $state.raw opts out of deep reactivity -- state can only be reassigned, not mutated. Use for large arrays/objects you replace wholesale to avoid proxy overhead.
• $state.snapshot(value) takes a static copy of a reactive proxy for external APIs that don't expect proxies (e.g., structuredClone, logging).
• Import reactive Set, Map, Date, URL from svelte/reactivity when you need reactive built-in types.

Sharing State Across Modules

Cannot directly export reassignable $state. Two patterns:

• Object property (preferred): export $state({ count: 0 }) as a const, mutate properties, export modifier functions.
• Getter function: keep $state private, export getCount() and increment().

Runes only work in .svelte and .svelte.js/.svelte.ts files.