Write Svelte 5 components and SvelteKit 2 routes using runes-based reactivity.
npx skills add https://github.com/devsepnine/hibi_ai --skill svelte-5-devsepnine
Please help me install this Agent Skill. Skill: svelte-5 Source: https://github.com/devsepnine/hibi_ai/tree/main/src/skills/svelte-5 Command: npx skills add https://github.com/devsepnine/hibi_ai --skill svelte-5-devsepnine
Write idiomatic Svelte 5 components and SvelteKit 2 routes using runes-based reactivity, enabling modern patterns and smoother migrations.
Create a Svelte 5 component using $props() and $state, then render it with {@render} to verify the runes-based pattern.
High-intent search queries and answers about installing and using this skill.
Migrate Svelte 4 components by replacing export let declarations with $props() and transitioning to runes mode using $state, $derived, and $effect. This updates components to the modern Svelte 5 reactivity model, avoiding legacy patterns like createEventDispatcher.
The best way to pass content to a Svelte 5 component is using the Snippet and @render pattern. This replaces Svelte 4 slot syntax, allowing you to pass snippet tags as props and explicitly render them where needed within the component structure.
Define reactive state in Svelte 5 using the $state rune for primary values and $derived for computed values. Use $effect to synchronize side effects, establishing a runes-based reactivity system that replaces Svelte 4's reactive stores and component-level let bindings.
TypeScript is required by default when writing SvelteKit 2 routes and Svelte 5 components with runes. This ensures type-safe $props and $bindable configurations across your file-system routing structures like +page.svelte and +layout.svelte files.
SvelteKit 2 file-system routing works by mapping directory structures to routes using +page.svelte, +page.ts, and +layout.svelte files. You configure data loading and UI rendering hierarchically, using hooks for global request modifications.
You should avoid createEventDispatcher in Svelte 5 because runes mode introduces modern callback props through $props and $bindable. Using legacy event dispatchers prevents you from leveraging the idiomatic reactivity and cleaner component communication patterns.
ehtbantonGenerate SvelteKit page files with load functions and form actions.
HouseGarofaloGuide SvelteKit 2 development with Svelte 5 runes and server-side rendering.
exceptionlessDevelop Svelte 5 UI components using runes and shadcn-svelte.
joshuadavidthomasAnalyze Svelte 5 reactive patterns including runes and derived values.
