svelte-runes — Claude Code skill: what it does, how to install

What svelte-runes does

This skill equips your coding agent with core Svelte 5 reactivity conventions. It covers fundamental runes like $state for mutable state, $derived for computed data, $effect for side effects, plus $props and $bindable for component interfaces. Objects and arrays placed in state are deeply reactive right away.

Runes belong strictly at the top level. Mixing Svelte 4 and Svelte 5 patterns breaks reactivity, so the guidelines enforce modern template habits like onclick over on:click and snippet rendering via {@render children()}. Starting with Svelte 5.25, $derived can be reassigned. Declaring it with const keeps computed values strictly read-only.

For shared state, the skill favors type-safe createContext over traditional context functions. It also directs models to debug reactive chains with $inspect.trace. Template directives like @attach are separated into a different skill.