svelte5

Adopt Svelte 5 runes for explicit component reactivity and state management.

9|5|Updated Aug 8, 2025

Search Tags:#runes #spa #state-management #reactivity #svelte5 #props #snippets

Ready to run

npx skills add https://github.com/AnExiledDev/CodeForge --skill svelte5

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: svelte5
Source: https://github.com/AnExiledDev/CodeForge/tree/main/.devcontainer/plugins/devs-marketplace/plugins/code-directive/skills/svelte5
Command: npx skills add https://github.com/AnExiledDev/CodeForge --skill svelte5

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte 5 introduces runes for explicit reactivity and structured component APIs, replacing implicit top-level reactivity and legacy slots to help developers write more predictable, maintainable UI code.

Core Features & Use Cases

Explicit reactivity primitives: $state, $derived, $effect, and $props for clear state and prop management.
Snippet-based composition and typed props: replacing slots with parameterized snippets and typed props for safer APIs.
SPA patterns and migration guidance: supports migration from Svelte 4 to Svelte 5, with context sharing, dynamic rendering, and modern event handling.

Quick Start

Create a minimal Svelte 5 component that uses $state to manage a counter and $derived for a derived value.

Frequently Asked Questions about svelte5

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

FAQPage Schema

How do I use Svelte 5 runes for state management and reactive UI?▼

Use Svelte 5 runes like $state, $derived, and $effect to create explicit, predictable component reactivity for safer state management across SPA apps.

What is the best way to migrate from Svelte 4 to Svelte 5 reactivity?▼

Migrate from Svelte 4 to Svelte 5 by replacing implicit top-level reactivity and legacy slots with explicit runes, typed props, and parameterized snippets.

How do $state and $derived runes work in Svelte 5 components?▼

The $state rune manages reactive variables, while $derived computes values from that state, ensuring explicit and predictable reactivity updates in Svelte 5 components.

Can I use typed props and snippets instead of slots in Svelte 5?▼

Yes, Svelte 5 replaces legacy slots with parameterized snippets and typed props, allowing you to build safer, more structured component APIs.

Does Svelte 5 support SPA patterns with context sharing and dynamic rendering?▼

Svelte 5 supports SPA patterns by utilizing runes for context sharing, dynamic rendering, and modern event handling to maintain predictable state across your application.