Radar
← All projectsTuesday, September 15, 2026
shadcn/lint
Agent-first linter for Tailwind design systems: you define what components may change, agents get errors that name the fix from your variants and theme.
Why it matters
@shadcn/lint is an open MIT package from the shadcn team for Tailwind v4 projects (shadcn/ui not required). You encode policies like “Button owns spacing; pages may only use sizes and margin” without rewriting component APIs. When an agent breaks a rule, the diagnostic explains what failed and points at real sizes, variants, and theme files in the repo.
Coding agents still restyle buttons with random padding and off-theme colors. Soft “taste” skills help, but they do not fail CI. shadcn/lint turns design contracts into Oxlint or ESLint rules so the same loop that fixes TypeScript also pulls UI back onto your system — cheaper correction rounds in their agent evals.
How it works
Install with npm install -D @shadcn/lint oxlint (or the ESLint path). Add rules such as shadcn/no-restyle and shadcn/no-arbitrary-values in .oxlintrc.json or eslint.config.mjs, set contracts per component pattern, and wire npm run lint. Point coding agents at the SETUP.md prompt or tell them to run lint after UI edits and fix until clean.
Not another anti-slop skill pack and not TypeScript prop gymnastics alone. It is a programmable linter built so agents can verify design systems: shared configs, third-party components without forks, and messages filled from your own tokens. Soft guidance becomes a hard check.
Similar tools