tailwind-design-system

Visão Geral

O que é o tailwind-design-system?

O tailwind-design-system é uma skill prática para construir sistemas de design escaláveis e prontos para produção usando Tailwind CSS v4. Ele foca em configuração CSS-first, tokens de design, variantes de componentes, padrões responsivos e acessibilidade. Esta skill é destinada a desenvolvedores frontend, designers de UI e equipes que buscam padronizar seus padrões de interface ou migrar do Tailwind v3 para o v4.

Quem deve usar esta skill?

• Equipes frontend criando bibliotecas de componentes com Tailwind CSS v4
• Desenvolvedores implementando tokens de design e theming
• Designers de UI construindo componentes responsivos e acessíveis
• Projetos que padronizam padrões de UI em múltiplas bases de código
• Equipes migrando do Tailwind v3 para o v4

Quais problemas ela resolve?

• Simplifica a configuração de sistemas de design escaláveis
• Fornece orientações sobre padrões específicos do v4 e migração
• Ajuda a padronizar componentes de UI e tokens de design
• Suporta melhores práticas de acessibilidade e design responsivo

Como Usar

Passos para Instalação

1. Instale o tailwind-design-system usando:

   npx skills add https://github.com/wshobson/agents --skill tailwind-design-system
   

2. Comece revisando o arquivo SKILL.md para entender o fluxo de trabalho e conceitos principais.
3. Explore os arquivos de suporte:
   • README.md para uso geral
   • AGENTS.md para orientações específicas de agentes
   • metadata.json para detalhes de configuração
   • references/advanced-patterns.md para padrões avançados do Tailwind v4

Arquivos e Pastas Principais

• SKILL.md: Fluxo de trabalho principal e visão geral
• references/advanced-patterns.md: Uso avançado, incluindo animações CSS nativas, modo escuro, utilitários customizados e dicas de migração
• references/: Guias e padrões adicionais

Adaptando ao Seu Projeto

• Use a skill como modelo para seu próprio repositório e ferramentas
• Personalize tokens de design, variantes de componentes e padrões responsivos para atender às necessidades da sua UI
• Consulte padrões avançados para implementar animações e recursos de acessibilidade

Exemplo: Padrões Avançados do Tailwind v4

• Aprenda a usar animações CSS nativas com @starting-style
• Implemente modo escuro usando variantes CSS customizadas
• Construa diálogos e popovers acessíveis com React e Radix UI

Perguntas Frequentes

O tailwind-design-system é compatível com Tailwind v3?

Não, esta skill é otimizada para Tailwind CSS v4. Para projetos v3, consulte o guia oficial de atualização.

Quais os principais benefícios de usar o tailwind-design-system?

• Acelera a criação de sistemas de design de UI escaláveis e consistentes
• Oferece padrões atualizados para Tailwind v4, incluindo theming CSS-first e design responsivo
• Fornece exemplos avançados para animações, acessibilidade e modo escuro

Onde encontro exemplos de uso avançado?

Confira o arquivo references/advanced-patterns.md para amostras de código detalhadas e listas de verificação para migração.

Como posso visualizar todos os recursos disponíveis?

Abra a aba Files para inspecionar a árvore completa de arquivos, incluindo referências aninhadas e scripts auxiliares. Isso ajuda a entender a estrutura da skill e adaptá-la ao seu fluxo de trabalho.

Quando o tailwind-design-system não é indicado?

Se seu projeto usa outro framework CSS ou não está pronto para migrar para Tailwind v4, esta skill pode não ser adequada. Ela é focada em padrões e fluxos específicos do Tailwind v4.