bp-svelte

What problem does it solve?

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.

Core Features & Use Cases

• Svelte 5 Runes enforcement: Prefer $state, $derived, and $effect and prohibit legacy $: reactive declarations.
• Props and large-data patterns: Use $props() for component props and $state.raw for large replace-only datasets, serializing with .snapshot().
• Side effects and data loading: Restrict $effect to DOM/external/network side effects, return cleanup functions, and perform data fetching in +page.ts/+page.server.ts load functions.
• Composition guidance: Use snippet composition ({#snippet} + {@render}) instead of slots for reusable fragments.
• Use Case: Refactor or author alt-frontend-sv Svelte components to improve predictability, performance, and maintainability across the codebase.

Quick Start

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.