Tailwind Best Practices skill

O que ela faz

É a skill que o time do Mastra escreveu pro próprio repositório: vale pras pastas packages/playground-ui e packages/playground. Ela entra quando o Claude escreve, revisa ou refatora estilo com Tailwind nessas telas.

São cinco regras em três grupos, por ordem de impacto: usar os componentes que já existem no design system e não criar componente novo; usar só os tokens do tailwind.config.ts e nunca alterá-los; não usar valor arbitrário do Tailwind (fora altura e largura) nem sobrescrever o estilo dos componentes pelo className.

Cada regra tem um arquivo próprio com explicação e exemplo, e o Claude carrega só o que precisa na hora, procurando por palavra-chave. O objetivo é evitar que cores e espaçamentos saiam do padrão a cada tela nova.

Nas palavras de quem fez

Quando usar

• Contribuir com código de tela no repositório do Mastra
• Revisar um PR de interface do Playground do Mastra
• Refatorar componentes do Playground sem fugir do design system
• Usar de modelo pra escrever as regras de Tailwind do seu projeto

Depois de instalar, é só pedir assim

• Revisa os estilos desse componente do playground-ui e aponta o que quebra as regras do design system
• Cria essa tela nova no Playground usando só componentes e tokens que já existem
• Troca os valores arbitrários de Tailwind desse componente por tokens do design system

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