Refactor Svelte components to Svelte 5 Runes and SvelteKit load conventions.
npx skills add https://github.com/Kaikei-e/Alt --skill bp-svelte
Please help me install this Agent Skill. Skill: bp-svelte Source: https://github.com/Kaikei-e/Alt/tree/main/.claude/skills/bp-svelte Command: npx skills add https://github.com/Kaikei-e/Alt --skill bp-svelte
This Skill provides a concise, actionable set of Svelte 5 and SvelteKit component design rules to prevent inconsistent patterns, reactive misuse, and data-loading anti-patterns when editing or creating .svelte files.
Refactor the provided Svelte component to follow Svelte 5 Runes and SvelteKit load conventions as described in docs/best_practices/svelte.md, replacing legacy reactive statements with $state/$derived/$effect, using $props(), and moving data fetching into load functions.
High-intent search queries and answers about installing and using this skill.
To migrate Svelte legacy reactive declarations, replace `$:` syntax with Svelte 5 Runes like `$state` for reactive variables and `$derived` for computed values, ensuring consistent Svelte component reactivity and predictability.
The best way to handle data fetching in SvelteKit is moving it into `+page.ts` or `+page.server.ts` load functions rather than component `$effect`. This enforces proper data-loading patterns and improves application performance.
Use `$state.raw` in Svelte 5 instead of `$state` for large, replace-only datasets. This prevents unnecessary deep reactivity tracking, optimizing performance when handling substantial arrays or objects via `.snapshot()`.
Pass props in Svelte 5 components using the `$props()` rune. This replaces the legacy `export let` syntax, providing a consistent and predictable API for component composition and prop handling.
Svelte 5 prefers snippet composition using `{#snippet}` and `{@render}` instead of legacy slots for reusable fragments. This approach ensures better component composition and maintainability.
Svelte 5 `$effect` should be restricted to DOM, external, or network side effects and must return cleanup functions. Overusing it for state derivation causes reactive misuse and unpredictable component behavior.
spences10Explain Svelte 5 runes and migrate Svelte 4 components.
manutejImplement Svelte 5 UIs with reactivity runes, components, stores, and transitions.
bobmatnycDevelop full-stack web applications with SvelteKit, TypeScript, and file-based routing.
Jonathan0823Provide TypeScript best-practice patterns for Vue 3 and Svelte 5 applications.
