스크립트
00:00:00O ShadCN acabou de lançar um linter para tentar resolver o maior problema do Tailwind hoje:
00:00:04sistemas de design. Com a ascensão dos agentes de IA, o Tailwind nunca teve uma boa forma de impor um,
00:00:09então você já deve ter notado que a IA às vezes adiciona estilos próprios onde você não queria.
00:00:13Essa é uma grande razão pela qual as pessoas recorreram a alternativas como o StarLex,
00:00:17mas agora o ShadCN tem uma solução para isso. É um linter voltado para agentes, feito para sistemas de design
00:00:21do Tailwind. Vamos direto ao ponto e ver o que ele faz.
00:00:29Vamos começar com o que esse linter realmente faz. No Tailwind, o nome de uma classe pode ser uma string,
00:00:34o TypeScript não impõe nada além disso, o que significa que você pode colocar um espaçamento de
00:00:38sobreposição num botão que controla seu próprio espaçamento. Você também pode adicionar uma cor aleatória como background
00:00:43pink 500 a um componente que já usa uma cor do tema, ou simplesmente usar um valor arbitrário de espaçamento,
00:00:48como 13 pixels, quando seu sistema de design já tem uma escala de espaçamento de 12 a 16.
00:00:53Atualmente, nada disso causa erros na sua base de código, e só é detectado se você
00:00:58revisar o código manualmente ou adicionar várias regras em um arquivo markdown para que outro
00:01:02agente revise para você. Mas o markdown não é ótimo para impor regras. Ele não é tão rigoroso
00:01:07quanto um linter pode ser. O criador do ShadCN fez esse teste na prática. Ele criou 8 tarefas que tentavam o
00:01:12agente a sair do sistema, com comandos como "adicione um botão de exclusão rosa
00:01:16com cantos arredondados", "crie um card de estatísticas idêntico a este modelo, 13 pixels de espaçamento, 10 pixels de borda
00:01:22arredondada", ou "faça o card de preços se destacar bastante". Dá para ver aqui que todos os
00:01:27modelos violaram várias regras do sistema de design ao executar essas tarefas, mas quando usaram o
00:01:31linter, o número caiu para zero. Agora que sabemos que o linter funciona de fato, como o usamos?
00:01:36Bom, é um plugin para Oxlint ou ESLint, e funciona em qualquer projeto Tailwind V4. Você não precisa
00:01:41estar usando o ShadCN UI. Podemos começar com uma regra chamada "sem reestilização, mas permitindo layout". E isso
00:01:47significa essencialmente que as páginas podem posicionar um componente com margem, largura, flex
00:01:51e hidden, mas não podem reestilizá-los. Ou seja, não podem adicionar espaçamento, cor, tipografia,
00:01:56forma, efeitos ou animações. Se fizerem isso, gerará um erro como este: "P4 não é permitido no botão,
00:02:02o botão controla seu espaçamento, use um tamanho padrão ou margem aqui, ou um gap no elemento pai para dar espaço ao redor.
00:02:07Adicione um tamanho no componente apenas se o sistema de design solicitar explicitamente."
00:02:11O mais legal sobre essas mensagens de erro aqui é que algo como a lista de tamanhos não é
00:02:15definido pelo linter. Ele está lendo minha configuração do CVA no próprio componente do botão.
00:02:19Então, se eu adicionasse um tamanho extra, o erro reconheceria isso como uma opção. O mesmo vale para basicamente
00:02:24qualquer recurso do Tailwind que possa reestilizar. Se tentarmos adicionar uma cor aqui, ele nos diria que só podemos
00:02:29usar as definidas no componente. E, obviamente, a vantagem disso é que você recebe mensagens de erro
00:02:33muito boas, e um agente pode lê-las e entender como corrigi-las. Isso também pode economizar
00:02:37o uso de tokens, porque ele não precisa carregar todo o seu arquivo markdown do design
00:02:41para entender o que está correto. O linter simplesmente dá uma dica bem específica.
00:02:45Esse é o uso básico da nossa primeira regra, sem reestilização, mas há várias opções de personalização
00:02:50para adequá-la ao seu sistema de design, mas voltaremos a isso em um minuto. Primeiro, vamos
00:02:54dar uma olhada nas outras cinco regras, já que são seis no total. "Sem cores brutas" é uma regra
00:02:58para impedir que você digite coisas como background pink 500, ou use uma cor que não existe ou está
00:03:03com o nome errado. Precisa ser uma cor definida no tema, e novamente, isso ajudará o agente
00:03:08dizendo diretamente o que é permitido. Isso funciona até em SVGs, então se você tentar usar um preenchimento fixo
00:03:13em um caminho, você recebe um erro dizendo para usar currentcolor com uma classe de cor de texto. A seguir, temos "sem
00:03:18valores arbitrários", que faz exatamente o que promete. Algo como espaçamento com 13 pixels entre colchetes
00:03:24aqui, insere valores fixos e fora do padrão, use p3.25 em vez disso, pois é o mesmo valor na escala.
00:03:30Ou algo como rounded 10 pixels nesses colchetes faz você usar rounded large em vez disso,
00:03:35porque ele consegue ler meu padrão de arredondamento e saber que esse é o valor equivalente a 10 pixels.
00:03:40Um dos exemplos mais legais desta regra entendendo o seu sistema de design é: se você tentar
00:03:44definir uma cor de fundo aleatória, o erro mostra qual é o padrão do tema mais próximo,
00:03:49o que é um contexto excelente para o seu agente ter. O restante das regras é bem autoexplicativo.
00:03:54Há uma regra para impedir estilos inline, outra para evitar o uso de classes desconhecidas,
00:03:57e uma para impor classes estáticas. Esta é interessante porque o linter não consegue
00:04:02ver o que essa classe vai ser, já que é dinâmica naquela template literal,
00:04:06então essa regra incentiva você a mudar a forma como lida com elas,
00:04:09para que o linter ainda possa fazer seu trabalho com eficiência. Essas são as nossas seis regras de linter,
00:04:13mas, como mencionado antes, há muita personalização para fazê-lo realmente se adequar
00:04:16ao seu sistema de design. É aqui que você usaria contratos. São regras por componente
00:04:21correspondidas por uma regex no nome do componente. Neste exemplo, defini que podemos alterar a tipografia
00:04:25do título do card, mas não a família da fonte ou o peso, e o conteúdo do card pode alterar o espaçamento,
00:04:30mas não a tipografia. Assim, o texto grande neste título passa sem erros, e o espaçamento seis no
00:04:36conteúdo passa, mas tentar alterar o peso do título ainda gera um erro, como esperado.
00:04:41Outra ótima opção nessas configurações são as mensagens personalizadas. Cada regra e tipo de regra aceita uma
00:04:45mensagem com marcadores que são preenchidos com base no seu código real. Então, no contrato do meu botão aqui,
00:04:50defini a mensagem como: "defina a largura no container pai, não no botão, para o layout"; e também:
00:04:55"o botão controla seu espaçamento, use um tamanho de botão com um modelo para os tamanhos". Isso será preenchido
00:04:59para mim com base no meu próprio sistema de design. Você também pode definir uma nota global, para que cada aviso tenha esta
00:05:04mensagem anexada ao final. Isso é útil para dar algumas dicas ou contexto extras ao agente,
00:05:08talvez informando onde estão sua documentação ou diretrizes. Se você já tem um sistema
00:05:12de design implementado, pode dar um pouco de trabalho extra para começar a usar este
00:05:16linter, pois você precisa configurá-lo para seu sistema de design, mas ele parece flexível o suficiente para
00:05:20lidar com a maioria dos sistemas de design, e tenho certeza de que um agente de IA pode ajudar a começar. A última coisa sobre a qual quero
00:05:25falar é o que este linter não consegue fazer. Ele não consegue ver CSS puro, então se você tiver uma cor bruta no seu
00:05:30arquivo CSS global ou um @apply, ele não pode impor regras sobre isso. Ele também não consegue rastrear seletores pai
00:05:36até o filho, só rastreia valores de classe em um único nível dentro de um arquivo, e um novo padrão de tema está
00:05:40no sistema por definição, portanto, um agente que adicionar novas cores ao seu sistema de design para burlar
00:05:46a regra ainda passará sem erros. Isso significa que você ainda precisa revisar os padrões e as
00:05:50variantes que o agente está adicionando. O linter só pode verificar as regras, ele não pode decidir se um
00:05:54novo tom de laranja realmente pertence ao seu sistema de design. Cabe a você verificar, mas esperamos que este
00:05:59linter elimine parte desse trabalho extra. Outra coisa a se pensar se você estiver considerando
00:06:03usar isso é: a API do seu componente é rigorosa o suficiente para impor regras? Se o seu botão
00:06:08simplesmente aceita qualquer nome de classe e não tem variantes, não há nada para este linter sugerir.
00:06:13Portanto, o pré-requisito é que você realmente tenha um sistema de design e use variantes reais,
00:06:18o que, para ser justo, se você está usando o ShadCN UI, já tem, então a maioria das pessoas provavelmente não terá
00:06:22problemas. A última desvantagem é que, por enquanto, isso só está disponível no Oxlint e no ESLint, não há
00:06:27um plugin do Biome para isso ainda, mas há uma issue aberta no GitHub, então esperamos ver isso em breve.
00:06:31Então esse é o novo ShadCN Linter: são seis regras que ajudam você a impor seu sistema de design,
00:06:36o que é muito útil em uma era onde a IA está escrevendo a maior parte do código. Estou curioso para saber se isso resolve algum dos
00:06:41problemas que você enfrentou, ou se ainda está considerando mudar para algo como o StarLX.
00:06:45Me conte nos comentários abaixo e inscreva-se no canal. Como sempre, nos vemos no próximo vídeo.
커뮤니티 글
아직 글이 없습니다. 이 영상에 대한 첫 번째 글을 작성해 보세요!
이 영상에 대해 글쓰기