Communitygithub.com

ProofShot

Verificación visual de características de UI. Úselo después de construir o modificar cualquier componente de UI, página o característica visual. Inicia una sesión de verificación con grabación de video y captura de errores, luego usted maneja el navegador para probar, y luego detiene para agrupar los artefactos de prueba para el humano.

¿Qué es ProofShot?

ProofShot es una habilidad para agentes de IA que permite la verificación visual automatizada de interfaces de usuario. Se utiliza después de construir o modificar cualquier componente de UI, página o característica visual. El flujo de trabajo consta de tres pasos principales: iniciar una sesión de verificación con grabación de video y captura de errores, manejar el navegador para probar las funcionalidades, y finalmente detener la sesión para generar un informe con evidencias visuales. Además, ofrece la opción de publicar las pruebas directamente en un Pull Request de GitHub. Esta habilidad es compatible con cualquier agente que pueda ejecutar comandos de terminal y es útil para desarrolladores que desean asegurar cambios visuales antes de la revisión humana.

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

Preguntar en tu IA favorita

Abre un nuevo chat con esta habilidad de agente ya precargada.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentación

ProofShot — Flujo de Trabajo de Verificación Visual

Cuándo usar

Use ProofShot después de:

  • Construir una nueva característica o página de UI
  • Modificar componentes de UI existentes
  • Corregir un error visual
  • Cualquier cambio que afecte lo que el usuario ve

El flujo de trabajo (siempre siga estos 3 pasos)

Paso 1: Iniciar la sesión

proofshot start --description "lo que va a verificar"

Esto inicia el servidor de desarrollo, abre un navegador sin cabeza y comienza la grabación. La descripción aparece en el informe de prueba para el humano.

Paso 2: Manejar el navegador y probar

Use proofshot exec para navegar, interactuar y verificar:

proofshot exec snapshot -i                                    # Ver elementos interactivos
proofshot exec open http://localhost:PORT/page                # Navegar a una página
proofshot exec click @e3                                      # Hacer clic en un botón
proofshot exec fill @e2 "[email protected]"                    # Llenar un campo de formulario
proofshot exec screenshot paso-NOMBRE.png                       # Capturar momentos clave

Tome capturas de pantalla en momentos importantes — estas se convierten en la prueba visual. Verifique lo que espera ver leyendo la salida del snapshot.

Paso 3: Detener y agrupar la prueba

proofshot stop

Esto detiene la grabación, recopila errores de consola + servidor y genera un SUMMARY.md con video, capturas de pantalla e informe de errores.

Paso 4 (opcional): Publicar la prueba en el PR

proofshot pr              # Detectar PR automáticamente desde la rama actual
proofshot pr 42           # Apuntar a un número de PR específico

Esto sube capturas de pantalla y video a GitHub y publica un comentario formateado en el PR. Por defecto, usa la API oficial de contenidos de GitHub en una rama proofshot-artifacts. Use --upload-provider github-web-attachments si desea específicamente URLs de adjuntos de GitHub.

Consejos

  • Siempre incluya una --description significativa para que el humano sepa qué se probó
  • Tome capturas de pantalla ANTES Y DESPUÉS de acciones clave (por ejemplo, antes de enviar un formulario, después de la redirección)
  • Si encuentra errores durante la verificación, corríjalos y vuelva a ejecutar el flujo de trabajo
  • Use proofshot pr después de detener para adjuntar la prueba directamente al 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.

Skills relacionados

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