Svelte Runes

spences10/svelte-skills-kit/plugins/svelte-skills/skills/svelte-runes

by spences102a9d88379bf62cee464a16db852edda7790a58f5No licenseListed Oct 9, 2026Updated Oct 9, 2026

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

Instructions onlySoftware Development

AI-generated overview

Guides Svelte 5 runes usage for reactive state, props, effects and migration from Svelte 4.

What it does: Provides concise guidance on Svelte 5 runes, covering $state, $derived, $effect, $props and $bindable with a quick-start rule list and a short code example. Points to bundled reference files on reactivity patterns, migration gotchas, component API, snippets versus slots, and common mistakes. It is an instructions-only skill and produces no files or scripts.
When to use it: Use when writing or reviewing Svelte 5 components that rely on runes for reactive state, computed values, side effects or props. Also useful when migrating a Svelte 4 codebase to Svelte 5 syntax or debugging reactivity problems.
Requirements: No tools, packages or credentials required; the skill is instructions and reference documents only and ships no scripts.

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

svelte

<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>

<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 [blocked] - When to use each rune
migration-gotchas.md [blocked] - Svelte 4→5 translation
component-api.md [blocked] - $props, $bindable patterns
snippets-vs-slots.md [blocked] - New snippet syntax
common-mistakes.md [blocked] - 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
Use createContext over setContext/getContext for type safety
Use $inspect.trace to debug reactivity issues
Last verified: 2026-03-12

Source and attribution

Source:spences10/svelte-skills-kitinplugins/svelte-skills/skills/svelte-runesat commit2a9d883

License: No license

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Svelte Runes

Svelte Runes

Quick Start

Example

Reference Files

Notes

Source and attribution

More from spences10/svelte-skills-kit

Sveltekit Data Flow

Sveltekit Structure

Svelte Components

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices