color rule · error
no-hardcoded-color
Detects hex / rgb()/rgba() / hsl() / CSS named colors.
What it flags
Use design tokens via Tailwind classes (bg-primary) or var(--…) references. transparent / currentColor / inherit are allowed.
Examples
On system
<div className="bg-primary text-foreground" />Flagged
<div style={{ color: "#ff0000" }} />How to run it
Run npx windcraft check to run this and the other rules over your project. It ships at error severity by default, and your AI tools can call it on a snippet over MCP through validate_component_code — so drift is caught as the code is written, not just in review.