ブラウザで画面を確認する。agent-browser CLI を使って画面のスクリーンショット撮影、 アクセシビリティツリー取得、フォーム操作、画面遷移などを行う。「画面見て」「ブラウザ確認して」「スクショ撮って」「現状把握して」「画面開いて」 「ログインして確認して」「画面の状態を教えて」「UIを確認して」などのリクエストで使用する。
E2Eテストの作成・実行には gen-tests（Playwright）を使うこと。本スキルはテスト実行ではなく 「AIの目」としてブラウザを操作し、画面状態を把握するためのもの。
The English summary is being prepared. Showing the original description.
Review the instructions the agent will receive before you install.
開発中の画面を素早く確認する「AIの目」。テストではなく、観察・確認・調査に使う。
| 用途 | スキル |
|---|---|
| 画面を見て現状把握する | browse（本スキル） |
| スクショ撮って状態確認する | browse |
| バグ調査で画面を操作してみる | browse |
| フォームの挙動を試す | browse |
| API通信をキャプチャする | browse |
| E2Eテストを作成する | gen-tests |
| Playwrightテストを実行する | gen-tests |
| テストを補強・作り直す | gen-tests |
agent-browser がグローバルインストール済み
npm install -g agent-browser
agent-browser install
dangerouslyDisableSandbox: true で実行する
（~/.agent-browser/ への書き込みにサンドボックス制限がかかるため）認証が必要な場合、E2Eテストの認証情報ファイルから読み取る。
認証情報をスキルファイルやコードにハードコードしない。
CLAUDE.md の「テスト設定」セクションやプロジェクト内の .env.test 等を参照すること。
agent-browser open <URL>
方法A: snapshot（テキスト） — シンプルな画面向き、トークン効率が良い
agent-browser snapshot -ic # interactive + compact
@e1, @e2 の参照付き）fill @e6 'text'）方法B: screenshot（画像） — 複雑な画面向き、視覚的に把握
agent-browser screenshot
agent-browser set viewport 1920 1080使い分け基準:
snapshot で取得した @ref を使って操作する:
agent-browser fill '@e6' 'input-text' # テキスト入力
agent-browser click '@e3' # クリック
agent-browser hover '@e10' # ホバー
agent-browser select '@e5' 'option-value' # セレクト
agent-browser get url # 現在のURL確認
agent-browser wait 3000 # 3秒待機
agent-browser wait '@e1' # 要素の出現を待つ
agent-browser network har start # HAR記録開始
# ... 画面操作 ...
agent-browser network har stop # HAR記録停止
agent-browser network requests # リクエスト一覧
agent-browser close
snapshot を取らずに直接要素を探すこともできる:
agent-browser find role button click --name "送信"
agent-browser find text "メールアドレス" click
agent-browser find label "パスワード" fill "password"
agent-browser open <URL>
agent-browser set viewport 1920 1080
agent-browser screenshot # → Read で画像確認
agent-browser snapshot -ic # → テキストで構造確認（巨大なら省略）
# ユーザーに画面の状態を報告
agent-browser close
# .env.test 等から認証情報を読む
agent-browser open <LOGIN_URL>
agent-browser snapshot -ic
agent-browser fill '@eN' '<email>' # snapshot の ref を使う
agent-browser fill '@eM' '<password>'
agent-browser click '@eK' # ログインボタン
agent-browser wait 3000
agent-browser open <TARGET_URL>
agent-browser set viewport 1920 1080
agent-browser screenshot
# 確認後
agent-browser close
agent-browser open <PROBLEMATIC_URL>
agent-browser set viewport 1920 1080
agent-browser screenshot # 初期状態
agent-browser snapshot -ic # DOM構造確認
# 問題を再現する操作
agent-browser fill '@eN' 'test-data'
agent-browser click '@eM'
agent-browser wait 2000
agent-browser screenshot # 操作後の状態
agent-browser snapshot -ic # エラーメッセージ等を確認
agent-browser close
agent-browser close を忘れないwait 2000〜wait 5000 で描画完了を待つset viewport 1920 1080 を先に実行する~/.agent-browser/ への書き込みが必要なため dangerouslyDisableSandbox: true で実行するNo reviews yet. Tell others what you thought.
No login needed. Share how it worked for you, ask a question, or note where it did not run.
No comments yet. Be the first to write one.
既存プロジェクトに新しいリポジトリを追加する。Workspaceにリポを追加した後、 CLAUDE.md・設計書・ドメイン構成を差分更新する。 「モバイルリポを追加した」「新しいリポを取り込んで」「リポを追加したので設計書を更新して」 「Workspaceにリポを足した」などのリクエストで使用する。 init-spec の移行モードではファイル存在チェックしか行わないため、 既存ドキュメントの内容を新リポに合わせて拡張するにはこのスキルを使う。
The English summary is being prepared. Showing the original description.
既存プロジェクトをサブエージェントで並列分析し、 精度の高い overview.md を生成する。init-spec の前処理として使う。 「既存プロジェクトを分析して」「コードベースを理解して設計書を作って」 「overview.mdを作って」などのリクエストで使用する。 ファイル数が200を超えるプロジェクトで特に有効。 200以下の場合は単一エージェントで全体を読む方が精度が高いため、 init-spec をそのまま実行することを提案する。
The English summary is being prepared. Showing the original description.
デザインの差し替え。ロジックは一切触らず見た目（HTML/CSS/テンプレート）だけを更新する。 「このデザインに差し替えて」「UIをFigmaの通りに変えて」「見た目だけ変えて」 「デザインを更新して」「CSSだけ直して」などのリクエストで使用する。 ロジック変更を伴う場合はrevise-specを使う。
The English summary is being prepared. Showing the original description.
ClaudeDesign（claude.ai/design）とClaude Codeの連携。DesignSyncツールで デザインプロジェクトからプロトタイプHTML等を取得（インポート）、または ローカルのコンポーネントをデザインシステムプロジェクトへ同期（プッシュ）する。 「ClaudeDesignからデザインを取得して」「claude.ai/design のURLを取り込んで」 「デザインプロジェクトに同期して」「デザインシステムをプッシュして」 などのリクエスト、または claude.ai/design のURLが渡されたときに使用する。 取得したデザインのコード実装への適用は apply-design を使う。
The English summary is being prepared. Showing the original description.
詳細設計書の一括生成。2つのモードを自動判定する: (A) コード分析モード: 既存コードから詳細設計書を逆生成する（init-spec + spec-all 完了後） (B) 設計書ファーストモード: 要件定義書から詳細設計書を新規作成する（コードなし） 「詳細設計を作って」「設計書を完成させて」「実装に必要な設計書を全部作って」 「他のエンジニアに渡せる設計書にして」などのリクエストで使用する。
The English summary is being prepared. Showing the original description.
MkDocs プレビュー（:8000）と承認API（:8765）を同時起動する。「ドックを起動して」「docsプレビュー見たい」「設計書をブラウザで確認したい」「承認ボタン使いたい」等のリクエストで発火する。
The English summary is being prepared. Showing the original description.