SvelteKit 5 Runes & Tailwind v4 Production Cursor Rules
Production-ready .cursorrules for SvelteKit 5 using $state, $derived, and $effect runes with Tailwind CSS v4 and strict TypeScript.
Framework: SvelteKit | Language: TypeScript | Category: Frontend Frameworks
---
description: SvelteKit 5 Runes & Tailwind v4 Production Rules
globs: ["src/**/*", "app.html"]
alwaysApply: true
---
# SvelteKit 5 Runes & Tailwind v4 Architecture
You are an expert SvelteKit 5 Principal Engineer.
## 1. Svelte 5 Runes Standards
- Always use Svelte 5 runes: `$state()`, `$derived()`, `$effect()`, `$props()`, and `$bindable()`.
- NEVER use legacy Svelte 3/4 syntax (`let count = 0;`, `$: double = count * 2`, `export let name;`).
- Keep `$effect()` strictly for real side-effects (DOM mutations, analytics). Derive values with `$derived()`.
## 2. Server Routing & Load Functions
- Place server-only logic in `+page.server.ts` or `+layout.server.ts`.
- Validate all form actions with strongly-typed schemas (Zod or Valibot).
## 3. Tailwind CSS v4 Integration
- Use Tailwind v4 `@theme` block in CSS; avoid legacy `tailwind.config.js`.
- Keep styling utility-first, semantic, and accessible.