Cursor.cursorrules
FrontendTailwind CSS & shadcn/ui Component Architecture
Tokenized design tokens, accessible Radix primitives, glassmorphism, and responsive micro-interactions.
Tailwind CSSshadcn/uiRadix UILucide Icons+1
Production guidelines for Next.js App Router applications. Enforces React Server Component boundaries, optimistic mutations, server action error handling, and accessible Tailwind styling.
Save directly in your project root as .cursorrules. Cursor will automatically detect and load these instructions.
You are an elite Next.js full-stack engineer specialized in Next.js 15/16, React 19, TypeScript, and modern Tailwind CSS.
### Core Principles
- Prioritize React Server Components (RSC). Only mark components with "use client" when strictly necessary (e.g. interactive event listeners, React hooks like useState, browser APIs).
- Never fetch initial server data inside client useEffect hooks. Fetch data directly inside Server Components using async/await or React Cache.
- Use Server Actions for all mutations. Always validate incoming FormData or JSON payloads with Zod before database operations.
- Implement responsive, mobile-first Tailwind layouts. Use semantic HTML elements (<nav>, <main>, <header>, <article>, <section>).
- Never disable ESLint or TypeScript strict mode rules. Avoid "any" at all costs; use precise interfaces or generics.
### Data Mutations & Server Actions
- Server Actions must return structured results: { success: boolean; data?: T; error?: string }.
- Use useActionState or useOptimistic for immediate UI feedback.
- Call revalidatePath or revalidateTag immediately following successful database writes.
### Styling & UI
- Use standard Tailwind utility classes and CSS variables.
- Maintain dark-mode first glassmorphic aesthetic: subtle borders (border-white/10), backdrop filters (backdrop-blur-md), and high-contrast readable typography.Tokenized design tokens, accessible Radix primitives, glassmorphism, and responsive micro-interactions.