Agent Skills › AmElmo/proofshot › proofshot

proofshot

GitHub

ProofShot是用于UI视觉验证的CLI工具。在构建或修改UI后启动录制，通过命令驱动浏览器测试并截图，最后停止会话打包视频、截图及错误报告作为证据，支持自动提交至PR。

skills/opencode/SKILL.md AmElmo/proofshot

Trigger Scenarios

构建新的UI功能或页面后修改现有UI组件后修复视觉Bug后

Install

npx skills add AmElmo/proofshot --skill proofshot -g -y

More Options

Use without installing

npx skills use AmElmo/proofshot@proofshot

指定 Agent (Claude Code)

npx skills add AmElmo/proofshot --skill proofshot -a claude-code -g -y

安装 repo 全部 skill

npx skills add AmElmo/proofshot --all -g -y

预览 repo 内 skill

npx skills add AmElmo/proofshot --list

SKILL.md

Frontmatter

{
    "name": "proofshot",
    "description": "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.",
    "compatibility": "opencode"
}

ProofShot - Visual Verification Workflow

ProofShot is an open-source, agent-agnostic CLI that lets you verify your own work in a real browser - video proof, screenshots, and error reports, no vendor lock-in.

When to use

Use ProofShot after:

Building a new UI feature or page
Modifying existing UI components
Fixing a visual bug
Any change that affects what the user sees

The workflow (always follow these 3 steps)

Step 1: Start the session

proofshot start --run "your-dev-command" --port PORT --description "what you are about to verify"

This opens a browser and begins recording. If the port is already in use, proofshot will kill the existing process automatically.

Always use --run to let proofshot start and capture your dev server output (server logs appear in the proof report). Only omit --run if the server was explicitly started by the user or another process - without it, no server logs are captured.

If a previous session was not stopped cleanly, add --force to override it.

Step 2: Drive the browser and test

Use proofshot exec to navigate, interact, and verify:

proofshot exec snapshot -i                                    # See interactive elements
proofshot exec open http://localhost:PORT/page                # Navigate to a page
proofshot exec click @e3                                      # Click a button
proofshot exec fill @e2 "test@example.com"                    # Fill a form field
proofshot exec screenshot step-NAME.png                       # Capture key moments

Take screenshots at important moments - these become the visual proof. Verify what you expect to see by reading the snapshot output.

Step 3: Stop and bundle the proof

proofshot stop

This stops recording, collects console + server errors, and generates a SUMMARY.md with video, screenshots, and error report.

Step 4 (optional): Post proof to the PR

proofshot pr              # Auto-detect PR from current branch
proofshot pr 42           # Target a specific PR number

This uploads screenshots and video to GitHub and posts a formatted comment on the PR. By default it uses the official GitHub contents API on a proofshot-artifacts branch. Use --upload-provider github-web-attachments if you specifically want GitHub attachment URLs.

Tips

Always include a meaningful --description so the human knows what was tested
Take screenshots before AND after key actions (e.g., before form submit, after redirect)
If you find errors during verification, fix them and re-run the workflow
Use proofshot pr after stopping to attach proof directly to the pull request