Communitygithub.com

Verificação Visual de Portfólio

Compara uma rota de site de portfólio com uma referência visual aprovada em tamanhos desktop e mobile, depois relata defeitos visuais e correções com base em evidências.

O que é Verificação Visual de Portfólio?

Esta skill permite realizar verificação visual de páginas de portfólio em vez de revisão apenas de código. Ela compara a rota solicitada com uma referência visual aprovada em dois tamanhos de viewport: desktop e mobile (incluindo automaticamente um tamanho mobile se não especificado). A ferramenta analisa hierarquia visual, tipografia, espaçamento, cores, contraste, fidelidade de assets, responsividade (corte/transbordo) e estados interativos, além de verificar acessibilidade por teclado e comportamento de movimento reduzido. O relatório agrupa problemas por prioridade (P1 para bloqueios críticos, P2 para discrepâncias visuais materiais, P3 para ajustes cosméticos) e exige evidências como capturas de tela, comportamento observado, fonte provável e a menor correção confiável, sem aceitar verificações visuais sem a referência disponível. É útil para desenvolvedores e designers que precisam garantir que uma página web corresponda exatamente ao design aprovado, especialmente em projetos de portfólio pessoal.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/husheng-web/personal-website-skills/tree/HEAD/skills/portfolio-visual-qa

Perguntar na sua IA favorita

Abre um novo chat com esta habilidade de agente já pré-carregada.

Documentação

O que Verificação Visual de Portfólio faz?

Realize verificação visual em vez de revisão apenas de código.

Configuração

Confirme a referência, rota, estado da UI, tamanhos de viewport e se a tarefa permite implementação. Inicie o site através de seu comando estabelecido e inspecione a saída renderizada nos tamanhos solicitados; inclua um tamanho mobile quando a solicitação não o especificar.

Comparação

Avalie hierarquia, tipografia e quebra de linha, espaçamento e geometria, cores e contraste, fidelidade de assets, corte/transbordo responsivo e estados interativos. Verifique acessibilidade por teclado e comportamento de movimento reduzido quando movimento ou navegação estiver envolvido.

Relatório

Informe as evidências e limitações primeiro. Agrupe as descobertas por prioridade:

  • P1: bloqueia a hierarquia pretendida, acesso ou tarefa principal.
  • P2: discrepância visual ou responsiva material.
  • P3: polimento que pode esperar.

Para cada descoberta, nomeie a rota/estado afetado, comportamento observado, fonte provável e a menor correção confiável. Re-teste correções no viewport afetado. Não declare que uma verificação visual passou quando a captura do navegador ou a referência alvo não estava disponível.

Individual skills in this repo

This repo contains 7 individual skills — each has its own dedicated page.

Habilidades Relacionadas