---
name: "svelte-5-runes-reactivity"
description: "Build modern Svelte 5 applications using universal Runes: $state, $derived, and $effect."
metadata:
  author: "Svelte"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "use svelte 5 runes"
  - "$state and $derived svelte 5"
  - "universal state svelte.ts"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Svelte 5 Runes Reactivity & Fine-Grained Signals

Implements Svelte 5 Runes: declaring reactive state ($state, $state.raw), computed values ($derived, $derived.by), managing side effects ($effect, $effect.pre), component props ($props), and creating universal .svelte.ts state modules.

## When to Invoke
Invoke this skill whenever you need to:
- use svelte 5 runes
- $state and $derived svelte 5
- universal state svelte.ts

## Execution SOP & Rules
1. Declare reactive state: let count = $state(0); or let user = $state({ name: 'Alex' }).
2. Declare derived computations: let double = $derived(count * 2).
3. Accept typed component props: let { title, count = 0 }: { title: string, count?: number } = $props();.
4. Create reusable state in counter.svelte.ts using standard export function returning $state objects.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.