svelte5-best-practices

Name: svelte5-best-practices
Author: ejirocodes

Svelte 5 runes, snippets, and SvelteKit patterns for modern component development. Covers all Svelte 5 runes ($state, $derived, $effect, $props, $bindable, $inspect) with reactive state and computed value patterns Explains snippets syntax ({#snippet}, {@render}) as the replacement for slots and slot props Includes event handling migration from on: directives to onclick handlers and callback props, plus SvelteKit load functions and form actions Provides TypeScript typing for props, generic components, and SSR state isolation patterns Documents Svelte 4 to 5 migration paths including stores-to-runes and slots-to-snippets conversions with common pitfalls to avoid

INSTALLATION

npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices

Run in your project or agent environment. Adjust flags if your CLI version differs.

SKILL.md

$2c

<script>

  let count = $state(0);           // Reactive state

  let doubled = $derived(count * 2); // Computed value

</script>

Component Props

<script>

  let { name, count = 0 } = $props();

  let { value = $bindable() } = $props(); // Two-way binding

</script>

Snippets (replacing slots)

<script>

  let { children, header } = $props();

</script>

{@render header?.()}

{@render children()}

Event Handlers

<!-- Svelte 5: use onclick, not on:click -->

<button onclick={() => count++}>Click</button>

Callback Props (replacing createEventDispatcher)

<script>

  let { onclick } = $props();

</script>

<button onclick={() => onclick?.({ data })}>Click</button>

Common Mistakes

**Using let without $state** - Variables are not reactive without $state()

**Using $effect for derived values** - Use $derived instead

**Using on:click syntax** - Use onclick in Svelte 5

**Using createEventDispatcher** - Use callback props instead

**Using <slot>** - Use snippets with {@render}

**Forgetting $bindable()** - Required for bind: to work

Setting module-level state in SSR - Causes cross-request leaks

Sequential awaits in load functions - Use Promise.all for parallel requests