What runes does this skill cover?

It covers all core Svelte 5 runes including $state for mutable state, $derived for computed values, $effect for side effects, and $props for component communication.

How does it handle the transition from slots to snippets?

The skill provides patterns for using the {@render ...} tag and snippet syntax, replacing the older slot-based composition model.

Does this skill support Svelte 4 to 5 migration?

Yes, it provides specific guidance and translation patterns for converting legacy Svelte 4 syntax into the modern Svelte 5 Runes system.

Is the skill updated for the latest Svelte 5.25+ changes?

Yes, the skill includes the latest patterns, such as the ability to reassign $derived values and using const for read-only derivations.

Svelte 5 Runes

Name: Svelte 5 Runes
Author: linehaul-ai

bylinehaul-ai

•

Developer Tools

Provides expert guidance on Svelte 5 Runes for building reactive state, managing component props, and migrating legacy Svelte applications.

About

Svelte 5 Runes is a specialized Claude Code skill designed to streamline development using Svelte's functional reactivity system. It assists developers in implementing $state, $derived, and $effect patterns while ensuring best practices for component APIs with $props and $bindable. By preventing the mixing of Svelte 4 and 5 syntaxes and offering clear migration patterns, it helps teams modernize their frontend codebases efficiently while avoiding common reactivity pitfalls and anti-patterns.

Key Features

Component API patterns using $props and $bindable
1 GitHub stars
Migration strategies and translation from Svelte 4 to Svelte 5
Validation of modern event handler syntax (onclick vs on:click)
Implementation of Svelte 5 core runes ($state, $derived, $effect)
Guidance on the new snippet and render tag syntax

Use Cases

Creating reusable component libraries using modern Svelte patterns
Building highly reactive frontend dashboards with complex state management
Upgrading existing Svelte 4 projects to the Svelte 5 Runes API

About

Key Features

Component API patterns using $props and $bindable
1 GitHub stars
Migration strategies and translation from Svelte 4 to Svelte 5
Validation of modern event handler syntax (onclick vs on:click)
Implementation of Svelte 5 core runes ($state, $derived, $effect)
Guidance on the new snippet and render tag syntax

Use Cases

Creating reusable component libraries using modern Svelte patterns
Building highly reactive frontend dashboards with complex state management
Upgrading existing Svelte 4 projects to the Svelte 5 Runes API