mcpField
S
specsfy-specialist-tailwind-css

specsfy-specialist-tailwind-css

github.com/promovawebDesign & UI87314 installsUpdated 1w ago
Repository

About specsfy-specialist-tailwind-css

A Tailwind CSS skill for developers building responsive interfaces. It guides work from design constraints through accessibility and production-build checks.

Key features

  1. 01Responsive, mobile-first layout
  2. 02Reuse semantic design tokens
  3. 03Manage variants and dynamic classes
  4. 04Account for themes and motion preferences
  5. 05Validate browsers, zoom, and content extremes

Use cases

  1. 01Implement a responsive Tailwind component
  2. 02Review accessibility and interactive states
  3. 03Diagnose missing generated CSS
  4. 04Check layouts at high zoom and narrow widths

Install

Copy the command and run it in a terminal.

$npx skills add https://github.com/promovaweb/specsfy --skill specsfy-specialist-tailwind-css

After installing, type/specsfy-specialist-tailwind-cssin Claude Code to confirm it loaded.

Bundled filesagents/openai.yamlreferences/standards.md

Details

From the project README

Tailwind CSS

Fluxo

  1. Confirmar versão, integração, fonte de tokens e componentes existentes.
  2. Traduzir layout e estados em constraints responsivas.
  3. Reutilizar tokens semânticos antes de valores arbitrários.
  4. Implementar mobile-first, estados interativos e preferências do usuário.
  5. Extrair componente quando houver unidade semântica, não só repetição visual.
  6. Revisar conflitos, classes dinâmicas e CSS gerado.
  7. Validar navegadores, temas, zoom e tamanhos extremos.

Padrões

  • Manter cor, spacing, radius e tipografia em tokens com nomes de intenção.
  • Usar variantes para estado; não esconder comportamento em concatenação opaca.
  • Evitar @apply como substituto geral de componentes.
  • Garantir que classes construídas dinamicamente sejam detectáveis pelo build.
  • Tratar dark mode, reduced motion, contrast e forced colors conscientemente.
  • Preferir layout fluido e container queries quando o componente depende do contêiner.
  • Não multiplicar valores arbitrários sem justificar novo token.

Validação

  • Build de produção e inspeção de estilos ausentes.
  • Viewports, containers, zoom 200/400%, tema e conteúdo longo.
  • Hover, focus-visible, disabled, loading, error e selected.
  • Contraste e preferência por movimento reduzido.

Leia references/standards.md para tokens, responsividade, variantes, acessibilidade e migração.

Comments

Markdown supported