Svelte Development Skill

Svelte 5 uses runes like $state, $derived, and $effect to manage reactive state. $state declares mutable state, $derived creates computed values that update automatically, and $effect runs side effects when dependencies change. Load resources/runes-state.md for detailed patterns and examples.

Migration from Svelte 4 to 5 involves adopting runes-based reactivity, updating component syntax, and restructuring stores. This Skill covers step-by-step guidance for editing .svelte files, handling template changes, and integrating with SvelteKit. Start with SKILL.md overview, then reference migration resources.

Svelte 5 supports TypeScript through .svelte.ts and .svelte.js files with full type safety. Define typed props, state, and derived values using runes with TypeScript annotations. The Skill provides patterns for integrating TypeScript across component development and SvelteKit projects.

Yes, Svelte 5 runes work seamlessly with SvelteKit. The runes-based reactivity model applies to all .svelte files in your SvelteKit project, including pages, layouts, and components. This Skill covers SvelteKit integration patterns and debugging runes-based state across your app.

Common debugging challenges include reactivity not triggering, derived values not updating, and effect side effects running unexpectedly. This Skill provides guidance on template syntax, directives, and rune patterns to diagnose and resolve state management issues in Svelte 5 components.

While Svelte 4 experience helps, Svelte 5 runes introduce a new reactivity model. This Skill progressively discloses concepts starting with SKILL.md fundamentals, then deeper resource files. It's designed for both new developers and Svelte 4 developers transitioning to the runes-based approach.