Tailwind Design System skill

O que ela faz

Ensina o Claude a montar um design system no Tailwind CSS v4, que se configura dentro do próprio CSS com @theme, sem o arquivo tailwind.config. Cores, cantos e animações viram tokens com nome de função (fundo, primária, borda, destrutiva), e as cores usam OKLCH, que acompanha melhor como o olho enxerga cor.

Já vem com o tema claro e o escuro prontos pra adaptar e com uma tabela do que mudou do v3 pro v4, útil pra migrar um projeto antigo. Organiza tudo em camadas: token da marca, token de função e token do componente, e cada componente em base, variante, tamanho e estado.

Os exemplos mais longos ficam num arquivo de referência: componentes com variantes usando CVA, componentes compostos em React 19, formulários e grade responsiva.

Nas palavras de quem fez

Quando usar

• Começar a biblioteca de componentes de um site ou app novo
• Padronizar botões, cards e cores que estão cada um de um jeito
• Migrar um projeto do Tailwind v3 pro v4
• Colocar modo escuro no site
• Trocar as cores da marca e ver o site todo mudar junto

Depois de instalar, é só pedir assim

• Monta o design system do site no Tailwind v4 com as cores da minha marca: azul-marinho e laranja
• Migra esse projeto do Tailwind v3 pro v4 e passa as cores do tailwind.config pro @theme
• Cria um botão com as variantes primária, secundária e perigo, em três tamanhos

Segurança

Gen Agent Trust Hub, Socket e Snyk leem o código da skill atrás de comando perigoso, dado vazando e instrução escondida. Alerta não é reprovação: quer dizer que vale ler o que a skill faz antes de instalar.

• Gen Agent Trust HubPassou
• SocketPassou
• SnykPassou

Perguntas