フローを書けば、録画が届く。
コマンドひとつで Web アプリを録画し、動画、主要ステップのスクリーンショット、ランブックを返します。UAT、引き継ぎ、バグ報告、レビューが求めるエビデンスを、30 分の画面収録なしで。
あとはエージェントでこれを入力
/webapp-evidence:recording - Claude Code
- Cursor
- Codex
- Gemini CLI
- Antigravity
UAT のために
受け入れ基準を入れれば、承認できるエビデンスが出てくる
AI で変更は速くなりました。でも動作の証明は速くなっていません。受け入れテストは今も、誰かが基準をひとつずつクリックし、手で録画しています。基準をフローとして書いてください。1 回のテイクで、どの基準も動画に映り、タイムスタンプが付き、ページのエラーはすべて記録されて返ってきます。
- 01
基準をフローとして書く
番号付きのステップを普段の言葉で、チームの言語のまま。MR や PR のリンクでも構いません。エージェントが差分を読み、フローを導き出します。
- 02
1 回のテイクで全ステップを実行
Chrome を見えるポインターで、視聴者が追える速さで操作します。エンドポイントを呼ぶステップはステータスを検証するので、誤った応答はエビデンスとして出荷されず、テイクが止まります。
- 03
ランブックがそのまま報告書
各ステップの動画内の時刻、実行したコマンドと終了コード、録画中に出たコンソールエラーや失敗したリクエストのすべて。
- 04
承認するか、差し戻すか
レビュアーはフローを再実行せず、各基準をタイムスタンプと照合します。修正後は「もう一度録画して」で新しいテイクを作り、古いテイクも横に残ります。
このページを UAT 報告書として読む
「使い方」の動画は、このページが紹介している skill でこのページ自身を録画したものです。基準を選ぶと、それを証明するランブックの行が示されます。
受け入れ基準
- ## Steps in the video
- 00:00 - 00:01 Hero — the page as it opens
- 00:01 - 00:03 Hero — the firefly answers the pointer
- 00:03 - 00:05 Hero — copy the command that starts a recording
- 00:05 - 00:17 Terminal — the SEO meta the page serves, read off its URL
- 00:17 - 00:24 UAT — the four steps light up under the pointer
- 00:24 - 00:41 UAT report — each criterion picks out the runbook lines that prove it
- 00:41 - 00:46 How it works — three steps and the recording they produce
- 00:46 - 00:51 Full-stack proof — the screen, the endpoint and the database
- 00:51 - 00:53 Vision — contact sheets of the take
- 00:53 - 00:59 Features — the cards warm as the pointer crosses them
- 00:59 - 01:07 Install — one panel per agent
- 01:07 - 01:11 Back to top — the firefly flies the reader up
- 01:11 - 01:28 Language menu — Tiếng Việt, 日本語, 简体中文 and back to English
- 01:28 - 01:34 Closing on Tiếng Việt
- ## Commands run in the terminal
- - 00:12 `curl -s https://evdrec.vercel.app/ | grep -oE '<title>[^<]*</title>|<meta[^>]*(name="description"|property="og:(title|url|image)")[^>]*>' | cut -c1-100` — exit 0
- ## Page errors recorded during the take
- - none
そのテイクのランブックから無編集で写しています。
使い方
3 ステップ、いつものエージェントの中で
- 01
skill をインストール
Claude Code、Cursor、Codex、Gemini CLI、Antigravity のどれでもコマンドひとつ。録画には Chrome、ffmpeg、Node が必要です。足りないものはエージェントが伝え、インストールを提案します。
- 02
フローを書く
ページと手順を書くか、何も書かなくても構いません。変更の直後なら、どの画面を触っていたかエージェントはもう知っています。
- 03
エビデンスを受け取る
mp4、番号付きスクリーンショット、ランブックがあなたのディスクに。チケット、MR、報告書への添付はあなたの手で。何もコミットされません。
フルスタックのエビデンス
1 回のテイクで画面、エンドポイント、データベースを証明
画面録画が示すのはフルスタックの変更の半分だけです。同じテイクで、ブラウザが保持しているセッションのまま API を呼び、書き込まれた行をデータベースから読み返せます。
/webapp-evidence:recording Page: https://app.example.com/orders
Flow:
1. Create an order for SKU ABC, quantity 2
2. Call POST /api/orders and show it answering 201
3. Query the orders table and show the row that appeared -
画面
フォームは見えるポインターで入力・送信されます。視聴者が読める速さで。
-
エンドポイント
ページの上にターミナルパネルが開き、ブラウザの Cookie で curl が走ります。ステップがステータスを検証する様子も動画に残ります。
-
データベース
psql、mysql、rake タスクなど、自分で実行するものなら何でも。新しい行が、それを作った画面の横に映ります。
Cookie とトークンはファイル経由で curl に渡り、動画、スクリーンショット、ランブックのすべてでマスクされます。
テイクの確認
エージェントは動画を観られない。vision なら読める。
録画を数秒ごとのフレームに分け、各フレームに mm:ss を刻んだコンタクトシートに並べます。指摘は「00:14 でヘッダーが表に重なる」のように返り、ランブックと照合できます。
/webapp-evidence:vision evd-tour.mp4 機能
レビュアーが信頼できるエビデンス
-
人が操作したように見える
ポインターは移動し、タイピングには揺らぎがあり、スクロールは目的の場所で止まります。何も飛びません。
-
ただのファイルではなくランブック
タイムライン、字幕、実行したコマンド、発生したページエラー、そして同じテイクをもう一度作るコマンド。
-
秘密は映さない
ぼかす、黒塗りにする、区間ごと切る。動画でもスクリーンショットでも。
-
マシンの外に何も出ない
サービスもボットアカウントもありません。手元のエージェント CLI の中で、指定したサイトだけを相手に動きます。
-
ダイアログそのものが証拠なら
ネイティブのドロップダウンや confirm ダイアログは既定で字幕に記録されます。それ自体がエビデンスなら、--screen でブラウザのウィンドウごと録画します。
-
覚える構文はない
どの言語で頼んでも、エージェントはその言語で答えます。別の言語の字幕、ゆっくりしたテイク — プロジェクトごとに記憶されます。
インストール
使っているエージェントを選ぶ
ひとつの skill、5 つのプラットフォーム。実行コマンドは入力する場所によって変わります。
Claude Code
インストール
claude plugin marketplace add TOMOSIA-VIETNAM/webapp-evidence claude plugin install webapp-evidence@webapp-evidence 録画
/webapp-evidence:recording 動画を読み返す
/webapp-evidence:vision Cursor
インストール
curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash 録画
/webapp-evidence-recording 動画を読み返す
/webapp-evidence-vision Codex
インストール
curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash 録画
$webapp-evidence-recording 動画を読み返す
$webapp-evidence-vision Gemini CLI
インストール
curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash 録画
/webapp-evidence-recording 動画を読み返す
/webapp-evidence-vision Antigravity
インストール
curl -fsSL https://raw.githubusercontent.com/TOMOSIA-VIETNAM/webapp-evidence/main/install.sh | bash 録画
/webapp-evidence-recording 動画を読み返す
/webapp-evidence-vision 録画には Chrome、ffmpeg、Node が必要です。ワンライナーは使うプラットフォームを尋ね、どこに入ったかを伝えます。