ESLint Plugin

@airframeui/eslint-plugin helps keep markup on Airframe: warn on leftover Tailwind/Bootstrap utilities, prefer layout recipes, and require proper field-error ARIA.

Installation

npm install -D @airframeui/eslint-plugin

Setup

Flat config (ESLint 9+)

// eslint.config.js
import airframe from '@airframeui/eslint-plugin';

export default [
airframe.configs['flat/recommended'],
];

Legacy eslintrc

// .eslintrc.cjs
module.exports = {
plugins: ['@airframeui'],
extends: ['plugin:@airframeui/recommended'],
};

Rules

Rule	Recommended	What it does
@airframeui/no-tailwind-classes	warn	Flags Tailwind utility tokens in class / className
@airframeui/no-bootstrap-classes	warn	Flags Bootstrap class tokens in class / className
@airframeui/prefer-airframe-layout-recipes	warn	Rewrites flex flex-col, grid grid-cols-*, row, etc. to Airframe recipes
@airframeui/require-field-error-aria	error	af-field__error needs id; error inputs need aria-describedby

Layout recipe examples

Before	After
flex flex-col gap-4	af-stack af-gap-lg
flex flex-wrap gap-2	af-inline af-gap-sm
grid grid-cols-3 gap-6	af-grid af-grid-3 af-gap-xl
d-flex flex-column	af-stack
container	af-container

Gap numbers map to the Airframe named scale (0 · xs · sm · md · lg · xl · 2xl · 3xl · 4xl), same as the migrate toolkit.

Current limitations

• Checks string literals on class / className only (React JSX). Not yet: template literals, class:list, Vue/Svelte bindings, or Astro expression attributes.
• Does not load classes.json — it does not validate unknown af-* class names. Prefer Airframe IntelliSense for autocomplete.
• Tailwind/Bootstrap detectors ignore existing af-* tokens so legitimate Airframe markup is not flagged.

Links

• Package README: GitHub
• Related: VS Code Extension, Migrate, Tailwind migration