How do I install the Ejirocodes Agent Skills Svelte5 Best Practices skill?

Run npx skillmds@latest add tomevault-io/ejirocodes-agent-skills-svelte5-best-practices in your terminal (requires Node.js), paste this page's agent-chat prompt into Claude, Cursor, or any MCP-connected agent, or download the SKILL.md file and copy it into your agent's skills directory.

What does the Ejirocodes Agent Skills Svelte5 Best Practices skill do?

Svelte 5 Best Practices It is listed under Web & Frontend on SkillMD.

Is Ejirocodes Agent Skills Svelte5 Best Practices safe to use?

This skill has not completed SkillMD's automated safety review yet. Independent scanners report: SkillSpector: PASS, Skill Scanner: PASS. SkillMD never runs a skill's scripts for you; review the SKILL.md before installing.

Which AI agents work with Ejirocodes Agent Skills Svelte5 Best Practices?

This skill is tagged as working with Claude Code, Claude.ai, OpenAI Codex. SKILL.md is an open format, so most agents that read a skills directory can load it too.

Is Ejirocodes Agent Skills Svelte5 Best Practices free to use?

Yes. Installing skills from SkillMD is free, and the skill stays under its author's original license.

Who published Ejirocodes Agent Skills Svelte5 Best Practices?

tomevault-io (@tomevault-io) published this skill. Their other Agent Skills are listed on their SkillMD profile.

Ejirocodes Agent Skills Svelte5 Best Practices by tomevault-io

Name: Ejirocodes Agent Skills Svelte5 Best Practices
Author: tomevault-io

File contents

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 => count++}>Click</button>

Callback Props (replacing createEventDispatcher)

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

<button => 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

Converted and distributed by TomeVault — claim your Tome and manage your conversions.

---name: ejirocodes-agent-skills-svelte5-best-practicesdescription: Svelte 5 Best Practices---# Svelte 5 Best Practices## Quick Reference| Topic | When to Use | Reference ||-------|-------------|-----------|| **Runes** | $state, $derived, $effect, $props, $bindable, $inspect | [runes.md](references/runes.md) || **Snippets** | Replacing slots, {#snippet}, {@render} | [snippets.md](references/snippets.md) || **Events** | onclick handlers, callback props, context API | [events.md](references/events.md) || **TypeScript** | Props typing, generic components | [typescript.md](references/typescript.md) || **Migration** | Svelte 4 to 5, stores to runes | [migration.md](references/migration.md) || **SvelteKit** | Load functions, form actions, SSR, page typing | [sveltekit.md](references/sveltekit.md) || **Performance** | Universal reactivity, avoiding over-reactivity, streaming | [performance.md](references/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<button onclick={() => count++}>Click</button>```### Callback Props (replacing createEventDispatcher)```svelte<script> let { onclick } = $props();</script><button onclick={() => onclick?.({ data })}>Click</button>```## Common Mistakes1. **Using `let` without `$state`** - Variables are not reactive without `$state()`2. **Using `$effect` for derived values** - Use `$derived` instead3. **Using `on:click` syntax** - Use `onclick` in Svelte 54. **Using `createEventDispatcher`** - Use callback props instead5. **Using `<slot>`** - Use snippets with `{@render}`6. **Forgetting `$bindable()`** - Required for `bind:` to work7. **Setting module-level state in SSR** - Causes cross-request leaks8. **Sequential awaits in load functions** - Use `Promise.all` for parallel requests---> Converted and distributed by [TomeVault](https://tomevault.io/claim/ejirocodes) — claim your Tome and manage your conversions.

Frequently asked questions

Ejirocodes Agent Skills Svelte5 Best Practices