What problem does it solve? Color problems in product code are usually system problems: values picked in isolation, tokens borrowed because they looked right, and foreground/background pairs nobody measured. This Skill provides a complete methodology for structuring, generating, naming, applying, and verifying color systems so palettes stay consistent, themeable, and accessible. ## Core Features & Use Cases - Palette Structure & Generation: Defines which ramps a system needs (neutral, accent, status), maps Tailwind 50–950 and Radix 1–12 steps to roles, and generates perceptually even ramps from a brand color using libraries like culori or colorjs.io. - Token Naming & Theming: Enforces a two-tier primitive/semantic token model with a strict naming grammar, plus dark mode derivation and a single switching mechanism (prefers-color-scheme, .dark class, or light-dark()). - Contrast & Format Verification: Measures rendered foreground/background pairs against APCA and WCAG 2 thresholds, handles P3 gamut fallbacks, and reports findings in a structured severity-based review format. - Use Case: When auditing a codebase, it inventories every color literal, collapses near-duplicates, assigns roles, and reports findings with severity, location, and measured evidence without changing colors unasked. ## Quick Start Ask the agent to audit the colors in your frontend codebase and report any contrast failures, token misuse, and palette structure issues.
