---
name: visual-review
description: Revisar UI, UX, design system, CLI/TUI visual, responsividade, acessibilidade, screenshots, estados e polimento antes de checkpoint ou merge. Use quando houver tela implementada, handoff visual, design review, QA visual, polish pass, responsivo, a11y ou evidência visual para Review/Release.
---

# Visual Review SDD

## Objetivo

Produzir uma revisão visual rastreável, com evidência do que o usuário vê. Código sozinho não prova qualidade visual.

## Entrada

Use a melhor fonte disponível:

- App rodando localmente com URL.
- Screenshots anexados pelo usuário.
- Storybook, preview, build estático ou arquivo HTML.
- Para CLI/TUI: logs de terminal, screenshots, gravação ou transcript de interação.
- Se não houver superfície visível, registre a lacuna e revise apenas handoff/estados.

## Compatibilidade de providers

Review visual deve ser provider-neutral. Browser, visão de imagem, screenshot automático e MCP são capacidades opcionais do client/harness. Se não existirem, peça evidência ao usuário ou registre comandos/screenshot necessários e faça a revisão com transcript, HTML, build estático, logs ou descrição estruturada.

## Protocolo

1. Leia PRD, Tech Spec, design brief ou handoff associado.
2. Identifique telas, estados e breakpoints críticos.
3. Capture ou solicite evidência visual:
   - Mobile: 375 x 812.
   - Tablet: 768 x 1024.
   - Desktop: 1280 x 800.
   - Estados relevantes: loading, vazio, erro, sucesso, hover/focus, modal/menu aberto, dark mode.
4. Compare evidência contra intenção, componentes existentes e critérios de aceite.
5. Reporte achados por severidade e cite arquivo/tela/screenshot/estado.

## Checklist

- Hierarquia: o elemento mais importante é evidente e a leitura tem ordem.
- Consistência: tokens, spacing, radius, sombras, cores e componentes seguem o sistema.
- Responsivo: layout reorganiza, não apenas encolhe; sem overflow horizontal.
- Acessibilidade: contraste AA, foco visível, teclado, labels, sem depender só de cor.
- Estados: loading, vazio, erro, sucesso, disabled, hover/focus e permissões.
- Tipografia: escala clara, linha confortável, texto não estoura contêiner.
- Copy: botões dizem ação, erros orientam recuperação, links têm significado isolado.
- Performance visual: imagens carregam, layout não salta, motion respeita reduced motion.
- Produto: a tela resolve o job to be done sem parecer demo ou scaffold genérico.

## Saída

```md
## Visual review
- Superfície revisada:
- Evidências visuais:
- Veredito: aprovado | aprovado com ressalvas | reprovado

## Achados
| Sev | Tela/estado | Evidência | Impacto | Recomendação |
|---|---|---|---|---|

## Lacunas
- Estados não capturados:
- Riscos residuais:
- Validação necessária:
```

## Regras

- Não aprove visualmente sem evidência visual ou uma justificativa explícita de indisponibilidade.
- Não aceite screenshot só de desktop quando a feature impacta mobile.
- Não trate preferência estética como bug; ancore em brief, acessibilidade, usabilidade ou consistência.
- Não bloqueie merge por polimento `could improve`; separe severidade de gosto.
