Communitygithub.com

ProofShot

Visuelle Verifikation von UI-Features mit Videoaufzeichnung und Screenshots. Startet eine Aufnahmesitzung, ermöglicht Browser-Tests und bündelt die Ergebnisse als Beweis für den Menschen.

Was ist ProofShot?

ProofShot ist ein Werkzeug zur visuellen Verifikation von UI-Komponenten. Es hilft dir, nach Änderungen an UI-Elementen, Seiten oder visuellen Features automatisiert Beweise (Screenshots, Video, Fehlerprotokolle) zu sammeln. Der Workflow ist dreistufig: (1) Sitzung starten, (2) Browser steuern und testen, (3) Aufnahme beenden und Beweise bündeln. Optional können die Ergebnisse direkt in einen GitHub-Pull-Request hochgeladen werden. ProofShot unterstützt jede moderne Webanwendung und funktioniert plattformunabhängig über die Befehlszeile.

Funktioniert mit~Claude Code~Codex CLI~Cursor
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/test/fixtures/sample-app/.claude/skills/proofshot
Original anzeigen→Alle Skills durchsuchen

In Ihrer bevorzugten KI fragen

Öffnet einen neuen Chat, in dem dieser Agent-Skill bereits geladen ist.

OpenAIChatGPTClaudeClaudeGeminiGeminiGrokGrokPerplexityPerplexityDeepSeekDeepSeek

Dokumentation

ProofShot — Visueller Verifikations-Workflow

Wann verwenden

Verwende ProofShot nach:

  • Erstellen einer neuen UI-Funktion oder Seite
  • Ändern vorhandener UI-Komponenten
  • Beheben eines visuellen Fehlers
  • Jeder Änderung, die das betrifft, was der Benutzer sieht

Der Workflow (immer diese 3 Schritte befolgen)

Schritt 1: Sitzung starten

proofshot start --description "was du verifizieren wirst"

Dies startet den Dev-Server, öffnet einen Headless-Browser und beginnt mit der Aufzeichnung. Die Beschreibung erscheint im Proof-Bericht für den Menschen.

Schritt 2: Browser steuern und testen

Verwende proofshot exec, um zu navigieren, zu interagieren und zu verifizieren:

proofshot exec snapshot -i                                    # Interaktive Elemente anzeigen
proofshot exec open http://localhost:PORT/page                # Zu einer Seite navigieren
proofshot exec click @e3                                      # Einen Button klicken
proofshot exec fill @e2 "[email protected]"                    # Ein Formularfeld ausfüllen
proofshot exec screenshot schritt-NAME.png                    # Wichtige Momente erfassen

Mache Screenshots zu wichtigen Momenten – diese werden zum visuellen Beweis. Überprüfe, was du erwartest zu sehen, indem du die Snapshot-Ausgabe liest.

Schritt 3: Anhalten und den Proof bündeln

proofshot stop

Dies stoppt die Aufzeichnung, sammelt Konsolen- + Serverfehler und generiert eine SUMMARY.md mit Video, Screenshots und Fehlerbericht.

Schritt 4 (optional): Proof im PR veröffentlichen

proofshot pr              # PR automatisch aus aktuellem Branch erkennen
proofshot pr 42           # Bestimmte PR-Nummer angeben

Dies lädt Screenshots und Video auf GitHub hoch und postet einen formatierten Kommentar im PR. Standardmäßig verwendet es die offizielle GitHub Contents API auf einem proofshot-artifacts-Branch. Verwende --upload-provider github-web-attachments, wenn du speziell GitHub-Anhang-URLs verwenden möchtest.

Tipps

  • Verwende immer eine aussagekräftige --description, damit der Mensch weiß, was getestet wurde
  • Mache Screenshots VOR und NACH wichtigen Aktionen (z. B. vor Formularabsendung, nach Weiterleitung)
  • Wenn du während der Verifikation Fehler findest, behebe sie und führe den Workflow erneut aus
  • Verwende proofshot pr nach dem Stoppen, um den Proof direkt am Pull Request anzuhängen

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.

Verwandte Skills

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