tailwind-design-system
Permite que seu agente crie sistemas de design prontos para uso com Tailwind CSS. Ele define estilos, componentes e padrões visuais. Garante consistência e acessibilidade.
O que ela faz
Esta ferramenta ajuda a criar sistemas de design prontos para produção usando Tailwind CSS. Ela organiza estilos, variações de componentes, adaptação a diferentes tamanhos de tela e acessibilidade.
Quando usar
- ✓Criar uma biblioteca de componentes com Tailwind CSS.
- ✓Implementar temas e cores personalizadas.
- ✓Construir componentes que funcionam bem em qualquer tela e para todos os usuários.
Exemplo do que pedir para a IA
“Crie um sistema de design para um site de e-commerce usando Tailwind CSS, com foco em temas escuros e claros.”
Quer saber mais? Abra as seções abaixo.
Como usar
O jeito mais fácil: copie a mensagem abaixo e cole no Claude, ChatGPT, Cursor ou outra IA. Ela lê a skill e segue as instruções.
Link da skill
Mensagem pronta para colar
Como funciona
A IA usa as instruções da habilidade para entender seu pedido e aplicar as melhores práticas do Tailwind CSS. Ela organiza os estilos e componentes para garantir que tudo funcione bem e seja acessível.
Instalação
Jeito mais fácil: copie o link da skill e cole no Claude, ChatGPT ou Cursor pedindo para seguir as instruções.
No terminal (Claude Code, Codex, Cursor), na pasta do projeto:
npx skills add sickn33/agentic-awesome-skills --skill tailwind-design-systemOu baixe só o arquivo:
curl -L https://raw.githubusercontent.com/sickn33/agentic-awesome-skills/main/plugins/agentic-awesome-skills-claude/skills/tailwind-design-system/SKILL.md -o SKILL.mdConteúdo técnico (SKILL.md)
Tradução do texto original do autor no GitHub. Os comandos e códigos estão como no original.
Sistema de Design Tailwind
Crie sistemas de design prontos para produção com Tailwind CSS, incluindo tokens de design, variantes de componentes, padrões responsivos e acessibilidade.
Use esta habilidade quando
- Criar uma biblioteca de componentes com Tailwind
- Implementar tokens de design e temas
- Construir componentes responsivos e acessíveis
- Padronizar padrões de UI em uma base de código
- Migrar para ou estender o Tailwind CSS
- Configurar modo escuro e esquemas de cores
Não use esta habilidade quando
- A tarefa não estiver relacionada ao sistema de design Tailwind
- Você precisar de um domínio ou ferramenta diferente fora deste escopo
Instruções
- Clarifique objetivos, restrições e entradas necessárias.
- Aplique as melhores práticas relevantes e valide os resultados.
- Forneça etapas acionáveis e verificação.
- Se exemplos detalhados forem necessários, abra
resources/implementation-playbook.md.
Recursos
resources/implementation-playbook.mdpara padrões e exemplos detalhados.
Limitações
- Use esta habilidade apenas quando a tarefa corresponder claramente ao escopo descrito acima.
- Não trate a saída como substituta para validação específica do ambiente, testes ou revisão de especialistas.
- Pare e peça esclarecimentos se as entradas necessárias, permissões, limites de segurança ou critérios de sucesso estiverem ausentes.
Perguntas frequentes
O que são 'design tokens'?
São os blocos de construção básicos do seu design, como cores, fontes e espaçamentos, definidos de forma centralizada para manter a consistência.
O que são 'component variants'?
São diferentes versões de um mesmo componente, como um botão que pode ser primário, secundário, pequeno ou grande.
O que é 'responsive patterns'?
São as formas como o design se adapta a diferentes tamanhos de tela, garantindo que tudo fique bom em celulares, tablets e computadores.
Detalhes
Descrição original do autor
Build production-ready design systems with Tailwind CSS, including design tokens, component variants, responsive patterns, and accessibility.
Popularidade
- Estrelas no GitHub
- 48 mil
- Posição no ranking
- #4307
- Licença
- MIT
- Atualizada em
- 15/10/2026
Comentários
- …
Mais skills deste repositório
00-andruia-consultant
Ajuda seu agente a iniciar ou melhorar projetos de IA. Ele analisa código, sugere ferramentas e cria planos de ação em espanhol.
sickn33/agentic-awesome-skills
007
Faz seu agente realizar auditorias de segurança e modelagem de ameaças. É útil para proteger projetos contra ataques e vulnerabilidades.
sickn33/agentic-awesome-skills
10-andruia-skill-smith
Ajuda seu agente a criar ou melhorar ferramentas de IA. Ele define como as ferramentas funcionam, escreve a documentação e valida a estrutura.
sickn33/agentic-awesome-skills
20-andruia-niche-intelligence
Faz seu agente criar um resumo sobre um setor específico. É útil para entender o contexto, regras, padrões de uso e riscos de um projeto, usando fontes confiáveis.
sickn33/agentic-awesome-skills
Skills parecidas
brand-discovery
Ajuda a definir a identidade de uma marca através de entrevistas estruturadas. Cria um guia completo com o propósito, público e personalidade da marca.
affaan-m/ECC
brand-voice
Cria um perfil de escrita baseado em textos reais da marca. Garante que o conteúdo e as comunicações mantenham um estilo consistente e autêntico.
affaan-m/ECC
brand-guidelines
Faz seu agente aplicar as cores e o estilo visual da Anthropic em materiais. É útil para manter a identidade visual da empresa em diferentes projetos.
anthropics/skills