# CLAUDE.md Blueprint

<!-- 
  HOW TO USE THIS FILE:
  1. Replace everything in [brackets] with your own details
  2. Delete any sections that don't apply to your project
  3. Add sections that are specific to your workflow
  4. Save this as CLAUDE.md in your project root
  5. Claude Code reads it automatically at the start of every conversation
  
  For a GLOBAL version that applies to ALL projects:
  Save a copy at ~/.claude/CLAUDE.md with your personal preferences.
  Project-level CLAUDE.md overrides the global one for project-specific rules.
-->

# [Project Name]

## Project Context
<!-- What is this project? What does it do? Who is it for? 
     The more context you give, the better Claude understands your goals. -->
[Describe your project in 2-3 sentences. What it does, who it serves, what stage it is at.]

## Tech Stack
<!-- Be specific. Claude will use exactly what you list here instead of guessing. -->
- [Framework] (e.g. Next.js 16 App Router + TypeScript)
- [Styling] (e.g. Tailwind CSS 4)
- [UI Components] (e.g. shadcn/ui)
- [Database] (e.g. Supabase with Postgres + Auth + Row Level Security)
- [ORM] (e.g. Drizzle ORM, Prisma)
- [Payments] (e.g. Stripe Checkout)
- [Deployment] (e.g. Vercel)

## Project Structure
<!-- Map out your folder structure so Claude puts files in the right place. -->
```
src/
  app/           -- Pages and routes
  components/
    ui/          -- Reusable UI components
    shared/      -- Layout components (nav, footer)
  config/        -- Static configuration files
  lib/           -- Utilities, database clients, API helpers
```

## Design Rules
<!-- This section is what separates $200 sites from $5,000 sites. Be specific. -->

### Colors
<!-- List your exact colors. Without this, Claude picks random defaults. -->
- Primary: [hex code]
- Background: [hex code]
- Text: [hex code]
- Secondary text: [hex code]
- Border: [hex code]

### Typography
- Headings: [font name], bold
- Body: [font name], 16px, 1.75 line height
- Code/numbers: [mono font name]

### Component Rules
- Card border radius: [e.g. 16px / rounded-2xl]
- All buttons must have [e.g. cursor-pointer and press feedback]
- All interactive elements must have cursor-pointer
- Mobile-first design. Build for mobile, then enhance for desktop.

### Animation Rules
<!-- Tell Claude how to handle motion. -->
- CSS-only animations (no heavy animation libraries)
- Keep animations subtle and purposeful
- Respect prefers-reduced-motion

## What NOT To Do
<!-- This is arguably the most important section. Constraints make the output 10x better. -->
- Never expose API keys, passwords, or sensitive information
- Never use [unwanted library/pattern]
- Never use generic stock illustrations or placeholder content
- Never add features I did not ask for
- Never refactor code I did not ask you to change
- Do not add comments or docstrings to code you did not write
- Do not use [corporate words like "leverage", "utilize", "robust", "comprehensive"]
- Do not add error handling for scenarios that cannot happen
- Do not create abstractions for one-time operations

## Code Organization
<!-- How should Claude structure new code? -->
- [Naming conventions, e.g. kebab-case files, PascalCase components]
- [Where new components go]
- [Import ordering preferences]
- [Any patterns to follow, e.g. server components by default]

## Database Rules
<!-- If you have a database, tell Claude the rules. -->
- Row Level Security (RLS) enabled on every table
- All queries scoped to the authenticated user
- No raw SQL. Use parameterized queries through the ORM.
- Schema changes go in [location]

## Security
<!-- Non-negotiable rules that prevent vulnerabilities. -->
- .env.local is in .gitignore. Always.
- No secrets in client-side code. Anything with NEXT_PUBLIC_ prefix is visible to everyone.
- Service role keys only used server-side. Never in components.
- Input validation on all API endpoints
- Generic error messages only. No stack traces to users.
- Auth check on every protected route

## Workflow
<!-- How do you want Claude to work with you? -->
- Plan before building. If a task has 3+ steps, plan first.
- Commit with clear, descriptive messages after completing work
- [Push/deploy rules, e.g. "Push only when a feature is fully complete"]
- [Response style, e.g. "Be concise. No filler. Lead with the action."]

## Communication Style
- Be direct. No unnecessary caveats or filler.
- When presenting options, lead with your recommendation
- Challenge my assumptions if something seems wrong
- If you have corrected course more than twice, suggest starting fresh
- [Your preferred level of detail in responses]

## Quality Standards
- Mobile-responsive by default. Test at 430px and 1440px.
- Every feature needs verification before moving on
- Clean git history. No "fix fix fix" commits.
- UI should look intentional and designed, never generic
- [Any other standards specific to your work]