.cursorrules & AI
Context Generator

# AI Coding Agent Context
# Stack: Next.js, Tailwind CSS
# Vibe:  Minimalist
# Generated: 2026-06-11 via StyleExtract Free Tools — https://styleextract.com
#
# Generic rules only go so far. For a .cursorrules file mapped to your
# exact brand colors and typography, extract your live URL at styleextract.com

## Next.js (App Router)
- Use the App Router (`app/`) exclusively — no `pages/` directory
- Default to Server Components; add `"use client"` only when you need state, effects, or browser APIs
- Use `next/image` for all images with explicit `width` and `height`
- Use `next/font` for custom fonts — never @font-face or CDN <link> tags
- Prefer `generateStaticParams` for static routes; `export const dynamic = "force-dynamic"` for SSR
- API endpoints use route handlers (`route.ts`): `export async function GET/POST(req: NextRequest)`
- Use `unstable_cache` or `revalidatePath` for ISR — never manually manage caches

## Tailwind CSS
- Use Tailwind utility classes exclusively — no custom CSS unless a utility doesn't exist
- Responsive: `sm:` `md:` `lg:` `xl:` `2xl:` — always mobile-first
- Dark mode: always pair `text-gray-900 dark:text-white` — never one without the other
- Never use arbitrary values like `w-[347px]` — if you need it, add it to the design token scale
- Group utilities: layout → spacing → typography → color → interactive states
- Use `cn()` (clsx + twMerge) for conditional class composition

## Design Vibe: Minimalist
- Maximize white space — padding and margin should feel generous, almost excessive
- Maximum 2–3 brand colors plus neutral grays; no decorative gradients
- Single font family; use weight (400/600/700) and size for hierarchy, not different faces
- No decorative elements — every element on screen must carry communicative weight
- Animations: only when they orient the user (page transitions, loading states). 150ms max.
- If removing it doesn't lose meaning, remove it

## General Code Quality
- TypeScript strict mode — no `any`, no non-null assertions without a comment explaining why
- Name things for what they ARE, not what they DO (`UserCard`, not `renderUser`)
- One concern per file — if you need to scroll more than 2 screens to understand it, split it
- No premature abstraction — three similar lines is better than a helper function used twice
- Tests: test behavior, not implementation. Mock at system boundaries only.

## Accessibility
- All interactive elements must be keyboard-navigable and have visible focus states
- Images: always `alt` text. Decorative images: `alt=""`
- Color is never the sole conveyor of meaning
- WCAG AA minimum — aim for AAA on text