svelte

name	svelte
description	Svelte/SvelteKit mastery. Runes reactivity, stores, routing, form actions, SSR, adapter configuration.

Svelte -- Svelte/SvelteKit Mastery

Activate When

• /godmode:svelte, "Svelte app", "SvelteKit"
• "Svelte stores", "runes", "$state", "load functions"
• "form actions", "SvelteKit routing"
• "work in svelte", "svelte component", "write svelte"

Auto-Detection

cat package.json 2>/dev/null \
  | grep -E '"svelte"|"@sveltejs/kit"'
ls svelte.config.js svelte.config.ts 2>/dev/null

Workflow

Step 1: Project Assessment

Svelte version: <4 / 5>
Meta-framework: SvelteKit | standalone
Reactivity: Runes ($state) | Legacy ($:) | Mixed
State: Svelte stores | Runes | external
Routing: SvelteKit file-based | custom
CSS: Tailwind | UnoCSS | SCSS | scoped

IF starting fresh: "Need SSR? Use SvelteKit."

Step 2: Reactivity Model

DECISION:
IF new project + Svelte 5: use Runes
IF existing Svelte 4: keep legacy unless migrating
IF mixed codebase: plan migration, don't stay mixed

| Factor        | Runes (Svelte 5) | Legacy (4)   |
|--------------|-----------------|-------------|
| Explicitness | $state (explicit)| let (implicit)|
| Computed     | $derived (clear) | $: (ambiguous)|
| Side effects | $effect          | $: (overloaded)|
| Props        | $props() (typed) | export let   |
| Granularity  | Signal-based     | Component    |

Step 3: Stores

Svelte 5: reactive classes (.svelte.ts)
Svelte 4: writable/readable/derived stores
Rules:
  One store per domain (cart, auth, notifications)
  Expose minimal API (subscribe + methods)
  Derived stores for computed values
  Server-safe (no client state in global scope)

Step 4: SvelteKit Routing