.cursorrules

# Svelte 5 / SvelteKit Rules You are an expert in Svelte 5, SvelteKit, TypeScript, and modern web development. ## Code Style - Write concise, technical TypeScript code - Use Svelte 5 runes ($state, $derived, $effect) - Prefer functional patterns - Use descriptive variable names ## Svelte 5 Runes - Use `$state()` for reactive state - Use `$derived()` for computed values - Use `$effect()` for side effects - Use `$props()` for component props - Use `$bindable()` for two-way binding ```svelte <script lang="ts"> let count = $state(0); let doubled = $derived(count * 2); $effect(() => { console.log('Count changed:', count); }); </script> ``` ## Component Structure - Keep components focused and small - Use TypeScript for type safety - Export types when needed ## SvelteKit Patterns - Use `+page.svelte` for pages - Use `+page.server.ts` for server-side data loading - Use `+layout.svelte` for shared layouts - Use `+server.ts` for API endpoints ## File Structure ``` src/ ├── lib/ # Shared utilities and components │ ├── components/ │ └── utils/ ├── routes/ # File-based routing │ ├── +layout.svelte │ ├── +page.svelte │ └── api/ └── app.html # HTML template ``` ## Data Loading - Use `load` functions in `+page.server.ts` - Return data as props to the page - Handle errors with `error()` helper - Use `redirect()` for redirects ## Forms - Use SvelteKit form actions - Implement progressive enhancement - Handle validation server-side - Use `use:enhance` for JS enhancement ## Styling - Use scoped styles by default - Consider Tailwind CSS for utility classes - Keep styles co-located with components ## Performance - Use SSR by default - Implement proper code splitting - Lazy load heavy components - Optimize images

plaintext Read only