Lint errors that teach agents your design system

What it does

@shadcn/lint is an ESLint and Oxlint plugin for Tailwind v4 projects that enforces design system policies by analyzing className strings. You write contracts defining what each component can and cannot be styled with—layout, spacing, color, typography—and violations surface as errors that reference your actual theme values, props, and file paths. It works with existing components and does not require shadcn/ui.

The interesting bit

The entire tool is optimized for coding agents rather than human developers. The maintainers ran over 150 agent task runs to validate it: almost every task reached zero violations after one correction round, and providing lint feedback cost 10% to 48% less than letting agents fix unguided errors.

Key highlights

• Ships with rules like no-restyle, no-raw-colors, no-arbitrary-values, no-inline-styles, no-unknown-classes, and require-static-classes.
• Contracts let you apply different style permissions per component, even to third-party packages, without forking or wrapping code.
• Custom error messages support placeholders such as {{sizes}} and {{file}} that dynamically pull from your design system.
• Projects can share a base configuration while overriding rules locally, so component APIs stay flexible.

Caveats

• The Oxlint JS plugin API is currently in alpha.
• Requires Node.js 20.19 or later.

Verdict

Useful if you want AI-generated UI to stay on-brand without rewriting your component library. Not relevant if you don’t use Tailwind or don’t delegate styling to agents.