svelte5-runes

What problem does it solve?

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.

Core Features & Use Cases

• Reactive State Management: Get clear guidance on $state(), $derived(), and $effect() for managing component state, computed values, and side effects.
• Component API Mastery: Learn best practices for $props() and $bindable() to define and use component properties, including seamless two-way binding.
• Svelte 4 to 5 Migration: Effortlessly translate Svelte 4 reactive statements and event handlers to the new Svelte 5 rune-based syntax, avoiding common migration gotchas.
• Use Case: When you're building a new Svelte 5 component and need to manage local state, computed values, and side effects, or when migrating an existing Svelte 4 component to the new runes system, this Skill ensures you apply the correct patterns.

Quick Start

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.