Communitygithub.com

ProofShot - ビジュアル検証ワークフロー

UI機能のビジュアル検証。UIコンポーネント、ページ、ビジュアル機能を構築または修正した後に使用します。動画録画とエラーキャプチャを含む検証セッションを開始し、ブラウザを操作してテストを行い、停止して証拠アーティファクトを人間に提供します。

ProofShot - ビジュアル検証ワークフロー とは?

ProofShotは、AIエージェントが自身の作業を実際のブラウザで視覚的に検証できるようにする、オープンソースでエージェントに依存しないCLIツールです。動画証拠、スクリーンショット、エラーレポートを自動で収集し、特定のベンダーに依存しません。Claude Code、Cursor、CodexなどのAIエージェントとシームレスに連携し、UIコンポーネントの構築後や修正後に、3ステップのワークフロー(セッション開始→ブラウザ操作によるテスト→停止と証拠のバンドル)で視覚的な検証を実行します。さらに、オプションで証拠をGitHubのPRに直接投稿することも可能です。これにより、開発者はエージェントの作業結果を詳細かつ信頼性の高い形で確認でき、レビュープロセスを大幅に効率化できます。

対応~Claude Code~Codex CLI~Cursor✓OpenCode
npx skills add https://github.com/AmElmo/proofshot/tree/HEAD/skills/opencode

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

ProofShot - ビジュアル検証ワークフロー は何をしますか?

ProofShotは、オープンソースでエージェントに依存しないCLIであり、実際のブラウザで自身の作業を検証できます。動画証拠、スクリーンショット、エラーレポートを提供し、ベンダーロックインはありません。

使用するタイミング

ProofShotは以下の後に使用します:

  • 新しいUI機能やページの構築後
  • 既存のUIコンポーネントの修正後
  • ビジュアルバグの修正後
  • ユーザーに表示される内容に影響を与える変更全般

ワークフロー(常にこの3ステップに従ってください)

ステップ1:セッションを開始

proofshot start --run "あなたの開発コマンド" --port PORT --description "検証しようとしている内容"

これによりブラウザが開き、録画が開始されます。ポートが既に使用中の場合は、proofshotが既存のプロセスを自動的に強制終了します。

常に --run を使用して、proofshotが開発サーバーの出力を起動およびキャプチャできるようにします(サーバーログは証明レポートに表示されます)。 --run を省略するのは、サーバーがユーザーまたは別のプロセスによって明示的に起動された場合のみです。省略すると、サーバーログはキャプチャされません。

前回のセッションが正常に停止されなかった場合は、--force を追加して上書きします。

ステップ2:ブラウザを操作してテスト

proofshot execを使用して、移動、操作、確認を行います:

proofshot exec snapshot -i                                    # インタラクティブな要素を表示
proofshot exec open http://localhost:PORT/page                # ページに移動
proofshot exec click @e3                                      # ボタンをクリック
proofshot exec fill @e2 "[email protected]"                    # フォームフィールドに入力
proofshot exec screenshot step-NAME.png                       # 重要な瞬間をキャプチャ

重要な瞬間にスクリーンショットを撮ります。これらが視覚的な証拠となります。 スナップショット出力を読み、期待する内容が表示されていることを確認します。

ステップ3:停止して証拠をバンドル

proofshot stop

これにより録画が停止され、コンソールとサーバーのエラーが収集され、動画、スクリーンショット、エラーレポートを含むSUMMARY.mdが生成されます。

ステップ4(オプション):証拠をPRに投稿

proofshot pr              # 現在のブランチからPRを自動検出
proofshot pr 42           # 特定のPR番号を指定

これにより、スクリーンショットと動画がGitHubにアップロードされ、PRにフォーマットされたコメントが投稿されます。デフォルトでは、公式のGitHub Contents APIを使用し、proofshot-artifacts ブランチに保存されます。GitHubの添付URLを明示的に使用したい場合は、--upload-provider github-web-attachments を使用します。

ヒント

  • 人間が何をテストしたかわかるように、必ず意味のある --description を含めてください
  • 重要なアクションの前後両方でスクリーンショットを撮ってください(例:フォーム送信前、リダイレクト後)
  • 検証中にエラーを見つけた場合は、修正してワークフローを再実行してください
  • 停止した後は proofshot pr を使用して、証拠をプルリクエストに直接添付してください

Individual skills in this repo

This repo contains 3 individual skills — each has its own dedicated page.

関連スキル