svelte_skill

Overview

This skill guides Svelte 5 component development with practical patterns for runes ($state, $derived, $effect), props, events, snippets, and TypeScript. It focuses on modern Svelte 5 idioms and performance-aware choices for building maintainable components. Use it when you want clear, up-to-date advice for authoring reactive components in Svelte 5.

How this skill works

The skill inspects common component scenarios and recommends runes-first solutions: $state for local reactive state, $derived/$derived.by for computed values, and $effect for side effects that must run on dependency changes. It favors $props() destructuring for typed props, DOM event attributes and callback props for communication, and snippets + {@render ...} for composition over legacy slots.

When to use it

• Building new Svelte 5 components with TypeScript
• Migrating legacy Svelte 4 patterns to Svelte 5 runes
• Optimizing component reactivity or resolving performance regressions
• Defining typed props, two-way bindings, or snippet-based composition
• Integrating Svelte components with non-reactive libraries

Best practices

• Prefer $state for local state and use $state.raw when deep reactivity is unnecessary
• Use $derived or $derived.by for pure computed values; reserve $effect for side effects
• Destructure props via $props() with an explicit interface instead of export let
• Use DOM event attributes (onclick, oninput) and pass callback props instead of createEventDispatcher
• Avoid recreating objects/functions inside templates; memoize or move creation outside render path
• When passing state to non-reactive libraries, convert with $state.snapshot to a plain object

Example use cases

• A typed button component: define Props interface, destructure with $props(), and expose onclick callback prop
• A list component with large arrays: use $state.raw for the array and $derived for filtered views to reduce proxy overhead
• Two-way form input: use $bindable for bindings and validate in a $effect that reads dependencies synchronously
• Composition via snippets: accept children?: Snippet and render with {@render children} instead of slot plumbing
• Wrapper around a third-party library: pass $state.snapshot to the library and keep reactive updates scoped