Svelte5 Runes Static

If you're shipping a static SvelteKit site with Svelte 5 runes and hitting frozen state after prerendering, this walks you through the hybrid pattern that actually works. Keep global state in traditional writable() stores, bridge them to component-local $state() via $effect() subscriptions, then use $derived() for computed values. The critical insight is that runes in module scope don't survive adapter-static hydration, but the manual subscription dance does. Includes the full TypeScript setup for typed props, store bridges, and browser guards to avoid hydration mismatches. Written for developers who've already burned an afternoon debugging why their counter stopped working after SSG.

skills.sh installs: 373
GitHub stars: 79
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add bobmatnyc/claude-mpm-skills --skill svelte5-runes-static --agent claude-code

Installs into .claude/skills of the current project.

Files

Svelte 5 Runes with adapter-static (SvelteKit)

Overview

Build static-first SvelteKit applications with Svelte 5 runes without breaking hydration. Apply these patterns when using adapter-static (prerendering) and combining global stores with component-local runes.

Related Skills

svelte (Svelte 5 runes core patterns)
sveltekit (adapters, deployment, SSR/SSG patterns)
typescript-core (TypeScript patterns and validation)
vitest (unit testing patterns)

Core Expertise

Building static-first Svelte 5 applications using runes mode with proper state management patterns that survive prerendering and hydration.

Critical Compatibility Rules

❌ NEVER: Runes in Module Scope with adapter-static

Problem: Runes don't hydrate properly after static prerendering

// ❌ BROKEN - State becomes frozen after SSG
export function createStore() {
  let state = $state({ count: 0 });
  return {
    get count() { return state.count; },
    increment: () => { state.count++; }
  };
}

SKILL.md on GitHub