svelte5-runes_skill

Overview

This skill provides compact, practical guidance for Svelte 5 runes: $state, $derived, $effect, $props, and $bindable. It helps you choose the right rune for reactive state, computed values, side effects, and component APIs while avoiding common reactivity mistakes. Use it to enforce consistent Svelte 5 syntax and top-level rune placement.

How this skill works

The skill inspects component intent and suggests which rune to use for mutable state, read-only derived values, effects, and prop or bindable patterns. It enforces top-level rune usage, warns about mixing incompatible syntaxes, and flags anti-patterns such as local overrides of computed values. It also checks Svelte version constraints (e.g., $derived reassignment behavior) before recommending code.

When to use it

• Introduce mutable local state with $state() for values that change over time.
• Create computed values with $derived(), and use const when you want them read-only.
• Run side effects with $effect() at the top level rather than inside event handlers.
• Expose component inputs with $props() and two-way APIs with $bindable().
• When migrating to Svelte 5 or upgrading, to catch breaking changes and syntax updates.

Best practices

• Declare runes only at the top level of the <script> block; avoid nested rune calls.
• Use const for derived values you never reassign to guarantee read-only semantics.
• Prefer onclick (Svelte 5) for handlers and {@render children()} for layout children.
• Treat arrays and objects as deeply reactive; avoid manual mutation workarounds.
• Check Svelte version before suggesting $derived reassignment or other breaking changes.

Example use cases

• Simple counter: $state for count, $derived for computed doubles, $effect for logging.
• Form component: $props to read inputs, $bindable to expose two-way fields to parents.
• Performance: replace expensive recalculation inside templates with $derived.
• Side effects tied to reactive values, such as syncing to localStorage via $effect.
• Migration: update components to Svelte 5 event syntax and top-level runes.