Repolode
Enviar
shadcn-ui

shadcn-ui/lint

Um linter pensado para agentes, voltado a design systems com Tailwind: define regras de estilo permitidas e sugere correções com base nos seus componentes e no seu tema.

Ver no GitHub
Estrelas
3,239
Forks
69
Issues abertas
13
Último commit
anteontem

O que é?

@shadcn/lint é um linter para projetos com Tailwind v4 que aplica regras de design system ao código de UI. Você define quais estilos são permitidos, por exemplo, restringindo overrides de className em um Button, bloqueando valores arbitrários como p-[13px] ou rejeitando cores diretas. Quando uma regra é violada, o erro explica o problema e sugere uma alternativa baseada nos componentes, variants e no tema do seu projeto.

Ele funciona como plugin do ESLint ou do Oxlint e oferece suporte a React, Vue e Svelte. Não é necessário usar shadcn/ui: o linter também funciona com componentes e temas Tailwind personalizados e consegue identificar imports de componentes por prefixos, padrões regex ou um arquivo components.json.

As regras podem ser aplicadas a componentes específicos por meio de contracts, e mensagens personalizadas com placeholders como {{sizes}} permitem indicar aos agentes exatamente qual tamanho, variant ou arquivo de tema usar. Depois de fazer alterações, os agentes executam o comando de lint para conferir o resultado.

Recursos principais

  • 01Restringe overrides de className em componentes por meio de contracts específicos para cada componente.
  • 02Bloqueia valores arbitrários e cores diretas, priorizando tokens do tema.
  • 03Sugere correções com base nos tamanhos, variants e arquivos de tema do seu projeto.
  • 04Funciona com ESLint e Oxlint em projetos React, Vue e Svelte.
  • 05Não exige shadcn/ui e consegue identificar imports de componentes personalizados.

Casos de uso

  • Evitar que agentes de programação com IA mudem o estilo de componentes de UI compartilhados em uma base de código Tailwind.
  • Aplicar espaçamentos e cores baseados no tema em todo o design system da equipe.
  • Aplicar regras de design a pacotes de componentes de terceiros ou de monorepos sem fazer fork deles.

Início rápido

  1. 1

    Instale o pacote e o ESLint com npm

    npm install -D @shadcn/lint eslint @typescript-eslint/parser
  2. 2

    Crie o eslint.config.mjs com o plugin e a regra (consulte o README)

  3. 3

    Execute o linter

    npx eslint .

Antes de usar

  • Funciona apenas com projetos Tailwind v4.
  • O Oxlint lê apenas os blocos script de arquivos Vue e Svelte, não a marcação.
  • Requer Node.js 20.19 ou posterior.

Tópicos

#linter#tailwindcss#design-system#ai-agents#eslint#oxlint#react#vue#agents#ai

Perguntas frequentes

O que é lint?
Um linter pensado para agentes, voltado a design systems com Tailwind: define regras de estilo permitidas e sugere correções com base nos seus componentes e no seu tema. @shadcn/lint é um linter para projetos com Tailwind v4 que aplica regras de design system ao código de UI. Você define quais estilos são permitidos, por exemplo, restringindo overrides de className em um Button, bloqueando valores arbitrários como p-[13px] ou rejeitando cores diretas. Quando uma regra é violada, o erro explica o problema e sugere uma alternativa baseada nos componentes, variants e no tema do seu projeto.
lint é gratuito? Qual é a licença?
lint é open source sob a licença MIT. Confira os termos da licença antes de usá-lo em produtos comerciais.
lint ainda é mantido?
Manutenção ativa. O último commit de lint foi em 19 de out. de 2026.
Para que posso usar lint?
Evitar que agentes de programação com IA mudem o estilo de componentes de UI compartilhados em uma base de código Tailwind. Aplicar espaçamentos e cores baseados no tema em todo o design system da equipe. Aplicar regras de design a pacotes de componentes de terceiros ou de monorepos sem fazer fork deles.
Como instalar lint?
Instale o pacote e o ESLint com npm: npm install -D @shadcn/lint eslint @typescript-eslint/parser Crie o eslint.config.mjs com o plugin e a regra (consulte o README) Execute o linter: npx eslint .
Onde consigo lint?
O código-fonte e as instruções de instalação estão no GitHub: https://github.com/shadcn-ui/lint

Resumo gerado por IA a partir do README do projeto. As estatísticas do GitHub são atualizadas diariamente.

Projetos relacionados