svelte-runes

Original：🇺🇸 English

Translated

Implement Svelte 5 runes correctly. Use for reactive state, props, effects, $state.raw, $derived.by, $props, and $bindable.

6installs

Sourcespences10/skills

Added on2026-05-30

NPX Install

npx skill4agent add spences10/skills 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). Objects/arrays are deeply reactive by default; use

$state.raw

for large data replaced wholesale.

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
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 event properties like
```
onclick
```
, and
```
{@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
Prefer
```
$derived.by
```
for multi-line derivations
Avoid state updates inside
```
$effect
```
; effects are an escape hatch
Effects do not run on the server; don't wrap effect bodies in
```
if (browser)
```
Last verified: 2026-05-14