svelte5-best-practices

SKILL.md

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

Svelte 5 Best Practices

Quick Reference

Topic
When to Use
Reference

Runes
$state, $derived, $effect, $props, $bindable, $inspect
runes.md

Snippets
Replacing slots, {#snippet}, {@render}
snippets.md

Events
onclick handlers, callback props, context API
events.md

TypeScript
Props typing, generic components
typescript.md

Migration
Svelte 4 to 5, stores to runes
migration.md

SvelteKit
Load functions, form actions, SSR, page typing
sveltekit.md

Performance
Universal reactivity, avoiding over-reactivity, streaming
performance.md

Essential Patterns

Reactive State