# Airframe

> Airframe is a CSS-first structural UI system: layout primitives (`af-stack`, `af-inline`, `af-grid`), a full token layer (`--af-*`), and accessible patterns. One CSS import, zero runtime JavaScript, works with any framework.

When generating or reviewing Airframe markup:
- Prefer semantic HTML and structural primitives over utility soup
- All classes start with `af-`; modifiers use `af-is-*`; BEM parts use `af-card__title`
- Theme via CSS variables (`--af-base-primary`, etc.); no rebuild required for day-to-day branding
- Optional theme codegen: Theme Studio, `af theme`, or `@airframeui/mcp` when mapping an existing design system
- Use the minimum number of classes — components have sensible defaults
- Follow accessibility contracts (native controls, labels, focus-visible)

Package resources (after `npm install @airframeui/core`):
- `@airframeui/core/rules` — authoritative AIRFRAME_RULES.md
- `@airframeui/core/catalog` — component catalog JSON
- `@airframeui/core/classes` — class reference JSON
- `@airframeui/core/examples` — structured code examples
- `@airframeui/core/ai` — AI tooling integration guide

Theme / agent tooling:
- `@airframeui/theme/rules` — theme generation and lint rules
- `@airframeui/theme/mapping` — token path mapping guide
- `@airframeui/mcp` — MCP tools (`generate_theme`, `map_tokens`, `lint_theme`, `validate_theme`)
- Theme Studio UI: https://airframeui.com/theme-studio

For the shortest useful context, start with **AI Rules** or **Getting Started** below.

## Documentation Sets

- [Abridged documentation](https://airframeui.com/llms-small.txt): a compact version of the documentation for Airframe, with non-essential content removed
- [Complete documentation](https://airframeui.com/llms-full.txt): the full documentation for Airframe
- [Getting Started](https://airframeui.com/_llms-txt/getting-started.txt): Install, usage, tokens, theming, layouts, and framework setup — best first read for coding agents.
- [AI Rules](https://airframeui.com/_llms-txt/ai-rules.txt): Authoritative rules and patterns for generating Airframe markup with AI.
- [Layouts & Structure](https://airframeui.com/_llms-txt/layouts--structure.txt): Structural primitives, grid, responsive suffixes, and page recipes.
- [Patterns](https://airframeui.com/_llms-txt/patterns.txt): UI patterns: buttons, forms, cards, overlays, badges, and more.
- [Accessibility](https://airframeui.com/_llms-txt/accessibility.txt): WCAG guidance, forms, keyboard/focus, contrast, and pattern contracts.

## Notes

- The complete documentation includes all content from the official documentation
- The content is automatically generated from the same source as the official documentation

## Optional

- [@airframeui/core on npm](https://www.npmjs.com/package/@airframeui/core): Install the package to load ./rules, ./catalog, ./classes, ./examples, and ./ai locally in a project
- [@airframeui/theme on npm](https://www.npmjs.com/package/@airframeui/theme): Generate, map, and lint theme.css from design-token files; ships ./rules and ./mapping
- [@airframeui/mcp on npm](https://www.npmjs.com/package/@airframeui/mcp): MCP server tools for theme generation, mapping, lint, and validate
- [Theme Studio](https://airframeui.com/theme-studio): Browser UI to upload token files, preview on patterns, and export theme.css
- [Airframe GitHub repository](https://github.com/airframeui/airframeui): Source for AIRFRAME_RULES.md, component-catalog.json, and class-reference.json