Shadcn Lint: a linter where a design-system violation tells the agent which variant to use instead
Read the Portuguese translation →
Author: Github Awesome · Watch on YouTube
Video authored by the channel shown, not by IANIA; all rights belong to the creator. Transcript and summary generated automatically; the original-language content is preserved.
Original language: English
Original video: Shadcn Lint: a linter where a design-system violation tells the agent which variant to use instead · Channel: Github Awesome · 00:00 · Watch on YouTube
Topics: AI agents, Software engineering with AI, AI developer tools
Summary
Section titled “Summary”Shadcn Lint turns Tailwind design rules into checks that coding agents can run. It lets you define which styles a component can change, then reports violations and suggests alternatives from your existing design system. For example, forbidden button padding can prompt the agent to use a size variant instead. It works with ESLint or oxlint in Tailwind v4 projects, with or without shadcn/ui.
Key points
Section titled “Key points”- Shadcn Lint makes Tailwind design rules available as checks for coding agents.
- You define which styles a component can change.
- Violations explain what went wrong.
- The linter suggests alternatives from the existing design system.
- A button with forbidden padding can be directed to use a size variant.
- It works with ESLint or oxlint.
- It supports Tailwind v4 projects.
- Using shadcn/ui is not required.
Chapters
Section titled “Chapters”| Start | Chapter | Summary |
|---|---|---|
| 00:00 | Design rules as checks | Shadcn Lint turns Tailwind design rules into checks coding agents can run. |
| 00:00 | Violations and alternatives | The linter explains violations and suggests alternatives from the existing design system. |
| 00:00 | Tooling and compatibility | It works with ESLint or oxlint on Tailwind v4 projects, whether or not they use shadcn/ui. |
Quotes
Section titled “Quotes”Shadcn Lint turns your Tailwind design rules into checks coding agents can run. — 00:00
You define which styles a component can change — 00:00
violations explain what went wrong and suggest alternatives from your existing design system. — 00:00
It works with ESLint or oxlint on Tailwind v4 projects, even if you don’t use shadcn/ui. — 00:00
Concepts and entities
Section titled “Concepts and entities”Shadcn Lint, Tailwind, ESLint, Oxlint, shadcn/ui, design system
Full transcript (original language)
Section titled “Full transcript (original language)”00:00 Shadcn Lint turns your Tailwind design rules into checks coding agents can run. You define which styles a component can change, then violations explain what went wrong and suggest alternatives from your existing design system. A button with forbidden padding can point the agent toward its size variants instead. It works with ESLint or oxlint on Tailwind v4 projects, even if you don’t use shadcn/ui.