explainx.ainewsletter3.02k
Frontend

svelte5-best-practices▌

ejirocodes/agent-skills · updated Apr 28, 2026

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

Svelte 5 runes, snippets, and SvelteKit patterns for modern component development.

  • ›Covers all Svelte 5 runes ($state, $derived, $effect, $props, $bindable, $inspect) with reactive state and computed value patterns
  • ›Explains snippets syntax ({#snippet}, {@render}) as the replacement for slots and slot props
  • ›Includes event handling migration from on: directives to onclick handlers and callback props, plus SvelteKit load functions and form actions
  • ›Provides TypeScript typing for props,
skill.md

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

<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

Discussion

Product Hunt–style comments (not star reviews)
  • No comments yet — start the thread.
general reviews

Ratings

4.6★★★★★42 reviews
  • ★★★★★Nia Ghosh· Dec 24, 2024

    svelte5-best-practices is among the better-maintained entries we tried; worth keeping pinned for repeat workflows.

  • ★★★★★Aisha Diallo· Dec 24, 2024

    We added svelte5-best-practices from the explainx registry; install was straightforward and the SKILL.md answered most questions upfront.

  • ★★★★★Mei Rao· Dec 20, 2024

    svelte5-best-practices reduced setup friction for our internal harness; good balance of opinion and flexibility.

  • ★★★★★Tariq Harris· Dec 16, 2024

    Keeps context tight: svelte5-best-practices is the kind of skill you can hand to a new teammate without a long onboarding doc.

  • ★★★★★Chinedu Sethi· Nov 27, 2024

    svelte5-best-practices has been reliable in day-to-day use. Documentation quality is above average for community skills.

  • ★★★★★Evelyn Li· Nov 15, 2024

    Solid pick for teams standardizing on skills: svelte5-best-practices is focused, and the summary matches what you get after install.

  • ★★★★★Mei Perez· Nov 11, 2024

    I recommend svelte5-best-practices for anyone iterating fast on agent tooling; clear intent and a small, reviewable surface area.

  • ★★★★★Chinedu Taylor· Oct 18, 2024

    Solid pick for teams standardizing on skills: svelte5-best-practices is focused, and the summary matches what you get after install.

  • ★★★★★Shikha Mishra· Oct 10, 2024

    Useful defaults in svelte5-best-practices — fewer surprises than typical one-off scripts, and it plays nicely with `npx skills` flows.

  • ★★★★★Luis Brown· Oct 6, 2024

    svelte5-best-practices has been reliable in day-to-day use. Documentation quality is above average for community skills.

showing 1-10 of 42

1 / 5