| name | bp-svelte |
| description | Svelte 5 & SvelteKit ベストプラクティス。Svelte 5 Runes ベースのコンポーネント設計規約。 |
Svelte 5 & SvelteKit Best Practices
このスキルが発動したら、docs/best_practices/svelte.md を Read ツールで読み込み、
記載されたベストプラクティス(DECREE)に従ってコードを書くこと。
重要原則
- Svelte 5 Runes:
$state / $derived / $effect を使用。レガシー $: リアクティブ宣言は禁止
- $props() でコンポーネント Props:
export let ではなく $props() でデストラクチャリング
- $state.raw で大規模データ: 置換のみのデータは
.raw で proxy オーバーヘッド回避。.snapshot() でシリアライズ
- $effect は副作用専用: DOM 操作・外部ライブラリ連携・ネットワークのみ。状態導出は
$derived を使う
- SvelteKit load 関数:
+page.ts / +page.server.ts の load でデータ取得。コンポーネント内で直接 fetch しない
- cleanup 関数を返す:
$effect 内の observer/listener/connection は return で cleanup
- snippet でコンポーネント合成:
{#snippet} + {@render} を使用。slot は非推奨
参照
完全なベストプラクティスは docs/best_practices/svelte.md を参照。
セクション: Svelte 5 Runes, Component Design, SvelteKit Routing, Data Loading, Form Actions, Styling, Testing