Communitygithub.com

ProofShot — Workflow de vérification visuelle

Vérification visuelle des fonctionnalités d'interface utilisateur. À utiliser après avoir créé ou modifié un composant UI, une page ou une fonctionnalité visuelle. Lance une session de vérification avec enregistrement vidéo et capture des erreurs, puis vous pilotez le navigateur pour tester, puis arrêtez pour rassembler les preuves à destination de l'humain.

Qu'est-ce que ProofShot — Workflow de vérification visuelle ?

ProofShot est un outil de workflow de vérification visuelle conçu pour les développeurs et les agents d'IA. Il permet de vérifier visuellement les modifications apportées à l'interface utilisateur en automatisant les étapes depuis le lancement d'une session de test, la navigation et les interactions dans le navigateur, jusqu'à la capture de preuves (vidéo, captures d'écran, erreurs console et serveur). Le workflow se découpe en trois étapes principales : démarrage de la session (proofshot start), exécution des tests (proofshot exec), et arrêt avec génération d'un rapport de synthèse (proofshot stop). Une étape optionnelle permet de publier les preuves directement sur une Pull Request GitHub via proofshot pr. ProofShot prend en charge les environnements de développement classiques et utilise un navigateur headless. Il est particulièrement utile pour les agents d'IA qui doivent valider visuellement que des modifications UI sont correctes avant de les soumettre à un humain, en fournissant des preuves claires et structurées.

Compatible avec~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/test/fixtures/sample-app/.claude/skills/proofshot
Voir l'original→Voir toutes les compétences

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Documentation

Que fait ProofShot — Workflow de vérification visuelle ?

Quand l'utiliser

Utilisez ProofShot après :

  • La création d'une nouvelle fonctionnalité ou page UI
  • La modification de composants UI existants
  • La correction d'un bug visuel
  • Tout changement affectant ce que l'utilisateur voit

Le workflow (suivez toujours ces 3 étapes)

Étape 1 : Lancer la session

proofshot start --description "ce que vous allez vérifier"

Ceci démarre le serveur de développement, ouvre un navigateur headless et commence l'enregistrement. La description apparaît dans le rapport de preuve pour l'humain.

Étape 2 : Piloter le navigateur et tester

Utilisez proofshot exec pour naviguer, interagir et vérifier :

proofshot exec snapshot -i                                    # Voir les éléments interactifs
proofshot exec open http://localhost:PORT/page                # Naviguer vers une page
proofshot exec click @e3                                      # Cliquer sur un bouton
proofshot exec fill @e2 "[email protected]"                    # Remplir un champ de formulaire
proofshot exec screenshot step-NAME.png                       # Capturer des moments clés

Prenez des captures d'écran aux moments importants — elles deviendront les preuves visuelles. Vérifiez ce que vous attendez de voir en lisant la sortie du snapshot.

Étape 3 : Arrêter et rassembler la preuve

proofshot stop

Ceci arrête l'enregistrement, collecte les erreurs console + serveur, et génère un SUMMARY.md avec la vidéo, les captures d'écran et le rapport d'erreurs.

Étape 4 (optionnelle) : Publier la preuve sur la PR

proofshot pr              # Détection automatique de la PR depuis la branche courante
proofshot pr 42           # Cibler un numéro de PR spécifique

Ceci télécharge les captures d'écran et la vidéo sur GitHub et poste un commentaire formaté sur la PR. Par défaut, il utilise l'API officielle de contenus GitHub sur une branche proofshot-artifacts. Utilisez --upload-provider github-web-attachments si vous souhaitez spécifiquement des URLs de pièces jointes GitHub.

Conseils

  • Incluez toujours un --description significatif pour que l'humain sache ce qui a été testé
  • Prenez des captures d'écran AVANT et APRÈS les actions clés (par exemple, avant l'envoi d'un formulaire, après la redirection)
  • Si vous trouvez des erreurs lors de la vérification, corrigez-les et relancez le workflow
  • Utilisez proofshot pr après l'arrêt pour attacher directement les preuves à la 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 associés

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