Login
ejirocodes/agent-skillsMIT8 files

Svelte5 Best Practices

Svelte 5 runes, snippets, SvelteKit patterns, and modern best practices for TypeScript and component development. Use when writing, reviewing, or refactoring Svelte 5 components and SvelteKit applications. Triggers on: Svelte components, runes ($state, $derived, $effect, $props, $bindable, $inspect), snippets ({#snippet}, {@render}), event handling, SvelteKit data loading, form actions, Svelte 4 to Svelte 5 migration, store to rune migration, slots to snippets migration, TypeScript props typing, generic components, SSR state isolation, performance optimization, or component testing.

Use this skillView repositoryView on skills.sh
Specification
Skill ID
ejirocodes/agent-skills/svelte5-best-practices
Publisher
ejirocodes
Repository
agent-skills
Installs
144
Files
8
License
MIT
Synced
Sep 16, 2026
How to use it

Open any RiverX project, open the Skills panel in the chat, and search for this identifier. The files are fetched from the source repository at install time.

ejirocodes/agent-skills/svelte5-best-practicesInstalls these files
  • SKILL.md
  • references/events.md
  • references/migration.md
  • references/performance.md
  • references/runes.md
  • references/snippets.md
  • references/sveltekit.md
  • references/typescript.md

What this skill tells the agent

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