svelte5-best-practices

使い方

インストールコマンドをコピーし、自分の環境へ導入する前にソースを確認します。
必要なツール、認証情報、対応環境を原文で確認します。
入力と成果物を指定し、出力を資料と照合します。

npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices

開始前の確認

導入にはモデル契約、API枠、ファイルへのアクセス許可は含まれません。
スター数や導入数は活動の指標であり、独立した品質・安全性試験ではありません。

リポジトリの原文

見出し、例、コード、表、リンク、参照画像を含む原文を表示しています。

Svelte 5 Best Practices

Quick Reference

Topic	When to Use	Reference
Runes	$state, $derived, $effect, $props, $bindable, $inspect	runes.md
Snippets	Replacing slots, {#snippet}, {@render}	snippets.md
Events	onclick handlers, callback props, context API	events.md
TypeScript	Props typing, generic components	typescript.md
Migration	Svelte 4 to 5, stores to runes	migration.md
SvelteKit	Load functions, form actions, SSR, page typing	sveltekit.md
Performance	Universal reactivity, avoiding over-reactivity, streaming	performance.md

Essential Patterns

Reactive State

svelte

<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>

Component Props

svelte

<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>

Snippets (replacing slots)

svelte

<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}

Event Handlers

svelte

<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>

Callback Props (replacing createEventDispatcher)

svelte

<script>
  let { onclick } = $props();
</script>

<button onclick={() => onclick?.({ data })}>Click</button>

Common Mistakes

Using `let` without `$state` - Variables are not reactive without $state()
Using `$effect` for derived values - Use $derived instead
Using `on:click` syntax - Use onclick in Svelte 5
Using `createEventDispatcher` - Use callback props instead
Using `<slot>` - Use snippets with {@render}
Forgetting `$bindable()` - Required for bind: to work
Setting module-level state in SSR - Causes cross-request leaks
Sequential awaits in load functions - Use Promise.all for parallel requests

タスクに関連する項目

同じリポジトリから

nestjs-best-practices

NestJS 11+ best practices for enterprise Node.js applications with TypeScript. Use when writing, reviewing, or refactoring NestJS controllers, services, modules, or APIs. Triggers on: NestJS modules, controllers, providers, dependency injection, @Injectable, @Controller, @Module, middleware, guards, interceptors, pipes, exception filters, ValidationPipe, class-validator, class-transformer, DTOs, JWT authentication, Passport strategies, @nestjs/passport, TypeORM entities, Prisma client, Drizzle O

1時間の導入数: 2
GitHub Stars: 6
更新日: 6月25日

MIT9 ファイル

詳細を見る →

使い方

開始前の確認

Svelte 5 Best Practices

Quick Reference

Essential Patterns

Reactive State

Component Props

Snippets (replacing slots)

Event Handlers

Callback Props (replacing createEventDispatcher)

Common Mistakes

タスクに関連する項目

svelte-runes

sveltekit-svelte5-tailwind-skill

frontend-patterns

typescript-react-patterns

関連する Skills

nestjs-best-practices