Agent Skills › AmElmo/proofshot

AmElmo/proofshot

GitHub

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

3 skills 839

GitHub

Install All Skills

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

More Options

List skills in collection

npx skills add AmElmo/proofshot --list

Skills in Collection (3)

proofshot

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

skills/claude/SKILL.md

View Skill ›

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

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.",
    "allowed-tools": "Bash(proofshot:*), Bash(agent-browser:*)"
}

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

proofshot

ProofShot 是一个用于 UI 视觉验证的 CLI 工具。在构建、修改 UI 或修复视觉 bug 后使用。它通过启动浏览器录制视频、截图并捕获错误，生成包含证据的报告，支持将结果自动发布到 GitHub PR，确保用户可见内容的正确性。

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

skills/codex/SKILL.md

View Skill ›

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

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."
}

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.

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

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

proofshot

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

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

skills/opencode/SKILL.md

View Skill ›

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

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.

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

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

AmElmo/proofshot

AmElmo/proofshot

Install All Skills

Skills in Collection (3)

proofshot

ProofShot — Visual Verification Workflow

When to use

The workflow (always follow these 3 steps)

Step 1: Start the session

Step 2: Drive the browser and test

Step 3: Stop and bundle the proof

Step 4 (optional): Post proof to the PR

Tips

proofshot

ProofShot — Visual Verification Workflow

When to use

The workflow (always follow these 3 steps)

Step 1: Start the session

Step 2: Drive the browser and test

Step 3: Stop and bundle the proof

Step 4 (optional): Post proof to the PR

Tips

proofshot

ProofShot - Visual Verification Workflow

When to use

The workflow (always follow these 3 steps)

Step 1: Start the session

Step 2: Drive the browser and test

Step 3: Stop and bundle the proof

Step 4 (optional): Post proof to the PR

Tips

文库