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.
npx claudepluginhub ejirocodes/agent-skills --plugin svelte5-best-practicesThis skill uses the workspace's default tool permissions.
| Topic | When to Use | Reference |
Searches, retrieves, and installs Agent Skills from prompts.chat registry using MCP tools like search_skills and get_skill. Activates for finding skills, browsing catalogs, or extending Claude.
Searches prompts.chat for AI prompt templates by keyword or category, retrieves by ID with variable handling, and improves prompts via AI. Use for discovering or enhancing prompts.
Checks Next.js compilation errors using a running Turbopack dev server after code edits. Fixes actionable issues before reporting complete. Replaces `next build`.
| 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 |
<script>
let count = $state(0); // Reactive state
let doubled = $derived(count * 2); // Computed value
</script>
<script>
let { name, count = 0 } = $props();
let { value = $bindable() } = $props(); // Two-way binding
</script>
<script>
let { children, header } = $props();
</script>
{@render header?.()}
{@render children()}
<!-- Svelte 5: use onclick, not on:click -->
<button onclick={() => count++}>Click</button>
<script>
let { onclick } = $props();
</script>
<button onclick={() => onclick?.({ data })}>Click</button>
let without $state - Variables are not reactive without $state()$effect for derived values - Use $derived insteadon:click syntax - Use onclick in Svelte 5createEventDispatcher - Use callback props instead<slot> - Use snippets with {@render}$bindable() - Required for bind: to workPromise.all for parallel requests