midudev/autoskills/svelte5-best-practices

Claude Code and agent skill by midudev/autoskills

Trust tier 3
  • community
Source check pending

Checking that the SKILL.md file is still in the repository.

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.

Install

npx vskill@latest install midudev/autoskills/svelte5-best-practices

SKILL.md

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
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
<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>
Callback Props (replacing createEventDispatcher)
svelte
<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

Security

  • Security scanPassed, 95 of 100Pattern checks on the skill's files.
  • Model reviewPassed

See the full security report

Quality evaluation

  • Task evaluationNot runNo evaluation yet. Run one in Skill Studio.

See evaluation results

Source

Popularity

Repository stars
6,099
Repository forks
561
7-day trend score
44

Stars and forks are for the whole GitHub repository, not this skill alone. Not refreshed yet.

Works with

Any agent vskill installs to: 56 targets in all. These 39 have a page on this site.

  • Claude Code
  • Cursor
  • GitHub Copilot
  • Windsurf
  • Codex
  • Gemini CLI
  • Cline
  • Amp
  • Roo Code
  • Goose
  • Continue
  • Kilo Code
  • Junie
  • Trae
  • OpenHands
  • Qwen Code
  • AI Agent
  • Tabnine Chat
  • Sourcegraph Cody
  • Amazon Q
  • Firebase Genkit
  • Sweep
  • Devin
  • Phind
  • Mentat
  • Claude Desktop
  • Aider
  • GPT Pilot
  • Plandex
  • bolt.new
  • v0
  • Replit Agent
  • Anse
  • TypingMind
  • BetterChatGPT
  • LibreChat
  • Warp AI
  • Pieces
  • Fig AI
Embed badge
vskill VERIFIED badge
[![vskill VERIFIED](https://verified-skill.com/api/v1/skills/midudev/autoskills/svelte5-best-practices/badge)](https://verified-skill.com/skills/midudev/autoskills/svelte5-best-practices)

Something wrong with this skill or its page? Tell us.