Communitygithub.com

ProofShot — Verificação Visual

Verificação visual de funcionalidades da interface. Use após construir ou modificar qualquer componente, página ou recurso visual. Inicia uma sessão de verificação com gravação de vídeo e captura de erros, em seguida você conduz o navegador para testar e depois para finalizar, gerando artefatos de prova para o ser humano.

O que é ProofShot — Verificação Visual?

ProofShot é uma skill de verificação visual para agentes de IA (como Claude Code, Cursor ou Codex) que automatiza o registro e a documentação de testes de UI. Ela é útil quando você modifica ou cria componentes de interface, pois captura evidências (vídeo, screenshots, logs de console e erros) que podem ser anexadas a pull requests no GitHub para revisão humana. A skill funciona em três etapas principais: iniciar a sessão (que sobe um servidor de desenvolvimento, abre um navegador headless e começa a gravar), dirigir o navegador e testar (usando comandos como 'proofshot exec' para navegar, clicar e capturar screenshots), e parar para gerar um resumo com os artefatos de prova. Opcionalmente, é possível postar essas evidências diretamente no PR correspondente via 'proofshot pr'.

Funciona com~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/test/fixtures/sample-app/.claude/skills/proofshot
Ver original→Navegar por todas as habilidades

Perguntar na sua IA favorita

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

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentação

ProofShot — Fluxo de Trabalho de Verificação Visual

Quando usar

Use ProofShot após:

  • Construir uma nova funcionalidade de UI ou página
  • Modificar componentes de UI existentes
  • Corrigir um bug visual
  • Qualquer alteração que afete o que o usuário vê

O fluxo de trabalho (siga sempre estas 3 etapas)

Etapa 1: Iniciar a sessão

proofshot start --description "o que você está prestes a verificar"

Isso inicia o servidor de desenvolvimento, abre um navegador headless e começa a gravar. A descrição aparece no relatório de prova para o ser humano.

Etapa 2: Dirigir o navegador e testar

Use o proofshot exec para navegar, interagir e verificar:

proofshot exec snapshot -i                                    # Ver elementos interativos
proofshot exec open http://localhost:PORTA/pagina              # Navegar para uma página
proofshot exec click @e3                                      # Clicar em um botão
proofshot exec fill @e2 "[email protected]"                  # Preencher um campo de formulário
proofshot exec screenshot etapa-NOME.png                      # Capturar momentos-chave

Capture screenshots em momentos importantes — eles se tornam a prova visual. Verifique o que você espera ver lendo a saída do snapshot.

Etapa 3: Parar e agrupar a prova

proofshot stop

Isso para a gravação, coleta erros do console e do servidor e gera um SUMMARY.md com vídeo, screenshots e relatório de erros.

Etapa 4 (opcional): Postar a prova no PR

proofshot pr              # Detecta automaticamente o PR a partir do branch atual
proofshot pr 42           # Define um número de PR específico

Isso envia screenshots e vídeo para o GitHub e posta um comentário formatado no PR. Por padrão, usa a API oficial de conteúdos do GitHub em um branch proofshot-artifacts. Use --upload-provider github-web-attachments se você quiser especificamente URLs de anexos do GitHub.

Dicas

  • Sempre inclua uma --description significativa para que o humano saiba o que foi testado
  • Tire screenshots ANTES e DEPOIS de ações-chave (por exemplo, antes do envio do formulário, após o redirecionamento)
  • Se encontrar erros durante a verificação, corrija-os e execute novamente o fluxo de trabalho
  • Use proofshot pr após parar para anexar a prova diretamente ao pull request

Individual skills in this repo

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

AmElmo/proofshot

Visual verification of UI features. Use after building or modifying any UI component, page, or visual feature. Starts a verification session with video recording and error capture, then you drive the browser to test, then stop to bundle proof artifacts for the human.

AmElmo/proofshot

Visual verification of UI features. Use after building or modifying any UI component, page, or visual feature. Starts a verification session with video recording and error capture, then you drive the browser to test, then stop to bundle proof artifacts for the human.

AmElmo/proofshot

Visual verification of UI features. Use after building or modifying any UI component, page, or visual feature. Starts a verification session with video recording and error capture, then you drive the browser to test, then stop to bundle proof artifacts for the human.

Habilidades Relacionadas

steipete/video-frames

Extract frames or short clips from videos using ffmpeg.

community

steipete/summarize

Summarize or transcribe URLs, YouTube/videos, podcasts, articles, transcripts, PDFs, and local files.

community

openclaw/openclaw

Use when testing, fixing, or extending the OpenClaw Control UI GUI with Vitest + Playwright end-to-end checks, mocked Gateway WebSocket flows, mocked dashboard runs, screenshots/videos, or agent-verifiable browser proof.

community

obra/superpowers

Obra superpowers agent skills.

community

affaan-m/ECC

See, Understand, Act on video and audio. See- ingest from local files, URLs, RTSP/live feeds, or live record desktop; return realtime context and playable stream links. Understand- extract frames, build visual/semantic/temporal indexes, and search moments with timestamps and auto-clips. Act- transcode and normalize (codec, fps, resolution, aspect ratio), perform timeline edits (subtitles, text/image overlays, branding, audio overlays, dubbing, translation), generate media assets (image, audio...

community

affaan-m/everything-claude-code

End-to-end marketing campaign planning and execution. Covers audience research, positioning, campaign angle definition, landing page copy, email sequences, social posts, ad copy, short-form video scripts, and content calendars. Use as the orchestration layer for multi-channel product launches. Use when planning or executing a multi-channel product launch, or producing landing page, email, social, or ad copy.

community