MCPInstall

svelte5-best-practices

by ejirocodesCode Quality & Workflow

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.

Installs
16.8K
Last 24h
+186
Trending rank
#1277
Security
Pass

Install

Works with every agent the skills CLI supports.

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

    Install

    Run the command in your project. The CLI asks which agents to install for.

  2. 02

    Describe the task

    Ask your agent for something this skill covers. It loads svelte5-best-practices automatically when relevant.

  3. 03

    Review the result

    The agent follows the SKILL.md steps, scripts and references bundled with the skill.

Security audits

Independent scans of the skill's instructions and bundled files.

Gen Agent Trust Hub PassSAFE ·This skill provides comprehensive documentation and code snippets for Svelte 5 best practices, including runes, snippets, and SvelteKit patterns. It includes security guidance for handling environment variables and preventing data leaks in SSR. No malicious patterns were detected.
Socket PassNo alerts
Snyk PassLOW ·Risk: LOW · No issues
Runlayer PassNONE ·8 files scanned · No issues
ZeroLeaks PassNONE ·Score: 93/100 · 2 sections analyzed

SKILL.md

The instructions your agent reads when the skill is triggered.

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

FAQ

What does the svelte5-best-practices skill do?

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.

How do I install svelte5-best-practices?

Run npx skills add https://github.com/ejirocodes/agent-skills --skill svelte5-best-practices in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/svelte5-best-practices/ (personal) or .claude/skills/svelte5-best-practices/ (project).

Which AI agents can use svelte5-best-practices?

Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.

Is svelte5-best-practices safe to install?

Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer passed; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.

Who maintains svelte5-best-practices?

It is published by ejirocodes in ejirocodes/agent-skills. It has 16,827 recorded installs.

More from ejirocodes/agent-skills

View all →

nestjs-best-practices

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

Code Quality & Workflow432 installs

vue-best-practices

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

Frontend & Design276 installs

exa-research

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

Productivity & Automation236 installs

exa-entities

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents230 installs

exa-rag

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents227 installs

exa-search

ejirocodes/agent-skills

Open the skill to read its SKILL.md instructions.

AI & Agents227 installs

Popular code quality & workflow skills

View category →

grill-me

mattpocock/skills

A relentless interview to sharpen a plan or design.

Code Quality & Workflow1.4M installs

improve-codebase-architecture

mattpocock/skills

Scan a codebase for deepening opportunities, present them as a visual HTML report, then grill through whichever one you pick.

Code Quality & Workflow1.2M installs

handoff

mattpocock/skills

Compact the current conversation into a handoff document for another agent to pick up.

Code Quality & Workflow1.1M installs

domain-modeling

mattpocock/skills

Build and sharpen a project's domain model. Use when discussing codebase terminology, writing or editing a GLOSSARY.md, or recording or editing an ADR.

Code Quality & Workflow890.6K installs

codebase-design

mattpocock/skills

Shared vocabulary for designing deep modules. Use when the user wants to design or improve a module's interface, find deepening opportunities, decide where a seam goes, make code more testable or AI-navigable, or when another skill needs the deep-module vocabulary.

Code Quality & Workflow863.8K installs

diagnosing-bugs

mattpocock/skills

Diagnosis loop for hard bugs and performance regressions. Use when the user says "diagnose"/"debug this", or reports something broken/throwing/failing/slow.

Code Quality & Workflow848.4K installs