Guide Svelte 5 rune usage for reactive state, props, and side effects.
npx skills add https://github.com/Seeker1911/dotfiles --skill svelte5-runes-seeker1911
Please help me install this Agent Skill. Skill: svelte5-runes Source: https://github.com/Seeker1911/dotfiles/tree/main/agents/skills/svelte5-runes Command: npx skills add https://github.com/Seeker1911/dotfiles --skill svelte5-runes-seeker1911
Svelte 5 introduces a new reactivity system (runes) that can be confusing, leading to common mistakes when migrating from Svelte 4 or when managing reactive state, props, and side effects. This Skill provides expert guidance to prevent these pitfalls, ensuring your Svelte 5 applications are robust and performant.
$state(), $derived(), and $effect() for managing component state, computed values, and side effects.$props() and $bindable() to define and use component properties, including seamless two-way binding.Help me refactor my Svelte 4 component to use Svelte 5 runes for state management and props. I have a count variable and a doubled computed value, and an on:click event handler.
High-intent search queries and answers about installing and using this skill.
Svelte 5 runes manage reactive state through `$state()` for mutable values, `$derived()` for computed values, and `$effect()` for side effects. Declare runes at the top level of your component script to ensure reactivity works correctly and integrates seamlessly with Svelte 5's compilation model.
Replace Svelte 4 reactive declarations and event handlers with Svelte 5 runes: convert `let` to `$state()`, reactive statements to `$derived()`, and `on:` handlers to direct function calls. Avoid mixing Svelte 4 and 5 syntax in the same component to prevent unexpected behavior.
Use `$props()` to declare component properties and `$bindable()` for two-way binding. These runes replace Svelte 4's export syntax and provide explicit, type-safe prop definitions with built-in reactivity.
Yes, two-way binding is enabled through the `$bindable()` rune on component props. This allows parent components to bind directly to child state, replacing Svelte 4's bind: directive pattern with a clearer, rune-based approach.
Common pitfalls include declaring runes inside conditionals or functions instead of at top level, mixing Svelte 4 and 5 reactivity syntax, and misusing `$derived()` for side effects instead of `$effect()`. Top-level declarations ensure deterministic behavior and predictable reactivity.
No, Svelte 4 `on:` directives are not compatible with Svelte 5 runes. Migrate event handlers to direct function calls on DOM elements or use component callbacks passed through `$props()` for parent-child communication.
kensleDevExplains Svelte 5 runes including $state, $derived, $effect, $props, and $bindable for reactivity and migration from Svelte 4.
mae616Analyze Svelte/SvelteKit projects for compile-time reactivity and state management optimizations.
TophC7Scaffolds Svelte 5 components with runes and standardized structure for Sworm.
pauljbernardProvide expert frontend development guidance across React, Vue.js, Angular, and modern JavaScript frameworks.