Claude MarketplacesSubmit

Svelte5 Best Practices

ejirocodes/agent-skills

This is a solid reference for anyone working with Svelte 5's new reactivity system. It covers the shift from stores to runes, slots to snippets, and event dispatchers to callback props. The quick reference table is genuinely useful for looking up when to use $state versus $derived, and the common mistakes section will save you debugging time, especially the SSR state isolation gotcha. If you're migrating from Svelte 4 or just trying to write idiomatic Svelte 5 code, the patterns here are specific enough to copy and adapt. The SvelteKit integration guidance is a nice bonus for full-stack work.

skills.sh installs: 18.6K
GitHub stars: 6
last updated: Aug 21, 2026

Install

$ npx -y skills add ejirocodes/agent-skills --skill svelte5-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

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>

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthly Promote your product hereReach 125k+ visitors monthly

Agent CaffeineSponsoredClose your lid, come back to finished work

SnugSponsoredThe clipboard manager for the AI era Promote your product hereReach 125k+ visitors monthly

WaxSponsoredBlock anything with supervision, without erasing your iPhone Promote your product hereReach 125k+ visitors monthly

knobsSponsoredSee your site on any phone, any day, in any language

Details

Repository: github.com/ejirocodes/agent-skills
Categories: Frontend Development, Testing & QA, Documentation, Code Review & Quality, AI & Agent Building, Debugging

More from ejirocodes/agent-skills

Nestjs Best Practices460

Recommended

More Frontend Development

1

unocssantfu/skillsUnoCSS instant atomic CSS engine, superset of Tailwind CSS. Use when configuring UnoCSS, writing utility rules, shortcuts, or working with presets like Wind, Ic16.3Kskills.sh installs

2

app-store-screenshotsparthjadhav/app-store-screenshotsUse when building App Store or Google Play screenshot pages, generating exportable marketing screenshots for iOS and/or Android apps, or scaffolding a screensho15.8Kskills.sh installs

3

web-design-reviewergithub/awesome-copilotThis skill enables visual inspection of websites running locally or remotely to identify and fix design issues. Triggers on requests like "review website design14.3Kskills.sh installs

4

resend-cliresend/resend-skillsOperate the Resend platform from the terminal — send emails (including React Email .tsx templates via --react-email), manage domains, contacts, broadcasts, temp14Kskills.sh installs

5

design-motion-principleskylezantos/design-motion-principlesMotion and interaction design expert based on Emil Kowalski, Jakub Krehel, and Jhey Tompkins' techniques. Two modes — build interactive components with purposef13.8Kskills.sh installs

6

daisyuisaadeghi/daisyuiOfficial daisyUI component-library skill for Tailwind CSS. When you write HTML or JSX code, you must use it. Even if the user does not request it, use it.13.1Kskills.sh installs