shadcn-ui/lint

What it solves

@shadcn/lint is designed to prevent coding agents from breaking design system rules when writing UI. While TypeScript can restrict certain properties, it cannot provide the guidance needed for an agent to fix a violation. This linter provides specific, actionable feedback—telling the agent exactly what is wrong and suggesting the correct components, variants, or theme values to use instead.

How it works

It functions as a programmable linter for Tailwind CSS projects (compatible with ESLint and Oxlint) that allows developers to define "contracts" for their components. You can specify which Tailwind classes are allowed or denied for specific components (e.g., allowing layout classes like mt-4 but forbidding padding on a Button). The linter then analyzes the code and generates error messages that can include dynamic placeholders (like {{sizes}}) to guide agents toward the correct design system implementation.

Who it’s for

Developers and teams building design systems with Tailwind CSS who use AI coding agents to generate or modify UI code and want to ensure the output adheres to strict design guidelines without manually rewriting components.

Highlights

• Agent-First Feedback: Provides descriptive error messages that tell agents how to fix code based on the design system.
• Programmable Rules: Define rules for components without changing the component API or using complex TypeScript types.
• Tailwind v4 Support: Works with any Tailwind v4 project, regardless of whether they use the shadcn/ui library.
• Customizable Contracts: Set specific rules for different parts of a component (e.g., different rules for CardTitle vs CardContent).
• Flexible Integration: Supports both ESLint and Oxlint for fast and flexible linting.