Quick Reference

# CLAUDE.md

This file provides guidance to Claude Code when working with this project.

## Project Overview

[Brief description of what this site is for]

- **Framework**: Next.js 14 with App Router
- **Language**: TypeScript (strict mode)
- **Styling**: Tailwind CSS
- **Database**: Supabase
- **Deployment**: Vercel

## Design System Reference

The design system is the single source of truth.
- **Documentation**: `docs/design-system.md`
- Before creating/editing pages, ALWAYS consult the design system

### Typography Hierarchy (MANDATORY)

All headings must follow this exact scale:
- H1: `font-display text-4xl md:text-5xl text-text-primary`
- H2: `font-display text-3xl md:text-4xl text-text-primary`
- H3: `font-display text-xl md:text-2xl text-text-primary`

### Forbidden Patterns (NEVER DO THESE)

- Extra lg: breakpoints on H2: `text-3xl md:text-4xl lg:text-5xl`
- Arbitrary values: `text-[2.75rem]` (use tokens instead)
- Hardcoded colors: `text-gray-700` (use `text-text-secondary`)

## Import Patterns

Always use path aliases:
```typescript
import { Container, Section, CTA } from '@/components';
import { cn } from '@/lib/utils';

npm run dev          # Start development server
npm run build        # Build for production
npm run test         # Run tests
npx vercel --prod    # Deploy to production

### Quality Checklists

#### Design System Checklist

- [ ] Typography scale is defined and documented
- [ ] Color palette meets WCAG AA contrast requirements
- [ ] Spacing scale is consistent (4px or 8px base)
- [ ] All tokens are in tailwind.config.ts
- [ ] CLAUDE.md has design system rules

#### Component Checklist

- [ ] Uses design system tokens (not arbitrary values)
- [ ] Has TypeScript types for props
- [ ] Is accessible (focus states, ARIA labels)
- [ ] Works on mobile (responsive)
- [ ] Respects prefers-reduced-motion

#### Page Checklist

- [ ] Follows heading hierarchy (H1 → H2 → H3)
- [ ] Uses Section and Container components
- [ ] Has metadata (title, description)
- [ ] Has Open Graph tags for social sharing
- [ ] Works on mobile

#### Pre-Deployment Checklist

- [ ] All tests pass
- [ ] Build completes without errors
- [ ] No TypeScript errors
- [ ] Environment variables documented
- [ ] No secrets in code

### MCP Server Setup Guide

#### Supabase MCP

```bash
# Add the server
claude mcp add supabase

# Follow authentication prompts

Show me all tables in the database
Create a new table for [purpose]
Check the security advisories

# Add the server
claude mcp add @anthropic/mcp-playwright

# Install browsers
npx playwright install chromium

Navigate to /contact and take a screenshot
Fill out the form and submit it
Run accessibility tests on the homepage

claude mcp add context7

Look up the Next.js documentation for metadata
Find the Tailwind CSS docs for animations