{"id":"584bedc0-55be-4f6f-9479-777a81b51e54","shortId":"7MgYfh","kind":"skill","title":"svelte","tagline":"Use when editing Svelte components, .svelte files, svelte.config.js, Svelte 5 runes, $state, $derived, SvelteKit, component state, or migrating away from Svelte 4 patterns.","description":"# Svelte 5 Framework Skill\n\n\n\n## Quick Reference\n\n### Svelte 5 Runes\n\n\n\n```svelte\n\n\n
\n

{title} ({count})

\n
    \n {#each items as item (item.id)}\n
  • handleSelect(item)}>\n {item.name}\n
    • \n {/each}\n
\n
\n```\n\n\n\n### State Management with Runes\n\n\n\n```ts\n// stores/counter.svelte.ts\nclass Counter {\n count = $state(0);\n doubled = $derived(this.count * 2);\n\n increment() {\n this.count++;\n }\n\n decrement() {\n this.count--;\n }\n}\n\nexport const counter = new Counter();\n```\n\n\n\n### Bindable Props\n\n\n\n```svelte\n\n\n\n```\n\n\n\n### Snippets (Svelte 5)\n\n\n\n```svelte\n\n\n
\n
{@render header()}
\n
{@render children()}
\n {#if footer}\n
{@render footer({ count })}
\n {/if}\n
\n```\n\n\n\n### SvelteKit Load Functions\n\n\n\n```ts\n// +page.server.ts\nimport type { PageServerLoad, Actions } from './$types';\n\nexport const load: PageServerLoad = async ({ params, fetch }) => {\n const res = await fetch(`/api/items/${params.id}`);\n if (!res.ok) throw error(404, 'Not found');\n\n return {\n item: await res.json()\n };\n};\n\nexport const actions: Actions = {\n update: async ({ request, params }) => {\n const data = await request.formData();\n await updateItem(params.id, data);\n return { success: true };\n }\n};\n```\n\n\n\n### Form Actions\n\n\n\n```svelte\n\n\n
\n \n \n {#if form?.success}\n

Saved!

\n {/if}\n
\n```\n\n\n\n## Key Differences from Svelte 4\n\n| Svelte 4 | Svelte 5 |\n|----------|----------|\n| `export let prop` | `let { prop } = $props()` |\n| `$: derived` | `$derived(expr)` |\n| `$: { effect }` | `$effect(() => { })` |\n| `` | `{@render children()}` |\n| `on:click` | `onclick` |\n| `bind:this` | Still `bind:this` |\n\n\n\n## Best Practices\n\n- Use TypeScript with Svelte 5\n- Prefer `$state` over stores for local state\n- Use `$derived` for computed values\n- Extract reusable state into classes with runes\n- Use `$effect.pre` for DOM measurements\n- Use snippets instead of slots\n\n## References Index\n\n- **[Litestar-Vite Integration](references/litestar_vite.md)** — Backend integration with Litestar-Vite plugin.\n\n## Official References\n\n- \n- \n- \n- \n- \n- \n\n## Shared Styleguide Baseline\n\n- Use shared styleguides for generic language/framework rules to reduce duplication in this skill.\n- [General Principles](https://github.com/cofin/flow/blob/main/templates/styleguides/general.md)\n- [Svelte](https://github.com/cofin/flow/blob/main/templates/styleguides/frameworks/svelte.md)\n- [TypeScript](https://github.com/cofin/flow/blob/main/templates/styleguides/languages/typescript.md)\n- Keep this skill focused on tool-specific workflows, edge cases, and integration details.\n\n\n## Guardrails\n\n- **Always use Svelte 5 Runes for state management** -- Use `$state` for reactive variables and `$derived` for computed logic. Avoid legacy Svelte 4 store patterns for local state.\n- **Use Snippets instead of Slots** -- Svelte 5 introduces snippets for more explicit and flexible content composition. Avoid `` as it is deprecated in the new version.\n- **Prefer TypeScript for component logic** -- Use `