svelte5-best-practices

Migrate Svelte components to runes by replacing let statements with $state, computed values with $derived, and lifecycle hooks with $effect. This Skill provides actionable refactoring patterns for predictable reactivity and production-ready code.

Type Svelte 5 component props using the $props rune with TypeScript interfaces for strict typing. This Skill outlines patterns for defining props, utilizing $bindable, and ensuring type safety across your SvelteKit application.

Slots migrate to Snippets in Svelte 5 by defining snippet blocks and rendering them with the {@render} tag. This Skill details slot-to-snippet migration patterns to improve component readability and maintainability.

Handle SSR isolation and load functions in SvelteKit by properly typing page data and isolating server-side logic. This Skill provides SvelteKit patterns for load functions, form actions, and SSR considerations to streamline development.

Use $derived for computed state that synchronously updates, and $effect for side effects reacting to state changes. This Skill offers guidance on runes usage to ensure scalable reactivity and performance best practices.