Crie Interfaces Responsivas com Tailwind CSS
Projetos Tailwind podem se tornar inconsistentes entre componentes e breakpoints. Esta skill orienta classes utilitárias responsivas, configuração de tema, modo escuro e verificações de acessibilidade.
Copie esta solicitação para o seu Agente. Ela inclui a página canônica do Skill e o manifesto.
Review the Skillstore skill "tailwind-css" from https://skillstore.io/skills/awais68-tailwind-css.md and its manifest at https://skillstore.io/api/skills/awais68-tailwind-css/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.Seu Agente ainda deve apresentar o plano e solicitar qualquer confirmação exigida pela política de segurança.
Use estes links quando um agente de IA, crawler ou script precisar de contexto limpo em vez de ler a página completa.
Usando "tailwind-css". Torne este cartão de KPI responsivo e pronto para modo escuro.
Resultado esperado:
O cartão deve usar largura total no mobile, adicionar padding maior em tamanhos de tablet e usar pares de cores de superfície claras e escuras.
Usando "tailwind-css". Revise minhas classes de formulário Tailwind quanto à acessibilidade.
Resultado esperado:
A revisão aponta estilos de foco ausentes, alvos de toque abaixo de 44 pixels e pares de cores que precisam de validação de contraste.
Usando "tailwind-css". Planeje um tema Tailwind para um dashboard de produto.
Resultado esperado:
O resultado define grupos de cores semânticas, regras de espaçamento, escolhas de fontes, estratégia de modo escuro e orientação para variantes reutilizáveis.
All 55 static findings are false positives. The flagged backticks are Markdown fences or inline Tailwind examples, the URLs are reference links, and the system reconnaissance matches are responsive layout text. No evidence found of command execution, data exfiltration, prompt injection, or malicious intent.
Compartilhe o relatório de avaliação versionado, o badge neutro, o cartão incorporável e as citações. A Skillstore apresenta evidências sem decidir se este Skill é seguro.
https://skillstore.io/skills/awais68-tailwind-css/audits/8?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/awais68-tailwind-css?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/awais68-tailwind-css?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/awais68-tailwind-css/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/awais68-tailwind-css.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>Awais68. (2026). tailwind-css security audit report (audit version 8) [Author version unspecified]. Skillstore. https://skillstore.io/skills/awais68-tailwind-css/audits/8@techreport{awais68-awais68-tailwind-css-2026,
author = {Awais68},
title = {tailwind-css security audit report (audit version 8)},
institution = {Skillstore},
year = {2026},
number = {8},
url = {https://skillstore.io/skills/awais68-tailwind-css/audits/8},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "tailwind-css security audit report (audit version 8)"
version: "unspecified"
type: report
authors:
- name: "Awais68"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/awais68-tailwind-css/audits/8"
identifiers:
- type: other
value: "skillstore:awais68-tailwind-css:audit:8"
description: "Skillstore immutable audit report identifier"
Transforme um componente React básico em um componente Tailwind mobile-first com breakpoints claros e estilos de estado.
Planeje tokens de tema do Tailwind para cores, espaçamento, fontes e modo escuro sem substituir o tema padrão.
Verifique classes Tailwind quanto a acessibilidade, estados de foco, alvos de toque, modo escuro e prontidão para produção.
Estilize este componente com Tailwind CSS. Comece com estilos mobile, adicione espaçamento claro e inclua estados de foco e hover.
Converta este layout para um layout Tailwind mobile-first. Use breakpoints sm, md, lg e xl apenas onde o design precisar deles.
Projete extensões de tema do Tailwind para esta interface. Inclua cores semânticas, comportamento de modo escuro, escolhas de espaçamento e variantes de componentes reutilizáveis.
Revise este dashboard Tailwind quanto a comportamento responsivo, acessibilidade, modo escuro, consistência de classes e riscos de desempenho em produção.
Autor
Awais68Licença
MIT
Revisão da Skillstore
r1
Aviso de versão
O autor não declarou uma versão.
Repositório
https://github.com/Awais68/hackathon-2-phase-ii-full-stack-web-app/tree/main/.claude/skills/tailwind-cssReferência
c4231f0153ccd2a2ed62274c5a372bf8f2386d3f
Atualidade da manutenção
21/07/2026
Uso
9 downloads · 295 visualizações
Estrutura de arquivos
📄 SKILL.md
Crie Componentes React Tipados
O trabalho com componentes React frequentemente precisa de estrutura consistente, hooks, testes, stories e verificações de acessibilidade. Esta skill orienta Claude, Codex e Claude Code na direção de componentes React tipados e testáveis.
Implemente Autenticação Segura no Next.js
Trabalhos de autenticação são fáceis de especificar de forma insuficiente e difíceis de proteger. Esta skill orienta Claude, Codex e Claude Code por formulários, sessões, rotas protegidas e verificações de função.
Criar Clientes de API Tipados
Clientes de API precisam de autenticação, cache, validação e tratamento de erros consistentes. Esta skill orienta sobre TanStack Query, Axios, interceptadores JWT, parsing com Zod e comportamento offline.
Criar Camadas CRUD com SQLModel
Projetar modelos SQLModel e código CRUD pode ser lento quando há relacionamentos e sessões assíncronas envolvidas. Esta skill orienta Claude, Codex e Claude Code por modelos, consultas, relacionamentos e configuração de banco de dados.
Validar Dados com Pydantic e Zod
APIs e formulários frequentemente divergem quando regras de validação são copiadas entre camadas. Esta skill oferece a Claude, Codex e Claude Code padrões práticos para schemas compartilhados, erros claros e tratamento de entradas mais seguro.
Implementar Autenticação JWT no FastAPI
A autenticação JWT exige criação, validação e tratamento de claims de token com cuidado. Esta skill orienta implementações FastAPI para tokens de acesso, dependências, RBAC e configuração segura.
Crie interfaces shadcn/ui em Next.js
por Asmayaseen
Equipes React precisam de padrões de UI consistentes que funcionem com o Next.js moderno. Esta skill fornece orientação de configuração para shadcn/ui, exemplos de componentes, validação de formulários, tabelas, sidebars e padrões de modo escuro.
Recreate Screenshots as Working Interfaces
por uizze
Recreating a screenshot can introduce unwanted design changes and visible mismatches. This skill guides your agent to implement the reference and compare rendered results.
Implementar React View Transitions
por vercel-labs
React view transitions são fáceis de posicionar incorretamente, resultando em animações que falham silenciosamente ou geram ruído visual. Esta skill orienta as escolhas de animação para rotas, Suspense, listas e elementos compartilhados.
Crie Recursos SwiftUI Melhores
por avdlee
Projetos SwiftUI podem acumular APIs obsoletas, estado frágil e atualizações de visualização lentas. Esta skill oferece orientação focada para código SwiftUI moderno e sustentável.
Crie modelos de email em React com Resend
por resend
Criar modelos de email prontos para produção é difícil porque os clientes de email são diferentes. Esta skill orienta Claude, Codex e Claude Code no uso de componentes React Email, envio, estilização, localização e fluxos de trabalho do editor.
Melhorar práticas de Vue 3 com TypeScript
por hyf0
Projetos Vue com TypeScript frequentemente encontram erros confusos de templates, router e Volar. Esta habilidade fornece correções direcionadas de Vue 3 para Codex, Claude e Claude Code.