When should I use $effect according to this skill?

$effect is treated as an escape hatch for side effects like API calls. For computed values, the skill enforces using $derived.

Does it support type-safe state management?

Yes, it promotes using createContext for type-safe context and class-based reactive state for complex logic.

Does this skill support Svelte 4 syntax?

No, this skill strictly enforces Svelte 5 patterns. It avoids legacy syntax like 'export let' and reactive statements ($:) in favor of Runes.

How are component slots handled in Svelte 5?

This skill uses Snippets ({#snippet}) and the @render tag, which replace traditional slots for better type safety and flexibility.

Svelte 5 Framework Patterns

Name: Svelte 5 Framework Patterns
Author: agents-inc

byagents-inc

•

Design Tools

Implements high-performance web interfaces using Svelte 5 Runes for explicit reactivity and fine-grained state management.

The Svelte 5 Framework skill provides Claude with specialized knowledge to build modern web applications using the latest Runes-based architecture. It emphasizes explicit reactivity through $state and $derived primitives, replaces legacy slot patterns with flexible snippets, and promotes type-safe component communication. This skill is ideal for developers building high-performance frontend systems that require predictable state transitions, optimized DOM updates, and clean, maintainable code structures.

Key Features

01Modern Runes-based reactivity ($state, $derived, $effect)

02Deep and shallow reactive state optimizations using $state.raw

03Snippet-driven component composition and rendering

04Callback-driven event handling for cleaner prop flows

055 GitHub stars

06Type-safe context management with createContext

Use Cases

01Building complex UI components with fine-grained, deep state tracking

02Implementing type-safe cross-component state management using the Context API

03Migrating legacy Svelte 4 components to modern Svelte 5 Runes syntax

Key Features

01Modern Runes-based reactivity ($state, $derived, $effect)

02Deep and shallow reactive state optimizations using $state.raw

03Snippet-driven component composition and rendering

04Callback-driven event handling for cleaner prop flows

055 GitHub stars

06Type-safe context management with createContext

Use Cases

01Building complex UI components with fine-grained, deep state tracking

02Implementing type-safe cross-component state management using the Context API

03Migrating legacy Svelte 4 components to modern Svelte 5 Runes syntax