tailwind-design-system
Construir sistemas de design Tailwind
Sistemas de design frequentemente derivam sem tokens e padrões claros. Esta habilidade fornece estruturas Tailwind para padronizar componentes, temas e layouts responsivos em toda a sua base de código.
Baixar o ZIP da skill
Upload no Claude
Vá em Configurações → Capacidades → Skills → Upload skill
Ative e comece a usar
Testar
A utilizar "tailwind-design-system". Configurar um sistema de design Tailwind com tokens e um padrão de botão
Resultado esperado:
- Definido tokens de cores semânticas e variáveis de raio para temas claro e escuro
- Delimitado um botão CVA com variantes, tamanhos e comportamento de anel de foco
- Incluído notas de acessibilidade para navegação por teclado e estados de erro
A utilizar "tailwind-design-system". Criar uma implementação de modo escuro para um aplicativo React
Resultado esperado:
- Fornecido ThemeProvider usando variáveis CSS e localStorage
- Mostrado componente de alternância de tema com troca de ícone
- Incluído detecção de preferência do sistema com matchMedia
A utilizar "tailwind-design-system". Construir componentes de formulário acessíveis com estados de erro
Resultado esperado:
- Criado componente Input com aria-invalid e mensagens de erro
- Adicionado componente Label com associação htmlFor adequada
- Incluído utilitários de anel de foco para navegação por teclado
Auditoria de Segurança
SeguroPure documentation skill with no executable code. Contains only markdown guidance and code examples for Tailwind CSS design systems. The static analyzer's 100/100 risk score is a false positive caused by misinterpreting Tailwind CSS opacity syntax (e.g., bg-primary/90) as cryptographic algorithms, and TypeScript template literals as shell backticks. The skill-report.json already contains a completed security audit confirming this skill is safe.
Fatores de risco
🌐 Acesso à rede (5)
⚙️ Comandos externos (25)
Pontuação de qualidade
O Que Você Pode Construir
Padronizar componentes da equipe
Criar tokens Tailwind compartilhados e componentes base para alinhar várias equipes de produtos.
Construir arquitetura de tokens
Mapear cores da marca para tokens semânticos e conectá-los à configuração do tema Tailwind.
Enviar layouts responsivos
Usar padrões de grid e container para dimensionar layouts consistentemente entre pontos de quebra.
Tente Estes Prompts
Criar uma configuração de tokens Tailwind com cores semânticas e variáveis de raio para temas claro e escuro.
Projetar variantes de botão CVA com tamanhos, estados e notas de acessibilidade para uma biblioteca de componentes compartilhada.
Fornecer padrões de componentes de entrada e rótulo com tratamento de erros e orientação ARIA.
Definir um padrão de utilitário de container e grid responsivo para cards de produto entre pontos de quebra.
Melhores Práticas
- Usar tokens semânticos e mapeá-los para variáveis CSS para theming em tempo de execução
- Documentar variantes de componentes e estados padrão claramente para consumo da equipe
- Testar estados de foco e navegação por teclado em todos os componentes interativos
Evitar
- Codificar cores de marca diretamente em classes de componentes em vez de usar tokens
- Pular definições e testes de tokens de modo escuro
- Usar valores arbitrários como bg-[#123456] em vez de estender o tema