# ui.byronwade.com

> Design systems that install as MCP — fail-closed consistency kits for agents.
> Stack: Contract MCP (required) · design.md/agents.md (law book) · skills (optional cookbook).
> Differentiator: shadcn MCP installs components; contract MCP enforces get_contract → validate_ui.
> Meridian is the first live contract. Harbor, Atlas, and Vellum follow. Free (stdio COGS ≈ $0).
> Marketing: https://ui.byronwade.com/stack · https://ui.byronwade.com/#stack

Browsers hitting these URLs get designed HTML. Agents receive raw text
(`Accept: text/markdown` / `text/plain`, or `?raw=1`).

## Platform

- [Home](https://ui.byronwade.com/): Catalog · agent stack · how it works · pricing ($0)
- [Agent stack](https://ui.byronwade.com/stack): Why MCP + markdown + skills (full docs)
- [stack.md](https://ui.byronwade.com/meridian/system/stack): Same doctrine under Meridian system
- [Meridian](https://ui.byronwade.com/meridian): Live cinematic contract (film + proofs)
- [Harbor](https://ui.byronwade.com/harbor) · [Atlas](https://ui.byronwade.com/atlas) · [Vellum](https://ui.byronwade.com/vellum): Soon / preview

## Platform (all contracts)

- [platform.md](https://ui.byronwade.com/meridian/system/platform): Shared architecture — MCP, filenames, JSON keys
- [pricing.md](https://ui.byronwade.com/meridian/system/pricing): Why MCP is open source (COGS ≈ $0 on stdio)
- Skeleton SSOT: `lib/platform/skeleton.ts`
- DNA packs: `lib/contracts/dna/{id}.ts` (aesthetics may differ; structure must not)
- Contract JSON (same shape): `/r/{id}.contract.json` for every id

## Meridian — for agents

- [design.md](https://ui.byronwade.com/meridian/design.md): AI contract (frozen vs creative, OKLCH, contrast)
- [agents.md](https://ui.byronwade.com/meridian/agents.md): Strict operating manual — load order, **platform consistency**, skills, gates
- [architecture.md](https://ui.byronwade.com/meridian/architecture.md): System layers
- [llms.txt](https://ui.byronwade.com/meridian/llms.txt): Meridian discovery map
- [meridian.contract.json](https://ui.byronwade.com/r/meridian.contract.json): Machine contract
- Theme grammar lives in-repo at lib/design/

## MCP · CLI

```bash
# Into ANY project (npx) — fetches /r/{id}.contract.json live
CONTRACT_ID=meridian CONTRACT_SITE=https://ui.byronwade.com \
  npx -y --package=github:byronwade/ui.byronwade.com contract-mcp

# Contributor checkout
CONTRACT_ID=meridian node packages/contract-mcp/server.mjs

# Pair with shadcn MCP for atom install (different job)
# npx shadcn@latest mcp

npm run gen:contract
npm run check:platform
```

Install UI: https://ui.byronwade.com/meridian/install  
Prompts: `build_surface` · `done_gate` · Resources: `contract://kit`

MCP = lightweight consistency kit (identical tools on every contract):
get_contract (before UI) · resolve_token · list_primitives · get_recipe · validate_ui (before done)
Every response includes obey.must / obey.mustNot — agents must not invent tokens.

## Skill loop (prove on site)

1. Theme → https://ui.byronwade.com/meridian/theme · skill meridian-theme
2. Surface → https://ui.byronwade.com/meridian/surfaces · skill meridian-surface
3. Compose → https://ui.byronwade.com/meridian/surfaces#proofs · skill meridian-compose
4. Cinematic → https://ui.byronwade.com/meridian · skill meridian-cinematic
5. A11y → https://ui.byronwade.com/meridian/theme#contrast · skill meridian-a11y

## Research specs (ranked merge)

- [System index](https://ui.byronwade.com/meridian/system): All detailed specs + DNA
- [influences](https://ui.byronwade.com/meridian/system/influences) · [meridian](https://ui.byronwade.com/meridian/system/meridian) · [sources](https://ui.byronwade.com/meridian/system/sources)
- [layout](https://ui.byronwade.com/meridian/system/layout) · [ux](https://ui.byronwade.com/meridian/system/ux) · [dx](https://ui.byronwade.com/meridian/system/dx)
- [color](https://ui.byronwade.com/meridian/system/color) · [typography](https://ui.byronwade.com/meridian/system/typography) · [density](https://ui.byronwade.com/meridian/system/density)
- [ai-surfaces](https://ui.byronwade.com/meridian/system/ai-surfaces)
- Repo paths: `docs/*.md`

## Showcase

- [Theme](https://ui.byronwade.com/meridian/theme): Laws, knobs, workbench proof, contrast pairs
- [Surfaces](https://ui.byronwade.com/meridian/surfaces): Workbench + composer + four density lanes
- [Skills](https://ui.byronwade.com/meridian/skills): Top agent skills with on-site proofs
- [System](https://ui.byronwade.com/meridian/system): Ranked research specs
- [Film](https://ui.byronwade.com/meridian): Cinematic film covering the full skill loop

## Install skills

```bash
npx skills add byronwade/ui.byronwade.com
npx skills add byronwade/ui.byronwade.com --skill meridian-theme
```

## Enforce

- npm run check:platform — cross-contract structural parity
- npm run check:design
- npm run check:contrast
- npm run check:meridian
- TypeScript unions in lib/design/grammar.ts
- Cinematic + material laws in lib/design/recipes.ts
- Contract JSON + MCP tools for runtime agent guidance
- Structural renames land in skeleton.ts and regenerate every contract