skills.rest
Andreicr1
Andreicr1COMMUNITY
Explore all skills by this author →
GitHub

svelte-runes

Guide Svelte 5 runes usage for reactive state and migrations.

Updated Mar 14, 2026
Search Tags:#migration#patterns#svelte#runes#state-management#reactivity
One-click install
npx skills add https://github.com/Andreicr1/netz-analysis-engine --skill svelte-runes-andreicr1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: svelte-runes
Source: https://github.com/Andreicr1/netz-analysis-engine/tree/main/.gemini/skills/svelte-runes
Command: npx skills add https://github.com/Andreicr1/netz-analysis-engine --skill svelte-runes-andreicr1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Svelte runes guidance clarifies how to use $state, $derived, $effect, $props, and $bindable to build reactive components and to migrate code from Svelte 4 to 5 with fewer errors.

Core Features & Use Cases

  • Explicit runes taxonomy clarifies which rune to use for state, computed values, effects, props, and bindings.
  • Migration patterns provide a safe path for upgrading codebases and avoiding mixed syntax.
  • Guided component design with top-level runes and DOM interaction best practices (e.g., @attach, onclick) to ensure predictable reactivity.

Quick Start

Replace local state with $state, convert derived values to $derived, and use onclick for events and @attach for DOM interactions.

Frequently Asked Questions about svelte-runes

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

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

Migrate Svelte 4 state to Svelte 5 runes by replacing local state with $state, converting computed values to $derived, and using onclick for events to avoid mixed syntax errors during component upgrades.

What is the difference between $derived and $effect in Svelte 5?▼

In Svelte 5, $derived computes reactive values from state, while $effect handles side effects. You should avoid using $effect for derived state to maintain predictable reactivity and prevent unnecessary side effects.

When should I use $bindable for two-way binding in Svelte components?▼

Use the $bindable rune in Svelte components when you need to establish two-way binding for props, ensuring safe and predictable reactivity across parent and child component interactions.

Why must Svelte runes be declared at the top level of a component?▼

Svelte runes must be declared at the top level of a component to enforce explicit reactivity constraints, ensuring the compiler correctly tracks state, props, and derived values without scoping issues.

How to handle DOM interactions and events with Svelte 5 runes?▼

Handle DOM interactions with Svelte 5 runes by using the @attach directive for DOM interactions and the onclick attribute for events, replacing older Svelte 4 event dispatchers for predictable component design.

Related Skills

Explore More Software Engineering Skills→
kensleDevkensleDev

svelte-runes

Explains Svelte 5 runes including $state, $derived, $effect, $props, and $bindable for reactivity and migration from Svelte 4.

Community
Intermediate
SeleznovIvanSeleznovIvan
1

svelte5-runes

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

Community
Intermediate
AnExiledDevAnExiledDev
9

svelte5

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

Community
Advanced
Seeker1911Seeker1911
6

svelte5-runes

Guide Svelte 5 rune usage for reactive state, props, and side effects.

Community
Basic