skills.rest
lepahc
lepahcOFFICIAL
Explore all skills by this author →
GitHub

svelte-5

Provide Svelte 5 patterns for runes, SSR, and state management.

1|2|Updated Jan 16, 2026
Search Tags:#migration#svelte#web-development#reactivity#ssr#svelte-5
One-click install
npx skills add https://github.com/lepahc/kynetic-spec --skill svelte-5-lepahc
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-5
Source: https://github.com/lepahc/kynetic-spec/tree/main/.agents/skills/svelte-5
Command: npx skills add https://github.com/lepahc/kynetic-spec --skill svelte-5-lepahc

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte 5 patterns, runes, and migration guidance to address reactivity, SSR, and state management challenges developers face when adopting Svelte 5.

Core Features & Use Cases

  • Rune-based reactivity: use $state, $derived, and $effect to model state changes declaratively.
  • Migration guidance: patterns for upgrading from Svelte 4 to Svelte 5 and adopting new runtime APIs.
  • SSR considerations: guidelines for server-side rendering, client-only rendering, and shared state across components.

Quick Start

Review the migration guides and implement a small sample page using $state, $derived, and $effect to see the new patterns in action.

Frequently Asked Questions about svelte-5

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

FAQPage Schema
How do I migrate from Svelte 4 to Svelte 5 and adopt the new runes?▼

Migrate from Svelte 4 to Svelte 5 by adopting new runtime APIs and replacing older reactivity syntax with runes. This upgrade provides guidance for transitioning components to the new declarative state model effectively.

How does reactivity work with $state, $derived, and $effect in Svelte 5?▼

Reactivity in Svelte 5 works by using $state, $derived, and $effect to model state changes declaratively. These runes replace previous lifecycle and reactivity patterns for building reactive UI components.

What is the best way to handle server-side rendering and client-only rendering in Svelte 5?▼

Handle server-side rendering and client-only rendering in Svelte 5 by following specific SSR guidelines. This approach ensures correct SSR behavior and proper shared state management across your components.

Does Svelte 5 support shared state management across multiple components using runes?▼

Svelte 5 supports shared state management across multiple components using runes. It provides patterns for managing state declaratively, ensuring proper synchronization between server-side and client-side rendering contexts.

Why does my Svelte 5 component break when upgrading reactivity to runes?▼

Svelte 5 components break during upgrade when reactivity is not fully migrated to runes. Applying recommended migration patterns and using $state, $derived, and $effect correctly resolves these state-management challenges.

Related Skills

Explore More Software Engineering Skills→
aguirrerjgaguirrerjg
1

svelte5-best-practices

Review Svelte 5 components for correct rune syntax and SvelteKit patterns.

Community
Intermediate
bobmatnycbobmatnyc
3

svelte

Build reactive UIs with Svelte 5 using Runes API.

Community
Intermediate
dragoscirjandragoscirjan

lang-svelte

Standardize Svelte 4 and 5 component reactivity and state patterns.

Community
Intermediate
AnExiledDevAnExiledDev
9

svelte5

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

Community
Advanced