Files

dzinesco 6d879d0685 feat(theme): finalize design token system with WCAG AA compliance

- 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>

2025-08-16 02:21:19 -06:00

3.0 KiB

Raw Blame History

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:

Plan → Think through the change (/think, /ultrathink if complex).
Build → Implement the smallest safe increment.
Review → Run git diff to confirm only intended changes.
Test → Trigger QA hooks selectively (/qa), NOT on every change.
Commit → Use conventional commits (feat:, fix:, chore:).
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.

3.0 KiB Raw Blame History