svelte5

Analyze Svelte 5 reactive patterns including runes and derived values.

40|6|Updated Dec 4, 2025

Search Tags:#migration #runes #state-management #reactivity #svelte5 #context-api

Ready to run

npx skills add https://github.com/joshuadavidthomas/agent-skills --skill svelte5-joshuadavidthomas

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte5
Source: https://github.com/joshuadavidthomas/agent-skills/tree/main/svelte5
Command: npx skills add https://github.com/joshuadavidthomas/agent-skills --skill svelte5-joshuadavidthomas

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Provides practical guidance on Svelte 5 reactivity, including runes, derived values, effects, and class-based state, to help teams design, migrate, and reason about modern Svelte apps.

Core Features & Use Cases

Learn and apply Svelte 5 runes ($state, $derived, $effect, $props, $bindable) and class-based state for robust client-side architecture.
Understand context APIs and the snippets-vs-slots paradigm to compose UI and share state across components.
Use migration patterns to upgrade from Svelte 4 stores to Svelte 5 patterns, build consistent component APIs, and avoid SSR pitfalls.

Quick Start

Parse the key concepts and generate a short migration plan for a sample component.

Frequently Asked Questions about svelte5

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

FAQPage Schema

How do I migrate from Svelte 4 stores to Svelte 5 runes?▼

Svelte 5 runes replace store subscriptions with $state, $derived, and $effect patterns for reactive state management. You can generate a structured migration plan to systematically update component APIs and avoid SSR pitfalls.

What is the best way to manage shared state across components in Svelte 5?▼

The best way to manage shared state in Svelte 5 is using the context API alongside class-based state and runes. This approach ensures robust client-side architecture and safe state sharing across components without SSR conflicts.

How does $derived work for computed values in Svelte 5?▼

The $derived rune computes reactive values in Svelte 5 by automatically tracking dependencies and updating when underlying $state values change. It replaces manual store subscription logic for derived data calculations.

Does Svelte 5 context API work with server-side rendering?▼

Svelte 5 context API functions safely in SSR contexts when paired correctly with class-based state and runes. Proper implementation avoids shared state pitfalls during server-side rendering and ensures robust client-side architecture.

When should I use snippets instead of slots in Svelte 5?▼

You should use snippets instead of slots in Svelte 5 when composing UI elements that require more flexible parameter passing and rendering control. Snippets replace the slots paradigm to enable better component composition and state sharing.