dzinesco
6d879d0685
- Fix gold text contrast in light theme from 3.30:1 to 6.38:1 (AA compliant) - Separate ThemeContext into definition and provider files for ESLint compliance - Update contrast report with final validation results (100% passing tests) - Ensure all accent colors meet WCAG AA standards across light/dark themes - Complete design token system with proper semantic color roles 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
106 lines
3.0 KiB
Markdown
106 lines
3.0 KiB
Markdown
# 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.
|