Best .cursorrules Examples for Every Framework

Cursor AI uses rule files to understand your project's coding standards, architecture, and conventions. Originally a single .cursorrules file in your project root, Cursor now supports .mdc (Markdown Config) rule files in the .cursor/rules/ directory, giving you modular control over different aspects of your codebase. Without these rules, Cursor generates code that works but rarely matches your team's style -- leading to constant manual edits and inconsistent patterns.

A strong .cursorrules or .mdc file includes your preferred naming conventions, import order, component structure, error handling patterns, and framework-specific idioms. For example, a Next.js rule file might specify App Router conventions, server component defaults, and Tailwind class ordering. A Python rule file might enforce type hints, docstring style, and preferred testing frameworks.

Browse our library of .cursorrules examples organized by framework -- React, Next.js, Vue, Svelte, Python, Go, Rust, and more. Each example is extracted from real production projects and ready to customize. Save your favorites in PromptingBox to version-control your Cursor configs alongside your prompts.

.cursorrules Examples by Framework

Copy these into your project root as .cursorrules or save individual rules in .cursor/rules/ as .mdc files.

Next.js 14+ (App Router)

You are an expert Next.js developer using the App Router, TypeScript, and Tailwind CSS.

Key conventions:
- Use server components by default. Only add 'use client' when you need hooks, event handlers, or browser APIs.
- Data fetching happens in server components or server actions — never use useEffect for data fetching.
- Use the `app/` directory with file-based routing. Layouts in layout.tsx, pages in page.tsx.
- Use loading.tsx for Suspense boundaries and error.tsx for error boundaries.
- Prefer server actions (in lib/actions/) over API routes for mutations.
- Use next/image for all images. Use next/link for all internal navigation.
- Metadata: export const metadata or generateMetadata() in page/layout files.

Styling:
- Tailwind CSS with cn() utility for conditional classes.
- Mobile-first responsive design (sm:, md:, lg: breakpoints).
- Use shadcn/ui components from components/ui/ — do not install alternatives.

TypeScript:
- Strict mode. No `any` types.
- Props interfaces defined above the component.
- Use `import type {}` for type-only imports.

Why it works: Specifying 'server components by default' and 'no useEffect for data fetching' catches the two most common App Router mistakes. Cursor applies these rules to every file it touches.

React + Vite + TypeScript

You are a React expert using Vite, TypeScript, and modern React patterns.

Component rules:
- Functional components only. No class components.
- Use named exports, not default exports (except pages).
- Props type defined as interface above the component.
- Destructure props in the function signature.
- Keep components under 150 lines. Extract hooks and subcomponents when larger.

State management:
- Local state: useState/useReducer.
- Shared state: Zustand stores in lib/stores/.
- Server state: TanStack Query (React Query) in lib/api/.
- No prop drilling more than 2 levels — use context or Zustand.

Styling:
- {{styling_approach}} (e.g., Tailwind, CSS Modules, styled-components)
- Consistent class ordering: layout > spacing > sizing > typography > visual > interactive

File structure:
- components/ui/ — reusable primitives
- components/features/ — feature-specific components
- lib/hooks/ — custom hooks
- lib/utils/ — pure utility functions
styling_approach

Why it works: The '150 lines max' and 'no prop drilling > 2 levels' rules give Cursor concrete thresholds. Without these, AI-generated components tend to grow unbounded.

Vue 3 + Nuxt + TypeScript

You are a Vue 3 expert using the Composition API, Nuxt 3, and TypeScript.

Vue conventions:
- Always use <script setup lang="ts"> — no Options API.
- Use defineProps<T>() and defineEmits<T>() with TypeScript generics.
- Composables in composables/ directory, prefixed with "use" (e.g., useAuth.ts).
- Reactive state: ref() for primitives, reactive() for objects.
- Use computed() over methods for derived state.

Nuxt conventions:
- Auto-imports are enabled — don't manually import ref, computed, useState, etc.
- Use useFetch/useAsyncData for data fetching, never raw fetch in onMounted.
- Server routes in server/api/ for backend logic.
- Middleware in middleware/ for route guards.
- Layouts in layouts/ with definePageMeta({ layout: 'name' }).

Styling:
- Use <style scoped> for component styles.
- Tailwind CSS for utility classes.
- No !important — fix specificity issues properly.

TypeScript:
- Strict mode enabled. No `any`.
- Type all composable return values.
- Use satisfies operator for type-safe object literals.

Why it works: 'No Options API' and 'don't manually import auto-imports' prevents Cursor from mixing old and new Vue patterns. The Nuxt-specific data fetching rules avoid common SSR hydration bugs.

Python + FastAPI

You are a Python expert using FastAPI, SQLAlchemy 2.0, and modern Python patterns.

Code style:
- Type hints on ALL function parameters and return values.
- Use Pydantic models for all request/response schemas.
- Async functions for all I/O operations (database, HTTP, file).
- Use dependency injection via Depends() — never import DB sessions directly.
- snake_case for everything. No exceptions.

Architecture:
- Routes in api/v1/ — thin handlers that call services.
- Business logic in services/ — no database imports here.
- Database queries in repositories/ — raw SQLAlchemy here.
- Models in models/ — SQLAlchemy declarative models.
- Schemas in schemas/ — Pydantic input/output validation.

Error handling:
- Custom exception classes in core/exceptions.py.
- Use HTTPException with specific status codes.
- Never return 500 for expected error cases.
- Log unexpected errors with traceback before re-raising.

Testing:
- pytest with pytest-asyncio for async tests.
- Use fixtures for DB sessions and test clients.
- Factory functions (not fixtures) for test data.
- Test behavior, not implementation — mock external services only.

Why it works: The separation of routes/services/repositories prevents Cursor from putting database queries in route handlers — the most common FastAPI architecture violation.

Svelte + SvelteKit

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 it works: Specifying Svelte 5 runes prevents Cursor from generating Svelte 4 reactive syntax. The SvelteKit data loading pattern prevents client-side fetch anti-patterns.

Go + Standard Library

You are a Go expert following idiomatic Go patterns and the standard library.

Code style:
- Follow Effective Go and the Go Code Review Comments guide.
- Use gofmt and golangci-lint. All exported types/functions need doc comments.
- Error handling: return errors, don't panic. Wrap errors with fmt.Errorf("context: %w", err).
- Interfaces: define where consumed, not where implemented. Keep them small (1-3 methods).
- No init() functions. Explicit initialization in main().

Architecture:
- cmd/ — entrypoints. internal/ — private packages. pkg/ — public packages.
- One package per domain concept. No "utils" or "helpers" packages.
- Dependencies flow inward: handlers -> services -> repositories.
- Use context.Context for cancellation, deadlines, and request-scoped values.

Testing:
- Table-driven tests with clear subtest names.
- Use testify for assertions if needed, but prefer standard library.
- Test files in the same package (foo_test.go).
- Use t.Helper() in test helper functions.
- Benchmark performance-critical code with testing.B.

Concurrency:
- Prefer channels for communication, mutexes for state protection.
- Always use sync.WaitGroup or errgroup for goroutine lifecycle.
- No goroutine leaks — every goroutine must have a shutdown path.

Why it works: Go's simplicity means there are clear right/wrong patterns. 'No utils package' and 'interfaces at the consumer' prevent the two most common Go architecture mistakes AI tools make.

Tailwind CSS (Universal)

You are a Tailwind CSS expert. Apply these rules to ALL styling decisions.

Class ordering (always follow this order):
1. Layout: flex, grid, block, hidden, position
2. Spacing: p-*, m-*, gap-*
3. Sizing: w-*, h-*, max-w-*, min-h-*
4. Typography: text-*, font-*, leading-*, tracking-*
5. Visual: bg-*, border-*, rounded-*, shadow-*
6. Interactive: hover:*, focus:*, transition-*, cursor-*

Rules:
- Mobile-first: write base styles, then add sm:, md:, lg: breakpoints.
- Never use arbitrary values [123px] when a Tailwind scale value exists.
- Use the design system: stick to the default spacing/color scales.
- Prefer gap-* over margin for flex/grid children.
- Use ring-* for focus indicators, not outline or border hacks.
- Dark mode via class strategy: dark:bg-gray-900.

Components:
- Extract repeated patterns into components, not @apply.
- Use cn() or clsx() for conditional classes.
- Never use !important — fix specificity with proper structure.

Why it works: Consistent class ordering makes diffs readable and code reviewable. The 'no arbitrary values' rule keeps the design system intact across AI-generated code.

TypeScript (Universal)

You are a TypeScript expert. Apply strict TypeScript conventions to all code.

Type rules:
- strict mode enabled. No `any` — use `unknown` and narrow with type guards.
- Prefer interfaces for object shapes, types for unions/intersections.
- Use `import type {}` for type-only imports.
- Generics: meaningful names (TUser, not T) when more than one generic.
- Use `satisfies` for type-safe object literals: `const x = {...} satisfies Config`.
- Use `as const` for literal types: `const ROLES = ['admin', 'user'] as const`.

Function rules:
- Always type return values for exported functions.
- Use overloads for functions with different input/output type pairs.
- Prefer `readonly` parameters when the function doesn't mutate.
- Arrow functions for callbacks, named functions for top-level declarations.

Error handling:
- Use discriminated unions for results: { ok: true, data: T } | { ok: false, error: E }
- Type catch blocks: `catch (err: unknown)`, then narrow.
- Never ignore errors silently — handle or rethrow.

Naming:
- Interfaces: PascalCase, no "I" prefix (User, not IUser).
- Types: PascalCase (UserRole, ApiResponse).
- Enums: PascalCase members (Role.Admin, not Role.ADMIN).
- Constants: SCREAMING_SNAKE_CASE for true constants only.

Why it works: 'No any — use unknown and narrow' is the single highest-impact TypeScript rule. AI tools default to any when types get complex; this rule forces correct solutions.