svelte5-best-practices

ejirocodes/agent-skills

Svelte 5 runes, snippets, and SvelteKit patterns for modern component development.

What is svelte5-best-practices?

Reference guide for Svelte 5 best practices including runes ($state, $derived, $effect, $props), snippets, event handling, TypeScript typing, and SvelteKit patterns. Use when writing, reviewing, or refactoring Svelte 5 components and applications, or migrating from Svelte 4.

Provides patterns for reactive state with $state and $derived
Guides snippet usage to replace slots with {@render}
Documents event handling with onclick and callback props instead of on: directives
Covers TypeScript props typing and generic components
Explains SvelteKit load functions, form actions, and SSR state isolation
Includes migration paths from Svelte 4 stores to runes and slots to snippets

How to install svelte5-best-practices

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

Claude Code

Cursor

Windsurf

Cline

How to use svelte5-best-practices

1.Reference the Quick Reference table to locate guidance on your topic (runes, snippets, events, TypeScript, migration, SvelteKit, or performance)
2.Review the Essential Patterns section for code examples of reactive state, props, snippets, and event handlers
3.Check the Common Mistakes section to avoid 8 frequent pitfalls in Svelte 5 development
4.Apply the recommended patterns to your component or migration task
5.Consult detailed reference files (runes.md, snippets.md, etc.) for comprehensive topic coverage

Use cases

Good for

Converting Svelte 4 components to Svelte 5 runes and snippets syntax
Building type-safe generic components with proper $props destructuring
Implementing two-way binding with $bindable() in form components
Optimizing performance by choosing $derived over $effect for computed values
Structuring SvelteKit data loading with parallel Promise.all instead of sequential awaits

Who it's for

Svelte 5 developers building new components
Teams migrating Svelte 4 codebases to Svelte 5
SvelteKit application developers
Frontend engineers working with TypeScript and component libraries
Developers optimizing reactive performance

svelte5-best-practices FAQ

When should I use $derived vs $effect?

Use $derived for computed values that depend on reactive state. Use $effect only for side effects like logging, timers, or external updates. Using $effect for derived values is a common mistake.

How do I replace slots with snippets in Svelte 5?

Instead of <slot>, use snippet props: let { children, header } = $props(); then render with {@render header?.()} and {@render children()}. Snippets provide better type safety and composition.

What's the correct event handling syntax in Svelte 5?

Use onclick, onchange, onsubmit, etc. instead of on:click, on:change, on:submit. For custom events, use callback props like let { onclick } = $props() instead of createEventDispatcher.

How do I make two-way binding work with $props?

Use $bindable() in the child component: let { value = $bindable() } = $props(). This enables bind: directives from parent components.

What causes cross-request state leaks in SvelteKit SSR?

Setting module-level state outside of load functions or component instances. Always initialize state inside components with $state() or in load functions to ensure isolation per request.

Full instructions (SKILL.md)

Source of truth, from ejirocodes/agent-skills.

name: svelte5-best-practices description: "Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing." license: MIT metadata: author: ejirocodes version: '1.0.0'

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

<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