Svelte Cursor Rules

.cursorrules for SvelteKit

# SvelteKit Project Rules

## Stack
- SvelteKit 2.x with Svelte 5 (Runes)
- TypeScript strict mode

## Svelte 5 Runes
- Use $state() for reactive state (NOT let keyword)
- Use $derived() for computed values (NOT $: reactive)
- Use $effect() for side effects (NOT onMount for reactive)
- Use $props() for component props (NOT export let)
- Use $bindable() for two-way bindings

## Data Loading
- Use +page.server.ts load() for server data
- Use +page.ts load() for universal (shared) data
- Form mutations via form actions in +page.server.ts

## Components
- One component per file in src/lib/components/
- Use snippet blocks for render delegation
- Prefer CSS modules or scoped styles

## Routing
- File-based in src/routes/
- Layout groups with (group)/ directories
- API routes in +server.ts files

Related

• Cursor Rules Guide | Vue Cursor Rules