cursorrules

Cursor rules — Next.js 15 + React 19 + TypeScript + Tailwind 4

You are working in a Next.js 15 App Router project. See AGENTS.md for full conventions.

The five rules that matter most

1. Default to Server Components. Only "use client" when you genuinely need state, effects, browser APIs, or a client-only library.
2. Server Actions for mutations. Don't write API routes for first-party form submissions.
3. Use cn() from @/lib/utils for className composition. Never concatenate className strings manually.
4. No any. Use unknown and narrow. The tsc config is strict — don't loosen it.
5. Named exports only. Default exports are reserved for Next's special files.

Stack details

• Package manager: pnpm
• Database: Drizzle ORM with PostgreSQL
• UI: shadcn components (don't edit components/ui/*)
• Forms: React Hook Form + Zod
• Tests: Vitest + Testing Library + Playwright

Imports

Use @/* path alias for everything below project root. Group imports:

1. React/Next
2. Third-party
3. @/lib/*, @/hooks/*
4. @/components/*
5. Local relative

When you generate a new route

• Decide: marketing (public, in app/(marketing)) or app (auth-gated, in app/(app))?
• If it fetches data, do it in the Server Component, not a useEffect in a Client Component.
• Wrap async children in <Suspense fallback={<Skeleton />}>.
• Add a loading.tsx for route-level loading state and error.tsx for errors.

When you add a component

• Server by default; add "use client" only when proven necessary.
• Props interface defined inline above the component.
• Forward className and merge with cn().
• Forward ref only when the component wraps a DOM element (use React.forwardRef if needed; React 19 components often don't).

Tailwind 4 specifics

• Config is CSS-first in app/globals.css — don't look for tailwind.config.ts.
• Use design tokens (CSS variables defined in globals.css) instead of hardcoded colors.
• Prefer flex/grid over absolute positioning unless overlay required.