Asi svelte-runes

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

install

source · Clone the upstream repo

git clone https://github.com/plurigrid/asi

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/plurigrid/asi "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/svelte-runes" ~/.claude/skills/plurigrid-asi-svelte-runes && rm -rf "$T"

manifest: skills/svelte-runes/SKILL.md

source content

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

<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