Guide Svelte 5 runes and runed utilities in SvelteKit projects.
npx skills add https://github.com/praveenperera/dotfiles --skill svelte-praveenperera
Please help me install this Agent Skill. Skill: svelte Source: https://github.com/praveenperera/dotfiles/tree/main/claude/skills/svelte Command: npx skills add https://github.com/praveenperera/dotfiles --skill svelte-praveenperera
Svelte 5 and SvelteKit development can be challenging when learning runes and runed utilities; this skill consolidates patterns, best practices, and references to accelerate productive Svelte work.
Create a Svelte 5 + SvelteKit project and start applying runes (state, derived, effect, props, bindable) and runed utilities to build reactive components.
High-intent search queries and answers about installing and using this skill.
Svelte 5 runes like $state and $derived manage component state and computed values within SvelteKit projects. You apply these reactive primitives directly in your pages and layouts to handle data flow without traditional stores.
Runed utilities are helper functions for Svelte 5 like Debounced, PersistedState, and onClickOutside that simplify common frontend tasks. You need them when standard runes are insufficient for handling complex reactive patterns or side effects.
The $effect rune handles side effects in Svelte 5 components by tracking reactive dependencies and running cleanup logic when state changes. You use it within SvelteKit layouts to synchronize external systems with component state.
Svelte 5 runes can build reactive stores and manage URL state in SvelteKit projects. You use the $state rune for local stores and the resource utility to fetch remote data while synchronizing with URL parameters.
The best way to manage props in Svelte 5 is using the $props and $bindable runes. These runes allow you to accept component inputs and create two-way data binding between parent and child components in SvelteKit.
Common Svelte 5 runes gotchas include incorrect dependency tracking in $effect and scope issues with $state. The skill provides reference-guided patterns and debugging tips to navigate these reactive component limitations.
aguirrerjgReview Svelte 5 components for correct rune syntax and SvelteKit patterns.
shredbxGuide SvelteKit 5 development with runes, routes, and data loading.
analogjsImplements signal-based reactive state management for Angular 20+ components.
kensleDevExplains Svelte 5 runes including $state, $derived, $effect, $props, and $bindable for reactivity and migration from Svelte 4.
