skills.rest
SeleznovIvan
SeleznovIvanCOMMUNITY
Explore all skills by this author →
GitHub

svelte5-runes

Provide Svelte 5 runes examples for $state, $derived, $effect, and $props.

1|Updated Feb 5, 2026
Search Tags:#components#migration#svelte#runes#state-management#reactivity#svelte5
One-click install
npx skills add https://github.com/SeleznovIvan/claude-skills-test --skill svelte5-runes-seleznovivan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte5-runes
Source: https://github.com/SeleznovIvan/claude-skills-test/tree/main/.claude/skills/svelte5-runes
Command: npx skills add https://github.com/SeleznovIvan/claude-skills-test --skill svelte5-runes-seleznovivan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Svelte 5 runes enable a more expressive and compact approach to reactive UI. This skill provides clear guidance and examples to accelerate adoption and reduce boilerplate.

Core Features & Use Cases

  • Reactive state management with $state
  • Derived values with $derived
  • Side effects with $effect
  • Props with $props
  • Migration guidance from Svelte 4 to Svelte 5 runes

Quick Start

Install and start refactoring a component to use the runes API for state, derived values, and effects.

Frequently Asked Questions about svelte5-runes

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

FAQPage Schema
How do I migrate Svelte 4 components to Svelte 5 runes?▼

Svelte 5 runes replace previous reactive statements with explicit functions like $state, $derived, $effect, and $props. This skill provides a toolkit with examples to help you adopt these runes for more expressive and compact reactive UI development.

How do I manage reactive state in Svelte 5 components?▼

You can use the $derived rune to compute values based on other reactive states in Svelte 5. This skill offers examples for using $derived to create derived values, ensuring your reactive UI updates efficiently.

What is the best way to handle side effects in Svelte 5?▼

The best way to handle side effects in Svelte 5 is using the $effect rune. This skill provides instructional examples for implementing $effect to manage complex reactive patterns and side effects within your UI components.

Can I use Svelte 5 runes for complex reactive patterns in user interfaces?▼

Yes, Svelte 5 runes are designed for managing complex reactive patterns in user interfaces. This skill provides a toolkit covering $state, $derived, $effect, and $props to handle advanced reactivity efficiently.

Do I need prior knowledge of Svelte 4 to start using Svelte 5 runes?▼

No prior knowledge of Svelte 4 is strictly required to start using Svelte 5 runes, but migration guidance is included. The skill provides quick start examples for new components and refactoring from older versions.

Related Skills

Explore More Software Engineering Skills→
dwalleckdwalleck
11

Svelte Development Skill

Implement reactive Svelte 5 components using runes-based state and template syntax.

Community
Basic
HouseGarofaloHouseGarofalo
3

svelte-kit

Guide SvelteKit 2 development with Svelte 5 runes and server-side rendering.

Official
Advanced
dragoscirjandragoscirjan

lang-svelte

Standardize Svelte 4 and 5 component reactivity and state patterns.

Community
Intermediate
lepahclepahc
1

svelte-5

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

Official
Advanced