Revisor de Design Web

Esta habilidade permite a inspeção visual e validação da qualidade do design de websites, identificando e corrigindo problemas no nível do código-fonte.

Escopo de Aplicação

• Sites estáticos (HTML/CSS/JS)
• Frameworks SPA como React / Vue / Angular / Svelte
• Frameworks Full-stack como Next.js / Nuxt / SvelteKit
• Plataformas CMS como WordPress / Drupal
• Qualquer outra aplicação web

Pré-requisitos

Necessário

1. O site alvo deve estar em execução

   • Servidor de desenvolvimento local (ex: http://localhost:3000)
   • Ambiente de staging
   • Ambiente de produção (para revisões somente leitura)

2. Automação de navegador deve estar disponível

   • Captura de tela
   • Navegação na página
   • Recuperação de informações do DOM

3. Acesso ao código-fonte (ao fazer correções)

   • O projeto deve existir dentro do workspace

Visão Geral do Fluxo de Trabalho

flowchart TD
    A[Step 1: Information Gathering] --> B[Step 2: Visual Inspection]
    B --> C[Step 3: Issue Fixing]
    C --> D[Step 4: Re-verification]
    D --> E{Issues Remaining?}
    E -->|Yes| B
    E -->|No| F[Completion Report]

Etapa 1: Fase de Coleta de Informações

1.1 Confirmação de URL

Se a URL não for fornecida, pergunte ao usuário:

Por favor, forneça a URL do site a ser revisado (ex: http://localhost:3000)

1.2 Compreensão da Estrutura do Projeto

Ao fazer correções, colete as seguintes informações:

1.3 Detecção Automática de Projeto

Tente a detecção automática a partir dos arquivos no workspace:

Detection targets:
├── package.json     → Framework and dependencies
├── tsconfig.json    → TypeScript usage
├── tailwind.config  → Tailwind CSS
├── next.config      → Next.js
├── vite.config      → Vite
├── nuxt.config      → Nuxt
└── src/ or app/     → Source directory

1.4 Identificação do Método de Estilização

Etapa 2: Fase de Inspeção Visual

2.1 Navegação pela Página

1. Navegue até a URL especificada
2. Capture capturas de tela
3. Recupere a estrutura/snapshot do DOM (se possível)
4. Se houver páginas adicionais, navegue através da navegação

2.2 Itens de Inspeção

Trabalhe através de references/visual-checklist.md durante a inspeção e novamente durante a verificação pós-correção.

Problemas de Layout

Problemas de Responsividade

Problemas de Acessibilidade

Consistência Visual

2.3 Teste de Viewport (Responsivo)

Teste nas seguintes viewports:

…