# AI use cases for Lint (shadcn-ui/lint)

Repo: [shadcn-ui/lint](https://github.com/shadcn-ui/lint) | Use cases: 3 | Page: https://dedupedai.com/use-cases/shadcn-ui-lint/

A linter for Tailwind design systems that lets you define allowed styling and gives coding agents fix suggestions drawn from your own components and theme.

This file holds every use case of this repo. Each one starts with a "## " heading and ends with its URL.

- Block arbitrary Tailwind values in agent-written UI: https://dedupedai.com/use-cases/shadcn-ui-lint/block-arbitrary-tailwind-values/
- Lock component styling with per-component contracts: https://dedupedai.com/use-cases/shadcn-ui-lint/lock-component-styling-with-contracts/
- Make coding agents fix Lint errors before finishing: https://dedupedai.com/use-cases/shadcn-ui-lint/make-agents-fix-lint-errors-first/

## How to block arbitrary Tailwind values in agent-written UI with Lint

Repo: [shadcn-ui/lint](https://github.com/shadcn-ui/lint) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Flag off-scale Tailwind values so agents use your theme's spacing, colors, and sizes instead.

**Who it is for:** A front-end developer whose coding agent keeps adding one-off pixel values like p-[13px] that break the design system.

**The problem:** Agents often invent arbitrary Tailwind values. These pass review in isolation but drift the UI away from the theme.

**The outcome:** Arbitrary values are reported as Lint errors, and the error points the agent back to values already in the theme.

### Steps

1. Run `npm install -D @shadcn/lint eslint @typescript-eslint/parser` in the project.
2. Create eslint.config.mjs with the shadcn plugin and the rule "shadcn/no-arbitrary-values": "error", as shown in the React ESLint setup.
3. Run `npx eslint .` and confirm it reports any existing arbitrary values.
4. Fix the reported files or add the Lint command to package.json as the Lint script.

### Prompt to paste into your agent

```text
Use the GitHub repo shadcn-ui/lint to set up the no-arbitrary-values rule in <project-path>. Follow the README ESLint setup for React, then run the lint command. Expected output: a list of arbitrary Tailwind values in the project, or zero errors. Verify that the rule reports a test class such as p-[13px] in one component file.
```

### Caveat

The README says Oxlint reads only the script blocks of Vue and Svelte files, not their templates, so template classes need ESLint.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/shadcn-ui-lint/block-arbitrary-tailwind-values/

## How to lock component styling with per-component contracts with Lint

Repo: [shadcn-ui/lint](https://github.com/shadcn-ui/lint) | Difficulty: Advanced | Time: 60 minutes | Basis: From the README

Let pages change some styles on a component while keeping its size, shape, and font fixed.

**Who it is for:** A design system owner who ships shared components and wants pages and agents to change only the parts the design allows.

**The problem:** Shared components get restyled in ways the design did not intend, and typed props alone cannot express rules like allow margin but keep padding.

**The outcome:** Each component gets its own allow and deny rules in config, and violations show a message that explains the allowed options.

### Steps

1. Run `npm install -D @shadcn/lint eslint @typescript-eslint/parser` in the project.
2. In eslint.config.mjs, set "shadcn/no-restyle" with allow: ["layout"] and a contracts entry such as { pattern: "^Button$", allow: ["w-full", "mt-*", "mb-*"] }.
3. Add a custom message under message, such as spacing: "Use the size prop instead of padding.", so the error tells the agent what to do.
4. Run `npx eslint .` and check that an allowed class passes while a disallowed class such as a custom padding is reported.

### Prompt to paste into your agent

```text
Use the GitHub repo shadcn-ui/lint to add a no-restyle contract for <component-name> in <project-path>. Write the contract in the ESLint config, then run the lint command. Expected output: the contract allows the listed classes and reports the others. Verify that one disallowed class on <component-name> produces the custom message from the config.
```

### Caveat

The README examples use component names such as Button and CardTitle, so contract patterns must match the names in your own code.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/shadcn-ui-lint/lock-component-styling-with-contracts/

## How to make coding agents fix Lint errors before finishing with Lint

Repo: [shadcn-ui/lint](https://github.com/shadcn-ui/lint) | Difficulty: Intermediate | Time: 30 minutes | Basis: From the README

Give the agent a Lint command and an instruction to run it and fix errors after every change.

**Who it is for:** A developer who hands UI tasks to a coding agent and wants the agent to check its own work before reporting done.

**The problem:** Agents report tasks complete without checking their Tailwind usage against the design system, so errors reach review.

**The outcome:** The project has a Lint script, and the agent guidance file tells the agent to run it and fix all errors after each change.

### Steps

1. Run `npm install -D @shadcn/lint eslint @typescript-eslint/parser` in the project, or `npm install -D @shadcn/lint oxlint` if you use Oxlint.
2. Add `eslint .` or `oxlint` as the Lint script in package.json.
3. Add this line to AGENTS.md: After making changes, run `npm run lint` and fix all errors.
4. Run `npm run lint` once to confirm the script works before giving the agent a task.

### Prompt to paste into your agent

```text
Use the GitHub repo shadcn-ui/lint to set up the lint loop in <project-path>. Install the package, add the lint script, and add the README instruction to AGENTS.md. Expected output: npm run lint exits cleanly on the current code. Verify that a deliberate arbitrary value in one file makes the command report an error.
```

### Caveat

The README reports eval results across many agent runs, but those results come from the authors' own tests and are not a guarantee for every project.

Disclaimer: Third-party repos we don't own or vouch for. AI-generated use cases can be wrong: review everything and run at your own risk. Full text: https://dedupedai.com/disclaimer/

URL: https://dedupedai.com/use-cases/shadcn-ui-lint/make-agents-fix-lint-errors-first/