Svelte runes guidance. Use for reactive state, props, effects, attachments, or migration. Covers $state, $derived, $effect, @attach. Prevents reactivity mistakes.
This skill inherits all available tools. When active, it can use any tool Claude has access to.
README.mdexamples/bindable-props.svelteexamples/effect-vs-derived.sveltereferences/attachments.mdreferences/common-mistakes.mdreferences/component-api.mdreferences/migration-gotchas.mdreferences/reactivity-patterns.mdreferences/snippets-vs-slots.mdWhich 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.
<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>
onclick not on:click, {@render children()} in layouts$derived can be reassigned (5.25+) - use const for read-only