Please help me install this Agent Skill. Skill: svelte5-runes Source: https://github.com/spences10/svelte-claude-skills/tree/main/.claude/skills/svelte5-runes Command: npx skills add https://github.com/spences10/svelte-claude-skills --skill svelte5-runes

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Migrating to Svelte 5's new reactivity system (runes) or understanding its core concepts can be challenging. This skill provides expert guidance on $state, $derived, $effect, $props, and $bindable, helping you leverage Svelte 5's power while avoiding common pitfalls and ensuring smooth migration.

Core Features & Use Cases

Reactive State ($state): Define mutable, deeply reactive variables for dynamic UI updates.
Computed Values ($derived): Create efficient, auto-updating values based on other state.
Side Effects ($effect): Manage interactions with the DOM, APIs, or external systems in a controlled manner.
Component Props ($props, $bindable): Master passing data and implementing two-way binding between components.
Svelte 4 to 5 Migration: Get clear translation guides and avoid common syntax mixing mistakes.
Use Case: Convert an existing Svelte 4 component to Svelte 5 runes, ensuring all reactive statements, props, and event handlers are correctly updated for the new syntax.

Quick Start

Show me how to use $state and $derived to create a simple counter with a computed double value. Explain the difference between $derived and $effect.