svelte-runes

Original：🇺🇸 English

Translated

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

2installs

Sourcespences10/svelte-skills-kit

Added on2026-02-04

NPX Install

npx skill4agent add spences10/svelte-skills-kit svelte-runes

SKILL.md Content

View Translation Comparison →

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>

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