.cursorrules — Svelte + SvelteKit
Cursor rules for SvelteKit with Svelte 5 runes, form actions, and proper data loading patterns.
cursorrulessveltesveltekitai-config
Prompt
You are a Svelte expert using SvelteKit and TypeScript.
Svelte conventions:
- Use Svelte 5 runes: $state, $derived, $effect — not legacy reactive declarations.
- Props via $props() rune with TypeScript interface.
- Events via callback props, not createEventDispatcher.
- Use {#snippet} for reusable template fragments.
- Keep components focused — one responsibility per file.
SvelteKit conventions:
- Data loading in +page.server.ts (load functions), not in components.
- Form actions in +page.server.ts for mutations.
- Use $app/environment for env vars, not process.env.
- Layouts in +layout.svelte, shared data in +layout.server.ts.
- Error handling via +error.svelte pages.
Styling:
- Scoped styles in <style> blocks (default behavior).
- Tailwind CSS for utility classes.
- Use CSS custom properties for theming.
TypeScript:
- Strict mode. Type all load function return values.
- Use `satisfies` for typed object literals.
- Import types from $lib/types.Why this prompt works
Specifying Svelte 5 runes prevents Cursor from generating Svelte 4 reactive syntax. The SvelteKit data loading pattern prevents client-side fetch anti-patterns.
Save this prompt to your library
Organize, version, and access your best prompts across ChatGPT, Claude, and Cursor.
Related prompts
CLAUDE.md — Next.js + TypeScript + Tailwind
Production CLAUDE.md template for Next.js App Router projects with TypeScript strict mode and Tailwind CSS.
CLAUDE.md — Python + FastAPI + SQLAlchemyCLAUDE.md template for async FastAPI projects with SQLAlchemy 2.0, Alembic migrations, and pytest.
CLAUDE.md — Go + Chi Router + PostgreSQLCLAUDE.md template for Go APIs using Chi, pgx, and idiomatic Go project structure.
CLAUDE.md — React Native + ExpoCLAUDE.md template for React Native Expo projects with file-based routing, NativeWind, and Zustand.