svelte5

Installation
SKILL.md

Svelte 5 Syntax

Always use Svelte 5 runes. Never use Svelte 4 patterns.

Svelte 4 → Svelte 5

Svelte 4 ❌ Svelte 5 ✅
export let foo let { foo } = $props()
export let foo = 'default' let { foo = 'default' } = $props()
$: doubled = x * 2 let doubled = $derived(x * 2)
$: { sideEffect() } $effect(() => { sideEffect() })
on:click={handler} onclick={handler}
on:input={handler} oninput={handler}
on:click|preventDefault={h} onclick={e => { e.preventDefault(); h(e) }}
<slot /> {@render children()}
<slot name="x" /> {@render x?.()}
$$props Use $props() with rest: let { ...rest } = $props()
$$restProps let { known, ...rest } = $props()
Related skills
Installs
39
GitHub Stars
7
First Seen
Jan 21, 2026