mcpField
S
svelte5-best-practices

svelte5-best-practices

github.com/midudevDevelopment7.0k68 installsUpdated 1w ago
Repository

About svelte5-best-practices

A practice guide for Svelte 5 developers, covering reactive state, component props, snippets, and event handling. It also points to SvelteKit, performance, and migration guidance.

Key features

  1. 01Reactive state patterns with runes
  2. 02Component props and two-way binding
  3. 03Snippets and rendering patterns
  4. 04Event handling and callback props
  5. 05SvelteKit, performance, and migration references

Use cases

  1. 01Implementing reactive state in Svelte 5
  2. 02Writing component props and event callbacks
  3. 03Migrating Svelte 4 code to 5
  4. 04Reviewing SvelteKit loading and performance patterns

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/midudev/autoskills --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