mcpField
F
frontend-browser-review

frontend-browser-review

github.com/langfuseテスト・品質36.7k51 回インストール今日更新
リポジトリ

frontend-browser-review について

frontend-browser-reviewは、ブラウザーに表示されるフロントエンド変更を確認するエージェント向けスキルです。ブラウザー検証の判断、テストデータの準備、結果報告や小規模な視覚変更の引き継ぎ方法を示します。

主な機能

  1. 01ブラウザー確認が必要な場面の判断
  2. 02seed CLIによるテストデータ準備
  3. 03Playwright MCPまたはCursorでの操作確認
  4. 04表示状態とレスポンシブ動作の確認
  5. 05結果、リスク、引き継ぎ手順の報告

活用シーン

  1. 01ナビゲーションや状態をまたぐ変更の検証
  2. 02ブラウザー上で見える不具合修正の確認
  3. 03狭い画面でのレイアウト確認
  4. 04小規模な視覚変更の人間による確認

MCP 対応

ローカルのエージェント環境では、ワークスペースのPlaywright MCPサーバーを使ったブラウザー確認を案内します。Cursor Cloudでは組み込みのコンピューター操作を利用できます。

インストール

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

$npx skills add https://github.com/langfuse/langfuse --skill frontend-browser-review

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

詳細

フロントエンドのブラウザーレビュー

変更によって、ブラウザーでユーザーに見えるもの、またはユーザーが行う操作に影響がある場合は、このスキルを使用します。

まずはこちら

  • Web 固有のエントリーポイントとテストコマンドについて、../../../web/AGENTS.md を読みます。
  • Cursor Cloud では、組み込みのコンピューター操作機能を使用します。ローカルのエージェント環境では、共有エージェント設定のワークスペースにある playwright MCP サーバーを使用します。

使用する場面

結果が予測できない場合は、ブラウザーを操作します。

  • ナビゲーションやページフローの変更、またはステップをまたいで状態を保持するもの
  • 予測できない形で再配置される可能性のあるレイアウトやレスポンシブ動作
  • ブラウザー上で失敗の様子を確認できるバグ修正
  • ユーザーに見える大規模な変更の最終確認

代わりに提案する場面

自信を持って確認できる、小規模で自己完結した視覚的な変更なら、自動確認は不要です。余白、色のトークン、ラベル、アイコンの差し替えなどの場合は、変更内容を伝え、正確な URL（ローカルポート、またはプルリクエストの pr-<N>.preview.langfuse.com）を共有して、開発者に2秒ほど確認してもらいます。すでに把握している内容をあなたが確認するのを待つよりも早く、プルリクエストにスクリーンショットがあれば、変更の証拠も残ります。

条件は2つあります。明確に伝えること — 何を確認しなかったのか、その理由とともに具体的に示し、選択がわかるようにします。開発者がその判断を覆せるようにします。そして、相手がその場にいるうちに行うこと — 提案は引き継ぎであり、作業を終える手段ではありません。確認できる人がいない場合や、変更がユーザーに見える場合は、自分で確認します。

まずテストデータを事前投入する

多くのフローは、意味のあるデータがあって初めて確認できます。ブラウザーを開く前に、シード CLI でフローに必要なデータを投入します（必要なデータとコマンドの一覧は seed-test-data スキルを参照）。

  • pnpm run seed -- trace-tree --observations 5000 --v4 — 複雑なオブザベーションツリー（v3 + v4 イベント）
  • pnpm run seed -- long-session --traces 300 — 大規模なセッションビュー
  • pnpm run seed -- many-traces --count 100000 — 一覧表示／フィルタリングのパフォーマンス
  • pnpm run seed -- doctor — スタックの動作に問題がある場合

実行するたびに UI のディープリンクが出力されます。手動で移動するのではなく、出力されたリンクを開いてください。シードスクリプトや ClickHouse への直接挿入を自分で記述しないでください。

レビューループ

  1. 利用可能な場合は、既存の Cursor Cloud Compose アプリを使用します。それ以外の場合は、ローカルサーバーがすでに起動していなければ pnpm run dev:web でアプリを起動します。
  2. Playwright がまだマシンに設定されていない場合は、pnpm run playwright:install で Chromium をインストールします。
  3. シードデータが必要なフローではシード CLI のディープリンクを使い、Cursor のコンピューター操作機能または Playwright MCP サーバーで、主な変更対象のフローを開きます。
  4. 変更の影響を受ける主要なハッピーパスを実行します。
  5. 目立った視覚的なリグレッションがないか確認します。
    • レイアウトや余白の崩れ
    • バナーの重なりやビューポートへの固定に関する問題
    • ローディング状態、空の状態、エラー状態の欠落
    • 画面幅が狭い場合のレスポンシブ動作の崩れ
  6. ページが大幅に変更された場合は、タスクや既存のパターンで意図された動作と比較しながら、変更後の UI の状態を確認します。
  7. Playwright MCP のセッションが失敗した場合は、/tmp/playwright-mcp を確認します。Cursor Cloud では、実行時のブラウザーアーティファクトと Compose のログを確認します。

出力に関する期待事項

以下を報告します。

  1. 確認したフロー
  2. 主要なフローが正常に動作したかどうか
  3. 目に見えるリグレッションや、今後の対応が必要なリスク
  4. レビューを妨げられた場合、ブラウザーで確認できなかった具体的な原因
  5. 人に引き継ぐ場合は、プレビューまたはサンドボックスの URL と、正確なクリック手順に加え、修正の証拠として GitHub のプルリクエストに投稿したスクリーンショット、短い動画、または変更前後の比較 — エージェントだけに向けた長い説明や、チャットだけでの報告にとどめないこと

適用範囲に関する注意

  • このスキルは、対象を絞ったテストやリンティングを補完するものであり、置き換えるものではありません。
  • 実装の詳細については、web/AGENTS.md とパッケージ固有のスキルを参照してください。
  • 汎用的なフロントエンドのコーディングガイドではなく、ブラウザーでの最終確認ワークフローとして使用してください。

コメント

Markdown 対応