svelte-5-runes

Implement Svelte 5 runes reactivity patterns in code projects.

2|2|Updated Nov 6, 2025

Search Tags:#migration #svelte #runes #reactivity

Ready to run

npx skills add https://github.com/szweibel/claude-skills --skill svelte-5-runes

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte-5-runes
Source: https://github.com/szweibel/claude-skills/tree/main/svelte-5-runes
Command: npx skills add https://github.com/szweibel/claude-skills --skill svelte-5-runes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Delivers a complete guide to Svelte 5 runes, covering core runes ($state, $derived, $effect, $props, $bindable, $inspect, $host, $props.id()) and migration from Svelte 4.

Core Features & Use Cases

Rune mastery: comprehensive patterns for reactive state, derived values, side effects, and props.
Migration guidance: clear steps for moving from Svelte 4 to Svelte 5 runes.
Examples & best practices: ready-to-use patterns, anti-patterns, and debugging tips.
Use Case: convert an existing Svelte 4 app to Svelte 5 runes, preserving reactivity and behavior.

Quick Start

Start a new Svelte 5 project and scaffold components using the runes-based patterns described in the guide.

Frequently Asked Questions about svelte-5-runes

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I migrate a Svelte 4 project to Svelte 5 runes?▼

Svelte 5 runes replace Svelte 4's reactivity model with explicit functions like $state, $derived, and $effect. Migration involves converting reactive declarations and stores to rune-based patterns while preserving component behavior and type safety.

What are Svelte 5 runes and how do they work?▼

Svelte 5 runes are functions that declare reactive state ($state), derived values ($derived), side effects ($effect), component props ($props), and two-way binding ($bindable). They form the foundation of Svelte 5's explicit reactivity system, replacing implicit reactivity.

Can I use Svelte 5 runes for forms and data fetching?▼

Yes. Svelte 5 runes handle forms and data fetching through $state for reactive form values, $effect for side effects like API calls, and $derived for computed data. The guide includes production-ready templates and patterns for both use cases.

What runes do I need for component props and two-way binding in Svelte 5?▼

Use $props to declare component inputs with type safety and $bindable to enable two-way binding. The guide covers anti-patterns and best practices for prop management across components.

How do I debug reactivity issues in Svelte 5?▼

Svelte 5 provides the $inspect rune for debugging reactive values and tracking state changes. The guide includes debugging tips and techniques to trace reactivity problems in your components.

Does Svelte 5 support custom elements and stable component IDs?▼

Yes. The $host rune enables custom element hosting, and $props.id() provides stable component identifiers. Both patterns are documented with production-ready examples in the migration guide.