ui-ux

Resumo

Identifica melhorias de UI/UX com validação visual usando browser automation.

Skills Relacionadas

Quando usar

Use esta skill quando precisar:

• Analisar UI/UX da aplicação visualmente
• Identificar problemas de acessibilidade
• Encontrar inconsistências de design
• Priorizar melhorias de interface

Não use para:

• Melhorias de código (use codebase-ideation)
• Revisão de PR (use github-pr-review)

Princípio Chave

Veja a app como usuários veem.

Identifique friction points, inconsistências, e oportunidades de polish que melhoram a experiência do usuário.

Browser Exploration

Ferramentas Disponíveis

• Puppeteer MCP para automation
• Screenshots para verificação visual
• Console logs para erros

Fases de Exploração

1. Navegar - Ir para página principal
2. Capturar - Screenshot do estado inicial
3. Interagir - Testar elementos interativos
4. Verificar - Checar erros de console
5. Documentar - Registrar descobertas

Auditoria de Acessibilidade

WCAG 2.2 - Verificações Rápidas

Problemas Comuns

• Focus states ausentes
• Contraste de cor insuficiente
• Labels de formulário ausentes
• Sem skip links
• Imagens sem alt text

Consistência de Componentes

O que Verificar

• Buttons com estilo consistente
• Inputs com mesmo padding/border
• Typography hierarchy correta
• Spacing consistente
• Colors seguindo design system

Avaliação Esforço/Impacto

Formato de Output

{
  "ui_ux_improvements": [
    {
      "id": "uiux-001",
      "title": "Add loading state to submit button",
      "description": "Show spinner during form submission",
      "category": "feedback",
      "effort": "trivial",
      "impact": "high",
      "affected_components": ["SubmitButton"],
      "screenshot": "path/to/screenshot.png"
    }
  ]
}

Categorias de Melhoria

Referências

• references/accessibility-audit.md - WCAG checks detalhados
• references/component-analysis.md - Design system consistency