ui-ux

Resumo

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

Skills Relacionadas

Skill	Quando usar junto
mcp	Para validação visual com browser automation
spec	Para criar specs a partir das melhorias visuais
codebase	Para combinar melhorias visuais e técnicas
ux	Para implementar melhorias com Precognition/Prompts

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)
• Revisão de PR (use 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

Check	O que verificar
Contraste	Ratio >= 4.5:1 para texto normal
Keyboard	Todos elementos acessíveis por tab
ARIA	Labels apropriados
Alt text	Imagens com descrição
Forms	Labels associados

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

Impacto	Esforço	Prioridade
Alto	Baixo	Fazer primeiro
Alto	Alto	Planejar cuidado
Baixo	Baixo	Fazer se tempo
Baixo	Alto	Evitar

---

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

Categoria	Exemplos
Feedback	Loading, success, error states
Navigation	Breadcrumbs, back buttons
Forms	Validation, help text
Layout	Responsive, spacing
Accessibility	ARIA, contrast, keyboard
Performance	Perceived speed, skeletons

---

Referências

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