Sveltekit Best Practices

ofershap

SvelteKit and Svelte 5 done right. Runes, load functions, form actions, SSR patterns.

#ai-agent #best-practices #claude-code #cursor-plugin #svelte #sveltekit

SvelteKit Best Practices

SvelteKit and Svelte 5 done right. Runes ($state, $derived, $effect), $props(), $bindable(), load functions, form actions, +page.server.ts, +layout.server.ts, hooks.server.ts, snippets, and SSR patterns.

AI coding assistants generate Svelte 4 code - writable() stores, export let props, $: reactive declarations, onMount data fetching. Svelte 5 replaced all of these with runes. This plugin stops your agent from writing dead syntax.

Install

Cursor / Claude Code / Windsurf

npx skills add ofershap/sveltekit-best-practices

Or copy skills/ into your .cursor/skills/ or .claude/skills/ directory.

What's Included

Type	Name	Description
Skill	`sveltekit-best-practices`	14 rules for Svelte 5 runes, load functions, form actions, SSR, and more
Rule	`best-practices`	Always-on behavioral rule that enforces Svelte 5 / SvelteKit patterns
Command	`/audit`	Scan your codebase for Svelte 4 anti-patterns

What Agents Get Wrong

What the agent writes (Svelte 4)	What Svelte 5 uses
`writable()`, `readable()` stores	`$state()`, `$derived()` runes
`export let name` for props	`let { name } = $props()`
`$: doubled = count * 2`	`let doubled = $derived(count * 2)`
`$: { sideEffect() }`	`$effect(() => { sideEffect() })`
Data fetching in `onMount`	`load()` in `+page.server.ts`
API routes for form mutations	Form actions in `+page.server.ts`
`<slot />` for children	Snippets with `{@render children()}`
`$app/stores` for page data	`$app/state` (Svelte 5)