name: svelte-runes

IMPORTANT: Keep description on ONE line for Claude Code compatibility

prettier-ignore

description: Svelte runes guidance. Use for reactive state, props, effects, or migration. Covers $state, $derived, $effect, $props, $bindable. Prevents reactivity mistakes.

Svelte Runes

Quick Start

Which rune? Props: $props() | Bindable: $bindable() |
Computed: $derived() | Side effect: $effect() | State: $state()

Key rules: Runes are top-level only. $derived can be overridden
(use const for read-only). Don't mix Svelte 4/5 syntax.
Objects/arrays are deeply reactive by default.

Example

<script>
    let count = $state(0); // Mutable state
    const doubled = $derived(count * 2); // Computed (const = read-only)

    $effect(() => {
        console.log(`Count is ${count}`); // Side effect
    });
</script>

<button onclick={() => count++}>
    {count} (doubled: {doubled})
</button>

Reference Files

• reactivity-patterns.md - When
  to use each rune
• migration-gotchas.md - Svelte 4→5
  translation
• component-api.md - $props, $bindable
  patterns
• snippets-vs-slots.md - New
  snippet syntax
• common-mistakes.md - Anti-patterns
  with fixes

For @attach and other template directives, see the
svelte-template-directives skill.

Notes

• Use onclick not on:click, {@render children()} in layouts
• $derived can be reassigned (5.25+) - use const for read-only
• Last verified: 2025-01-11