svelte-ninjalisted

# Svelte/SvelteKit Patterns Comprehensive guide to Svelte 5 and SvelteKit development patterns. Emphasizes runes-based reactivity ($state, $derived, $effect, $props), component composition, SvelteKit routing, data loading, form handling, and performance optimization. ## When This Skill Applies Use this skill when: - Building Svelte components - Managing reactive state with runes - Implementing SvelteKit routes and pages - Creating load functions or form actions - Handling component composition - Optimizing Svelte/SvelteKit performance - Questions about Svelte 5 patterns or SvelteKit conventions ## Svelte 5 Fundamentals ### Runes Overview **Runes** are compiler instructions (marked with `$`) that enable explicit reactivity: - `$state` - Reactive state - `$derived` - Computed values - `$effect` - Side effects - `$props` - Component props - `$bindable` - Two-way bindable props **Key principle**: Reactivity is explicit, not implicit. Works in `.js`, `.ts`, and `.svelte` files. ## Reactive State with $state ### Basic State ```svelte <script> let count = $state(0); function increment() { count++; // Just a number, no wrapper needed } </script> <button onclick={increment}> Clicks: {count} </button> ``` **Key points**: - `$state` creates reactive state - State is the value itself (not `.value` or `getCount()`) - Updates trigger UI re-renders ### Deep Reactivity ```svelte <script> let todos = $state([ { id: 1, text: 'Learn Svelte 5', done: false } ]); functi