mcpField
S
svelte5-best-practices

svelte5-best-practices

github.com/ejirocodesDevelopment617.2k installsUpdated 18w ago
Repository

About svelte5-best-practices

A reference skill for applying Svelte 5 patterns across reactivity, components, events, TypeScript, SvelteKit, migration, and performance. It helps developers use current conventions and avoid common mistakes.

Key features

  1. 01Runes and reactive state patterns
  2. 02Snippets and component props
  3. 03Event and callback conventions
  4. 04TypeScript and generic components
  5. 05SvelteKit and performance guidance
  6. 06Svelte 4 migration notes

Use cases

  1. 01Building Svelte 5 components
  2. 02Migrating Svelte 4 code
  3. 03Implementing SvelteKit loading and form actions

Install

Copy the command and run it in a terminal.

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

After installing, type/svelte5-best-practicesin Claude Code to confirm it loaded.

Bundled files

References and scripts installed along with SKILL.md.

references/
events.md
migration.md
performance.md
runes.md
snippets.md
sveltekit.md
typescript.md

Details

From the project README

Svelte 5 Best Practices

Quick Reference

TopicWhen to UseReference
Runes$state, $derived, $effect, $props, $bindable, $inspectrunes.md
SnippetsReplacing slots, {#snippet}, {@render}snippets.md
Eventsonclick handlers, callback props, context APIevents.md
TypeScriptProps typing, generic componentstypescript.md
MigrationSvelte 4 to 5, stores to runesmigration.md
SvelteKitLoad functions, form actions, SSR, page typingsveltekit.md
PerformanceUniversal reactivity, avoiding over-reactivity, streamingperformance.md

Essential Patterns

Reactive State
<script>
  let count = $state(0);           // Reactive state
  let doubled = $derived(count * 2); // Computed value
</script>
Component Props
<script>
  let { name, count = 0 } = $props();
  let { value = $bindable() } = $props(); // Two-way binding
</script>
Snippets (replacing slots)
<script>
  let { children, header } = $props();
</script>

{@render header?.()}
{@render children()}
Event Handlers
<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>
Callback Props (replacing createEventDispatcher)
<script>
  let { onclick } = $props();
</script>

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

Common Mistakes

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

Comments

Markdown supported