svelte-runes

Svelte 5 runes manage reactive state using `$state` for variables, `$derived` for computed values, and `$effect` for side effects. This Skill provides clear explanations and syntax examples to implement these reactive patterns correctly.

In Svelte 5, `$state` declares reactive variables, while `$derived` calculates values based on other reactive state. This Skill explains when to use each rune and provides examples to avoid common reactivity pitfalls.

Migrating from Svelte 4 to Svelte 5 runes involves replacing reactive statements with `$state` and `$derived` declarations. This Skill outlines the syntax differences and best practices to adapt your component reactivity.

Use the `$effect` rune in Svelte 5 to handle side effects like manual DOM updates or fetching data. This Skill details reactivity patterns to ensure predictable UI development and prevent incorrect rune usage.

Handle component props in Svelte 5 using the `$props` rune for inputs and `$bindable` for two-way binding. This Skill provides exact syntax and best practices for managing component props and avoiding common mistakes.

Your Svelte 5 component might not update if you mix Svelte 4 syntax with new runes. This Skill addresses common mistakes like incorrect rune usage and provides patterns for efficient, predictable UI development.