Shadcn Lint: um linter em que violações do design system indicam ao agent qual variante usar
Autoria: Github Awesome · Assistir no YouTube
Vídeo de autoria do canal indicado, não da IANIA; todos os direitos pertencem ao criador. Transcrição, resumo e tradução gerados automaticamente; o conteúdo no idioma original é preservado na versão em idioma original.
Idioma original: inglês
Vídeo original: Shadcn Lint: a linter where a design-system violation tells the agent which variant to use instead · Canal: Github Awesome · 00:00 · Assistir no YouTube
Tópicos: Agentes de IA, Engenharia de software com IA, Ferramentas de desenvolvimento com IA
Shadcn Lint transforma regras de design do Tailwind em verificações que coding agents podem executar. Você define quais estilos de um componente podem ser alterados, e as violações explicam o problema e sugerem alternativas do design system existente. Por exemplo, um botão com padding proibido pode indicar ao agent as variantes de tamanho disponíveis. A ferramenta funciona com ESLint ou oxlint em projetos Tailwind v4, mesmo sem shadcn/ui.
Pontos-chave
Seção intitulada “Pontos-chave”- Converte regras de design do Tailwind em verificações executáveis por coding agents.
- Permite definir quais estilos cada componente pode alterar.
- Explica as violações e sugere alternativas já existentes no design system.
- Pode direcionar o agent a uma variante de tamanho quando um botão usa padding proibido.
- Funciona com ESLint ou oxlint em projetos Tailwind v4.
- Não exige o uso de shadcn/ui.
Capítulos
Seção intitulada “Capítulos”| Início | Capítulo | Resumo |
|---|---|---|
| 00:00 | Regras de design como verificações | Shadcn Lint transforma regras do Tailwind em verificações que coding agents podem executar. |
| 00:00 | Violações e variantes alternativas | As violações explicam o problema e sugerem opções do design system, como variantes de tamanho para botões. |
| 00:00 | Compatibilidade | A ferramenta funciona com ESLint ou oxlint em projetos Tailwind v4, sem exigir shadcn/ui. |
Citações
Seção intitulada “Citações”Shadcn Lint transforma suas regras de design do Tailwind em verificações que coding agents podem executar. — 00:00
As violações explicam o que deu errado e sugerem alternativas do seu design system. — 00:00
Um botão com padding proibido pode indicar ao agent as variantes de tamanho. — 00:00
Conceitos e entidades
Seção intitulada “Conceitos e entidades”- Shadcn Lint (ferramenta): Linter que verifica regras de design do Tailwind e sugere alternativas do design system para violações.
- Tailwind (ferramenta): Framework de CSS cujas regras de design podem ser verificadas pelo Shadcn Lint.
- ESLint (ferramenta): Linter com o qual o Shadcn Lint pode funcionar em projetos Tailwind v4.
- Oxlint (ferramenta): Linter compatível com o Shadcn Lint em projetos Tailwind v4.
- shadcn/ui (ferramenta): Biblioteca de interface cuja utilização não é necessária para usar o Shadcn Lint.
- design system (conceito): Conjunto de estilos e variantes existentes que serve de referência para as sugestões do linter.
Tradução completa (pt-BR)
Seção intitulada “Tradução completa (pt-BR)”00:00 O Shadcn Lint transforma suas regras de design do Tailwind em verificações que agentes de programação podem executar. Você define quais estilos um componente pode alterar; então, as violações explicam o que deu errado e sugerem alternativas do seu design system atual. Um botão com espaçamento interno proibido pode indicar ao agent suas variantes de tamanho. Ele funciona com ESLint ou oxlint em projetos com Tailwind v4, mesmo que você não use shadcn/ui.
Transcrição original
[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.