Agent-native. MCP-first. AI-ready by design.
Built to be consumed by an AI agent, not just read by a human. Every rule, token, and pattern ships as machine-readable data and as typed, verifiable tools — so an agent builds against the contract instead of guessing from rendered HTML.
One system, seven ways a machine can read it
All of it is served from the site root, free to fetch, read-only, and needs no auth.
MCP server
Seven typed, read-only tools — search_tokens, get_token, check_contrast, list_docs, get_doc, lint_css, get_agents_guide. The highest-leverage way to consume the system.
Open the MCP pageAgent skill
A Claude Code skill that makes an agent build and review strictly by this system, never inventing a token, value, or rule.
llms.txt
A concise index of every documentation page with its URL and summary.
llms-full.txt
The entire system inlined into one self-contained document, plus the full token table. Fetch it to load everything at once.
registry.json
Structured tokens-by-category, the pattern list, and the components array, as JSON.
tokens.json
The flat DTCG token map, name to resolved value. Look up the exact token before typing a value.
stats.json
Live, cookieless usage: npm download counts for the token package. Page, agent-file, and MCP metrics are collected server-side.
The tools verify. They don't just install.
Most component servers exist to discover and install code. This one exists so an agent gets the system right. The tools are for correctness, and they make the one hard rule — never hardcode a value, read the token — easy to honor and impossible to fake.
check_contrast
Returns the WCAG ratio and the AA/AAA verdicts for normal text, large text, and UI — before a color ever ships.
lint_css
Flags a raw hex, rgb, px, or rem that should be a token, and suggests the matching token to use instead.
get_token
Returns the exact value and the var(--…) to use, and errors if the token does not exist — so an agent can never invent one.
An agent connected to the server builds against a contract it cannot get wrong, instead of interpreting a screenshot or a page of HTML. That is what agent-native means here.