IntelliSense for Airframe

Autocomplete for --af-* tokens and af-* classes. Same version as @airframeui/core.

Token names and descriptions come from @airframeui/tokens/catalog.json. Classes come from @airframeui/core.

Airframe IntelliSense demo

Install via the Visual StudioCode Marketplace →

Docs: airframeui.com/docs/vscode-extension

Features

Autocomplete

Intelligent suggestions for:

Design tokens — --af-* and var(--af-…)
Pattern and utility classes — af-* (2,400+ including responsive variants)
Responsive suffixes — type af-stack@ for @xs / @sm / @md / @lg / @xl / @2xl
Modifiers — af-is-outline, af-is-sm, and more

<button class="af-btn">Click me</button>
<div class="af-grid af-grid-2 af-grid-4@md">…</div>

.panel {
  color: var(--af-color-primary);
  padding: var(--af-space-4);
  border-radius: var(--af-radius);
}

:root {
  --af-choice-size: 1.5rem; /* checkbox / radio / switch track */
}

Hover Preview

Hover any --af-* token or .af-* class to see values, category, and related modifiers.

Supported languages

CSS · SCSS · Less · HTML · JavaScript / JSX · TypeScript / TSX · Astro

Recommended VS Code settings

`editor.quickSuggestions`

By default VS Code may not trigger completions inside string attributes. Turning string suggestions on improves the experience:

{
  "editor.quickSuggestions": {
    "strings": "on"
  }
}

Extension settings

Setting	Default	Description
`airframeui.enable`	`true`	Enable or disable Airframe IntelliSense

Troubleshooting

Confirm the extension is installed and enabled.
Check the language mode in the status bar (HTML, CSS, Astro, …).
Ensure airframeui.enable is not false.
For completions inside class="…", enable editor.quickSuggestions.strings or use Ctrl+Space / Cmd+Space.
Reload the window after installing or updating.

@airframeui/core — CSS system
@airframeui/mcp — coding agents (npx -y @airframeui/mcp)
Packages

Development

For contributors working in this monorepo. End users should install from the Marketplace.

Build

# From monorepo root (builds core, then the extension)
pnpm exec turbo build --filter=airframe-intellisense

Or from this package (core must already be built):

cd packages/vscode-extension
npm run generate-data
npm run compile

Test in Extension Development Host

Open the monorepo (or this folder) in VS Code / Cursor
Press F5 — launch config runs generate-data + compile first
In the host window, open demo.html or any CSS/HTML/JSX/Astro file and try --af- / af-

Package & install a local VSIX

cd packages/vscode-extension
npm run package

# Cursor
cursor --install-extension ./airframe-intellisense-$(node -p "require('./package.json').version").vsix

# VS Code
code --install-extension ./airframe-intellisense-$(node -p "require('./package.json').version").vsix

Then Developer: Reload Window.

Publish (VS Marketplace)

See PUBLISHING.md — usually pnpm release from the repo root (VSCE_PAT).

Demo GIF

Record / update the Marketplace + docs demo: media/CAPTURE.md

More internals: DEVELOPMENT.md

License

MIT

Airframe IntelliSense

Airframe