svelte5_skill

Overview

This skill is a concise Svelte 5 syntax reference for writing any Svelte component using the new rune-based API. It ensures you use $state, $derived, $effect, and $props instead of legacy Svelte 4 patterns. Use it to prevent outdated syntax and to convert mental models from stores and slots to runes and render snippets.

How this skill works

The skill inspects component code patterns and provides the correct Svelte 5 equivalents, focusing on props, reactive values, side effects, events, and snippet rendering. It replaces store imports and auto-subscription idioms with $state and direct assignments, converts reactive statements to $derived, and maps slots to {@render} snippets. It also shows proper $props usage for defaults and rest props.

When to use it

• When authoring or refactoring any Svelte component to Svelte 5
• When converting Svelte 4 store and $: reactive code to runes
• When defining props with defaults, two-way bindables, or rest props
• When replacing slots with render snippets and snippet APIs
• When updating event handlers from on:click syntax to native attributes

Best practices

• Always declare props via let { ... } = $props() so defaults and rest are explicit
• Use let state = $state(initial) for reactive state; assign directly instead of .set/.update
• Use let derived = $derived(expr) or $derived.by(fn) for multi-line computations
• Wrap side effects in $effect(() => { ... }) and return cleanup functions when needed
• Prefer passing callbacks as props instead of createEventDispatcher()

Example use cases

• Replace export let foo = 'x' with let { foo = 'x' } = $props() in component headers
• Convert writable stores to local state: const count = writable(0) → let count = $state(0)
• Replace $: reactive assignments with let doubled = $derived(x * 2)
• Swap slot usage for render snippets: <slot/> → {@render children?.()}
• Handle native events without colon: on:click → onclick with e.preventDefault inline