React 19 · Vite 8 · TypeScript 6 · MIT
This page is wired to the same three-layer token system the starter ships — nineteen values in one file drive every colour, radius, duration and control height you can see, including this sentence. Drag something. Nothing here is a screenshot.
The differentiator
Most starters hand an agent a component library it can only use from the outside. This one closes the loop: every rule that matters is machine checkable, and the whole suite runs in about eleven seconds — short enough that there is no excuse to skip it.
How it holds together
That constraint is the whole trick. A literal value anywhere below layer 0 is a leak, and a leak is why most design systems stop responding to their own theme file.
--ds-surface,
--ds-accent. One
light-dark() pair covers both themes and
follow-the-OS.
bg-surface,
text-fg-muted.
Enforced, not documented
Each one produces UI that looks correct today and silently ignores
brand.css tomorrow. Prose in a style guide
cannot catch them, so check:tokens fails
the build instead.
| Rejected | Because |
|---|---|
| #3f8f5e | A hex literal bypasses the semantic tokens entirely. |
| rgb() · hsl() | Same, and it will not follow a hue change. |
| bg-slate-800 | Tailwind's built-in palette never rethemes. |
| p-[13px] | An arbitrary pixel value escapes the density and type scales. |
| duration-150 |
A literal duration ignores
--brand-motion, so it still animates
in a brand that asked for none.
|
| duration-[--x] | Tailwind v3 syntax. In v4 it emits invalid CSS the browser drops, and the style silently does nothing. |
The agent layer
The design system, UI standards, React patterns, testing, and the routing workflow — each written to be loaded at the moment it applies.
PostToolUse hookChecks design tokens on every file the agent edits, so a violation lands in the tool result rather than at the end of the task.
/new-componentRuns the component recipe end to end — checks it should exist, builds on a Base UI primitive, writes the test, then verifies.
A CVA component, a portalled Base UI wrapper, a form field with Zod, and a query with optimistic rollback. Meant to be copied, not reinvented.
The repo indexed as a queryable graph, so the agent traces callers and blast radius instead of grepping.
MSW handlers serve the running app and Vitest from a single source, so a test and the real screen cannot disagree.
Clone to your own app
Every component is source in the repo, built on Base UI headless
primitives — they supply focus management, keyboard navigation and
ARIA wiring; the styling and the API are yours. When the examples
have served their purpose, pnpm reset
strips them and leaves the infrastructure.