mcpField
V
verify-ui

verify-ui

github.com/petem24テスト・品質013 回インストール6 日前に更新
リポジトリ

verify-ui について

verify-uiは、UI変更を完了として報告する前に、ヘッドレスChromeで検証する開発者やコーディングエージェント向けのプロジェクト別スキルです。設定、操作確認、スクリーンショット、テスト、証拠に基づく報告を案内します。

主な機能

  1. 01プロジェクト設定とサインイン方法の確認
  2. 02agent-browserによるヘッドレスChrome検証
  3. 03操作とUI状態の確認
  4. 04各ビューポートの撮影と目視確認
  5. 05コンソール、リクエスト、テストの確認
  6. 06証拠に基づく検証レポート

活用シーン

  1. 01UI変更を完了報告する前の確認
  2. 02対応ビューポートごとの動作検証
  3. 03再読み込み後の保存内容の確認
  4. 04プルリクエスト向けのエラーと証拠の記録

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/petem24/skills --skill verify-ui

インストール後、Claude Code で/verify-uiを入力して読み込まれたか確認します。

詳細

UI の検証

変更を完了したと報告する前に、agent-browser を使ってヘッドレス Chrome で自分で UI を確認してください。アプリの起動方法、使用する URL、サインイン方法、実行するテストはプロジェクトごとに異なりますが、以下のルールはどのプロジェクトにも適用されます。

1. プロジェクトのセットアップを確認する

プロジェクトの AGENTS.md（または CLAUDE.md）と、そこからリンクされている UI 検証ガイドを読みます。次の点を確認してください。

  • このチェックアウトでのアプリの起動方法と、検証に使用する URL
  • サインインするユーザー（pnpm auth --list で確認できます）
  • プロジェクトがサポートするビューポートサイズ
  • 変更した領域を対象とする既存のテスト

これらの情報がプロジェクトにない場合は、レポートでその旨を伝え、サインインせずにできる範囲で検証してください。

作業中のチェックアウトを起動することも検証の一環です。問題が障害となると判断する前に、起動を試み、ローカルで発生する問題を修正してください。別のチェックアウトに属するサーバーは停止しないでください。

2. ブラウザーを実行する

検証対象のチェックアウトから pnpm browser を実行します。DevSports のプロジェクトでは、バージョンが固定された devkit を通じて利用できます。ホスト設定とライブダッシュボードについては、devkit の README を参照してください。インストールされていない場合は pnpm browser:install でインストールします（Linux で Chrome のライブラリが不足している場合は --with-deps を追加してください）。固定バージョンで使えるコマンドは pnpm browser --help で確認できます。agent-browser 独自の upgrade コマンドは実行しないでください。

  • タスクごとにセッションを 1 つ使用します。 一意の AGENT_BROWSER_SESSION（例：<project>-<task>-<role>）を選び、すべてのコマンドに設定してください。シェルのエクスポート設定は、ツール呼び出しの間で引き継がれないことがあります。自分のセッションだけを終了し、close --all は絶対に実行しないでください。
  • pnpm auth でサインインします。 開発用ユーザーは Clerk のテストユーザー（+clerk_test アドレス）で、メールアドレスやパスワード、シークレットは不要です。サインインコードは 424242 です。pnpm auth [user] --url "$APP_URL" を実行すると、アプリ自身の Clerk を通じてセッションにサインインできます。別のユーザーに切り替えるには、別のユーザーを指定して再度実行します。テストスイート向けにセッションを保存するには、pnpm auth --all --save を実行します。手動でサインインするには、サインインページでテスト用アドレスを入力し、424242 を入力します。pnpm auth がないプロジェクトでは、AGENTS.md に記載された独自のサインイン方法を確認してください。
  • オリジンは 1 つに統一します。 サインイン、ブラウジング、テストはすべて同じ URL に対して行います。セッションはオリジンをまたいで引き継がれないため、localhost でサインインして Tailscale の URL で検証しないでください。
  • 保存されたセッションは認証情報です。 出力、コミット、コピーをしてはいけません。実際のパスワード、コード、Cookie を求めてはいけません。また、個人用ブラウザープロファイルに接続してはいけません。
export AGENT_BROWSER_SESSION=<project>-<task>
pnpm auth --url "$APP_URL"
pnpm browser open "$APP_URL"
pnpm browser set viewport 1440 1000
pnpm browser snapshot -i
pnpm browser click @e3            # refs come from the latest snapshot
pnpm browser wait --text "Saved"
pnpm browser screenshot output/agent-browser/<task>-1440.png
pnpm browser console
pnpm browser errors
pnpm browser network requests
pnpm browser close

3. 変更を適切に確認する

  • ページ遷移後や大きな変更を行った後は、最新のスナップショットを取得します。参照情報は古くなることがあります。
  • ネットワークアイドル状態や一定時間のスリープではなく、テキスト、セレクター、URL など、UI の状態が見えるまで待ちます。Convex などのバックエンドは接続を開いたままにします。
  • 変更したページを表示するだけでなく、変更したコントロールを操作します。読み込み中、空、エラー、入力検証、キーボード操作など、重要な状態を確認してください。
  • 永続化されるべき内容は、再読み込みして確認します。クリックやトーストが発生しただけでなく、保存された内容を確認してください。
  • 変更の影響を受ける、サポート対象のすべてのビューポートでスクリーンショットを撮影し、各スクリーンショットを開いて目視確認してください。誰も見ていないスナップショットやスクリーンショットは、視覚的な検証とはいえません。Canvas やチャートも DOM の確認に加えて目視確認が必要です。
  • コンソールエラー、捕捉されていないページエラー、ページに必要なリクエストの失敗を確認します。コマンドが成功しただけでは、問題がないことの証明にはなりません。
  • 変更を対象とする最小限の既存テストを実行します。調査には agent-browser を使用し、その場限りのスクリプトや Playwright CLI は追加しないでください。
  • 確認のために作成したデータは削除します。

スクリーンショット、録画、その他の証拠は、無視対象の output/agent-browser/ 以下にタスク固有の名前で保存します。録画（pnpm browser record start output/agent-browser/<task>.webm を実行し、その後 record stop を実行）には ffmpeg が必要です。静止画では示しにくいフローに限り、録画を使用してください。

4. ホスト固有の注意事項

通常の macOS および Linux ホストでは設定は不要です。ホストで Chrome が No usable sandbox と報告し、問題を解決できない場合、または Tailscale が ユーザー空間で実行されており、外部向けプロキシが必要な場合は、 プロジェクトのホスト設定ファイル（ガイドを参照）に AGENT_BROWSER_ARGS、 AGENT_BROWSER_PROXY および小文字のプロキシ変数を設定してください。コミットする設定ファイルには記載しないでください。

5. レポート

URL、サインインしていたユーザー、ビューポートのサイズ、実施した操作と 確認した内容、テストコマンドとその結果、コンソールエラーとページエラー、 証跡のパス、確認できなかった項目を記載してください。サインインページだけを 対象にした場合は、その旨を明記してください。それだけでは、その先にある機能を 検証したことにはなりません。目に見える変更があるプルリクエストでは、 pr-screenshots スキルが画像を添付します。

コメント

Markdown 対応