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)

Related Plugins

• tailwind-best-practices - Tailwind CSS v4 patterns
• typescript-best-practices - TypeScript 5.x strict patterns
• vibe-guard - Security guardrails for SvelteKit endpoints

---

If this helped your workflow, a star helps others find it.

Author

License

MIT