svelte-5
Installation
SKILL.md
Svelte 5 Patterns and Gotchas
Svelte 5 introduces runes ($state, $derived, $effect) as the primary reactivity system. This skill documents patterns and solutions for common issues.
Quick Reference
| Scenario | Use This | Not This |
|---|---|---|
| Component state | let x = $state(value) |
let x = writable(value) |
| Derived values | let y = $derived(x * 2) |
$: y = x * 2 |
| Side effects | $effect(() => { ... }) |
$: { ... } |
| Shared state | Context API or .svelte.ts modules |
Module-level writable stores |
| Client-only rendering | export const ssr = false in +page.ts |
{#if browser} wrappers |