Airframe

Registry¶

Airframe is also a shadcn-compatible registry, so one command puts its files into any project. A Python console, a Vite app, a Tailwind project or a bare folder a coding agent is working in. The items are universal: every file has an explicit target, and nothing needs React, Tailwind or a components.json.

The tool repos keep using scripts/sync-airframe.sh theme-vN, which does the same job with a fixed destination list. The registry is for everything else.

Install¶

From this site (built JSON, always the current release):

npx shadcn@latest add https://sean-koval.github.io/agent-factory/r/airframe.json

From the repository, pinned to the current release (a GitHub source registry; the CLI reads registry.json at the repo root):

npx shadcn@latest add Sean-Koval/agent-factory/airframe#theme-v16
npx shadcn@latest add Sean-Koval/agent-factory/skill#theme-v16
npx shadcn@latest list Sean-Koval/agent-factory

A #ref pins one item

The CLI does not carry the ref to that item's dependencies, which it reads from main, so button#theme-v16 installs that tag's contract but the current airframe files. Pin the whole set by naming every item in one command, or install from the site, where each release's items are built together.

As a named registry, for the shadcn MCP server and @airframe/<item> addresses (needs a full components.json):

{ "registries": { "@airframe": "https://sean-koval.github.io/agent-factory/r/{name}.json" } }

Items¶

Item	What it installs
`airframe`	The three files the tool repos vendor: tokens, `af-` classes, icon sprite, under `airframe/`. For any web UI.
`airframe-tailwind`	The tokens plus `airframe-tailwind.css`, a Tailwind v4 `@theme` over them: `bg-canvas`, `text-fg-muted`, `font-display`, `text-label`, `rounded-card`, and no default palette.
`airframe-tokens`	`airframe.tokens.json` (Night) and `airframe-day.tokens.json` (Day) in the W3C Design Tokens format, plus the resolved `airframe-tokens.json`. For Figma variables, Style Dictionary, Terrazzo and scripts that draw.
`airframe-docs`	The docs-site look: `airframe-docs.css` into `docs/stylesheets/` and the suite strip partial `airframe-suite.html` into `overrides/partials/`, for a Material for MkDocs or Zensical site. Wiring in the docs sites.
`skill`	The Airframe skill for coding agents, at `.claude/skills/airframe/` (Claude Code) and `.agents/skills/airframe/` (Codex): the rules, the classes, where each contract lives.
`helpers`	`airframe/airframe.js`: the optional ES module with the markup helpers (`status`, `icon`, `meta`, `btn`, `avatar`, `obj`, `tag`) and the toast, confirm and drawer behaviours. No dependencies, no build step.
`button`, `status`, `card`, `fleet-bay`, `approval-card`, `question`, `composer`, `diff`, `avatar`, `object-chip`	A component's contract as `airframe/components/<Name>.md`, next to the code; each depends on `airframe` and on the components it is built from.
`page-header`, `empty-state`, `toast`, `dialog`, `drawer`	The patterns' contracts, the same way; toast, dialog and drawer also pull in `helpers`.
`react`	`src/components/airframe/{Button,Status,Card,Icon}.tsx`: thin wrappers that only compose `af-` classes. A prototype; the consoles are vanilla JS.

The source is registry.json at the repository root; python3 scripts/airframe.py registry DIR inlines each item's files into DIR/<item>.json, which this site serves under /r/. python3 scripts/airframe.py check validates the registry with the rest of Airframe.