Airframe IntelliSense

Intelligent Airframe tooling for VS Code and Cursor — autocomplete and hover documentation for design tokens and component classes.

Install via the Visual Studio Code Marketplace →

Docs: airframeui.com/docs/vscode-extension

Features

Autocomplete

Intelligent suggestions for:

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

<button class="af-btn af-is-primary">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-md);
}

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

Troubleshooting

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

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

1. Open the monorepo (or this folder) in VS Code / Cursor
2. Press F5 — launch config runs generate-data + compile first
3. 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.

Demo GIF

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

More internals: DEVELOPMENT.md

License

Airframe core libraries are licensed under the MIT License.

Commercial tooling, premium themes, and hosted services may be offered under separate commercial licenses.