Readable by machines too

A system only holds if the people and tools that build with it can find the rule that applies. Everything here is data first: tokens in the W3C format, a component manifest, and an MCP server so an AI assistant designing or coding a screen reads the same source a person does.

Ships with the package. Six tools: principles, list tokens, resolve a token per theme, list components, check contrast, and "which token for this?".

claude mcp add skynet-ui -- ssp1-ui-mcp

# then, in conversation:
# "Which token is the border of a text field, and does it pass 3:1 in light?"
# "Show me the props of SegmentedControl."

• /api/design/manifest: components, principles and tokens as JSON.
• /api/design/tokens: the token source as one Tokens Studio file, importable as Figma variables with one collection per tier and a theme mode per semantic set.
• /api/design/contrast: every declared colour pair with its measured ratio.

- Style only through tokens: CSS variables from tokens.css, or the t-* type classes.
- Never use a primitive colour (color.neutral.*, color.green.*) in a component; use a semantic role.
- Never write a raw colour, pixel or millisecond value in component CSS. If a value is missing, add a token.
- Use the primitive for the job: Field around every control, SegmentedControl for 2 to 5 choices,
  Outcome for win/loss, EdgeValue for an edge (always with n), ProviderLabel for a provider.
- Win and loss colours are reserved for outcomes and never appear without a word or glyph.
- Check any new colour pair with ui_contrast before using it.

The same rules are enforced by tests: the component stylesheet is scanned for raw values and primitive references on every build.