UI/UX Pro Max - Design Inteligente

Guia completo de design para aplicações web e mobile. Contém mais de 50 estilos, 97 paletas de cores, 57 combinações de fontes, 99 diretrizes de UX e 25 tipos de gráficos em 9 stacks de tecnologia. Banco de dados pesquisável com recomendações baseadas em prioridade.

Quando Usar

Consulte estas diretrizes quando:

• Estiver projetando novos componentes ou páginas de UI
• Escolhendo paletas de cores e tipografia
• Revisando código para problemas de UX
• Construindo landing pages ou dashboards
• Implementando requisitos de acessibilidade

Categorias de Regras por Prioridade

Referência Rápida

1. Acessibilidade (CRÍTICO)

• color-contrast - Mínimo de 4.5:1 para texto normal
• focus-states - Anéis de foco visíveis em elementos interativos
• alt-text - Texto alternativo descritivo para imagens significativas
• aria-labels - aria-label para botões apenas com ícone
• keyboard-nav - Ordem de tabulação corresponde à ordem visual
• form-labels - Use label com atributo for

2. Toque & Interação (CRÍTICO)

• touch-target-size - Alvos de toque mínimos de 44x44px
• hover-vs-tap - Use clique/toque para interações primárias
• loading-buttons - Desabilite o botão durante operações assíncronas
• error-feedback - Mensagens de erro claras perto do problema
• cursor-pointer - Adicione cursor-pointer a elementos clicáveis

3. Performance (ALTO)

• image-optimization - Use WebP, srcset, carregamento preguiçoso (lazy loading)
• reduced-motion - Verifique prefers-reduced-motion
• content-jumping - Reserve espaço para conteúdo assíncrono

4. Layout & Responsivo (ALTO)

• viewport-meta - width=device-width initial-scale=1
• readable-font-size - Mínimo de 16px de texto no corpo em mobile
• horizontal-scroll - Garanta que o conteúdo caiba na largura da viewport
• z-index-management - Defina escala de z-index (10, 20, 30, 50)

5. Tipografia & Cor (MÉDIO)

• line-height - Use 1.5-1.75 para texto no corpo
• line-length - Limite a 65-75 caracteres por linha
• font-pairing - Combine personalidades de fontes de título/corpo

6. Animação (MÉDIO)

• duration-timing - Use 150-300ms para microinterações
• transform-performance - Use transform/opacity, não width/height
• loading-states - Telas esqueléticas (skeleton screens) ou spinners

7. Seleção de Estilo (MÉDIO)

• style-match - Combine o estilo com o tipo de produto
• consistency - Use o mesmo estilo em todas as páginas
• no-emoji-icons - Use ícones SVG, não emojis

8. Gráficos & Dados (BAIXO)

• chart-type - Combine o tipo de gráfico com o tipo de dado
• color-guidance - Use paletas de cores acessíveis
• data-table - Forneça alternativa de tabela para acessibilidade

Como Usar

Pesquise domínios específicos usando a ferramenta CLI abaixo.

Pré-requisitos

Verifique se o Python está instalado:

python3 --version || python --version

Se o Python não estiver instalado, instale-o com base no SO do usuário:

macOS:

brew install python3

Ubuntu/Debian:

sudo apt update && sudo apt install python3

Windows:

winget install Python.Python.3.12

Como Usar Esta Habilidade

Quando o usuário solicitar trabalho de UI/UX (design, construir, criar, implementar, revisar, corrigir, melhorar), siga este fluxo de trabalho:

Passo 1: Analisar Requisitos do Usuário

Extraia informações chave da solicitação do usuário:

• Tipo de produto: SaaS, e-commerce, portfólio, dashboard, landing page, etc.
• Palavras-chave de estilo: minimalista, divertido, profissional, elegante, modo escuro, etc.
• Indústria: saúde, fintech, jogos, educação, etc.
• Stack: React, Vue, Next.js, ou padrão para html-tailwind

Passo 2: Gerar Sistema de Design (OBRIGATÓRIO)

Sempre comece com --design-system para obter recomendações abrangentes com justificativas:

python3 .claude/skills/ui-ux-pro-max/scripts/search.py "<product_type> <industry> <keywords>" --design-system [-p "Project Name"]

Este comando:

1. Pesquisa 5 domínios em paralelo (produto, estilo, cor, landing page, tipografia)
2. Aplica regras de raciocínio de ui-reasoning.csv para selecionar as melhores correspondências
3. Retorna o sistema de design completo: padrão, estilo, cores, tipografia, efeitos
4. Inclui anti-padrões a serem evitados

Exemplo:

…