# CLAUDE.md

This file configures Claude Code for the **Black Canyon Tickets React Rebuild** project.

---

## Project Overview

A **React + Tailwind rebuild** of the Black Canyon Tickets frontend, focused on UI/UX polish,
maintainability, and production-ready standards.  
⚠️ This repo is frontend-only — no live payments, APIs, or sensitive data.

---

## Core Tech Stack

- **React 18 + Vite**
- **TypeScript**
- **Tailwind CSS**
- **Playwright** (E2E testing with screenshots)
- **ESLint + Prettier** (linting/formatting)
- **Docker** (deployment parity)

---

## Agents

Claude should route work to the following **specialist agents**:

- **Code Reviewer** → React/TS/Tailwind, correctness, anti-patterns, maintainability.
- **UX/A11y Reviewer** → Accessibility, usability, visual clarity, WCAG compliance.
- **UI Generator** → Uses MCPs and design tokens for consistent theming (light/dark).
- **QA Agent** → Playwright tests + screenshots into `/qa-screenshots/`.
- **Project Manager** → Tracks tasks, crosslinks REBUILD_PLAN.md and issues, enforces priorities.

Use `/use agent-name` to manually invoke, or let Claude auto-delegate.

---

## Workflow

Claude must follow this iterative loop:

1. **Plan** → Think through the change (`/think`, `/ultrathink` if complex).
2. **Build** → Implement the smallest safe increment.
3. **Review** → Run `git diff` to confirm only intended changes.
4. **Test** → Trigger QA hooks selectively (`/qa`), NOT on every change.
5. **Commit** → Use conventional commits (`feat:`, `fix:`, `chore:`).
6. **Push / PR** → Only after successful local validation.

---

## Design System

- Two themes: **Light** (clean/modern) and **Dark** (muted, professional).
- Tailwind `@apply` for tokens and components.
- Avoid inline styles unless absolutely necessary.
- Respect **CrispyGoat polish rule** → UI must look finished and unapologetically confident.

---

## Testing Rules

- **Unit tests** optional; focus on E2E with Playwright.
- Screenshots saved under `/qa-screenshots/`.
- QA runs **only when requested** (avoid burning tokens).
- Manual review before merging.

---

## Permissions

- Claude may run:
  - `npm install`, `npm run dev`, `npm run build`, `npm run lint`, `npm run test`
  - `git diff`, `git commit`, `git push`
  - Playwright test commands
- Claude must NOT:
  - Deploy automatically
  - Alter CI/CD configs without approval
  - Modify payment or API keys

---

## Branching

- Use short feature branches: `feat/ui-dashboard`, `fix/navbar-bug`
- Always PR into `main`.

---

## Claude Behavior Guidelines

- Assume **production-ready quality** even in mock/demo code.
- Be concise in explanations → avoid long generic text.
- Use **examples when suggesting improvements**.
- Prefer **incremental safe changes** over large rewrites.
- Auto-delegate to the right **agent** when possible.
- Stop and ask for clarification if scope is ambiguous.

---

## Notes

- Use `REBUILD_PLAN.md` as the source of truth for phased implementation.
- All agents should treat **CrispyGoat design ethos** as a non-negotiable standard.