How does this skill handle Svelte 5 reactivity?

It utilizes the runes mental model, focusing on $state for mutable state, $derived for computed values, and $effect for side effects with proper cleanup.

Can I use this for SvelteKit development?

Yes, it includes specific patterns for SvelteKit, particularly focusing on SPA mode configurations and file-based routing.

Is TypeScript supported in component props?

Absolutely. The skill encourages defining component APIs using TypeScript interfaces within the $props() rune for better type safety.

Does this skill support Svelte 4 legacy code?

No, this skill is specifically designed for Svelte 5. It prioritizes modern runes and will suggest migrating legacy code rather than maintaining Svelte 4 patterns.

Does it support complex UI interactions like Drag and Drop?

Yes, it is pre-configured with guidance for svelte-dnd-action and other modern Svelte ecosystem libraries.

Svelte 5 Development & Runes

Name: Svelte 5 Development & Runes
Author: AnExiledDev

byAnExiledDev

•

Design Tools

Accelerates Svelte 5 development using reactive runes, modern component patterns, and SvelteKit SPA configurations.

This skill empowers Claude to act as a Svelte 5 expert, providing precise guidance on modern reactivity primitives like $state, $derived, and $effect. It streamlines the transition from Svelte 4, enforces best practices for component architecture using snippets and typed props, and facilitates complex implementations involving SvelteKit SPA setups and AI integration. By adhering to a strict 'runes-only' mental model, it ensures code consistency and prevents common pitfalls associated with mixing legacy and modern Svelte syntax within the same project.

Key Features

01Optimized integration for @ai-sdk/svelte and svelte-dnd-action

02Specialized SvelteKit Single Page Application (SPA) configuration

03Migration pathways from Svelte 4 legacy code to Svelte 5 runes

04Full implementation of Svelte 5 reactive runes ($state, $derived, $effect)

056 GitHub stars

06Modern component patterns using Snippets and typed $props

Use Cases

01Migrating existing Svelte 4 codebases to the modern Svelte 5 reactivity system

02Building high-performance reactive UI components with fine-grained state tracking

03Architecting SvelteKit SPAs with client-side routing and static shell generation

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add anexileddev/codeforge svelte5

For use in Claude.ai and ChatGPT

Download Skill