ブラウザ自動化スケジューリングスキル

本スキルは、ブラウザ自動化タスクを専門の chrome-devtools-expert agent に委譲する役割を担います。agent による隔離を通じて、メインの会話コンテキストの明確さを維持し、ブラウザ操作中の大量の token 消費によるメインの会話の汚染を回避します。

核心機能

ブラウザ自動化操作が必要なシナリオを識別し、タスクを chrome-devtools-expert agent に委譲します。この agent は、Chrome DevTools MCP ツールを専門的に使用して、Web 界面のインタラクション、自動化テスト、およびパフォーマンス分析を行います。

適用シナリオ

本スキルは、以下のシナリオに適用できます。

1. ページナビゲーションと閲覧

   • 指定された URL の Web ページを開く
   • ページ間をナビゲートする（進む、戻る）
   • 複数のブラウザタブを管理する

2. 要素インタラクション操作

   • ボタン、リンクなどの要素をクリックする
   • 要素にホバーして効果をトリガーする
   • 要素を指定された位置にドラッグアンドドロップする

3. フォーム入力と送信

   • 入力ボックス、テキストエリアに入力する
   • ドロップダウンメニューのオプションを選択する
   • フォームを送信して応答を待つ

4. ページスクリーンショットとスナップショット

   • ページ全体または特定の要素をキャプチャする
   • ページのテキストスナップショットを取得する
   • スクリーンショットをファイルに保存する

5. パフォーマンス分析とテスト

   • パフォーマンス追跡を開始する
   • ページ読み込みパフォーマンスを分析する
   • コア Web バイタル（CWV）を取得する

6. 自動化テスト

   • 機能テストプロセスを実行する
   • ページ要素の状態を検証する
   • コンソールエラーをチェックする

7. データ収集

   • Web ページから情報を抽出する
   • JavaScript を実行してデータを取得する
   • ネットワークリクエストを監視する

8. ネットワークとデバイスのシミュレーション

   • さまざまなネットワーク条件をシミュレートする
   • CPU パフォーマンスの制限をシミュレートする
   • ページサイズを調整する

呼び出しルール

1. 委譲方式

Task tool を使用して chrome-devtools-expert agent を呼び出します。

Task tool パラメータ：
- subagent_type: "chrome-devtools-expert"
- description: タスクの簡単な説明（3〜5文字）
- prompt: 詳細な操作のニーズと目標

シナリオ例

例 1：ページを開いてスクリーンショットを撮る

ユーザーの要求: "example.com を開いてスクリーンショットを撮ってください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "ページを開いてスクリーンショットを撮る"
- prompt: "https://example.com を開き、ページが読み込まれるのを待ってからスクリーンショットを撮り、スクリーンショットをデスクトップに保存してください"

例 2：フォームの自動化

ユーザーの要求: "このログインフォームに入力して送信してください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "ログインフォームに入力する"
- prompt: "現在のページでログインフォームを見つけ、ユーザー名 'test@example.com'、パスワード 'password123' を入力し、ログインボタンをクリックして、応答を待って成功したかどうかを教えてください"

例 3：パフォーマンス分析

ユーザーの要求: "このページの読み込みパフォーマンスを分析してください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "ページパフォーマンス分析"
- prompt: "https://example.com のパフォーマンス分析を実行し、パフォーマンス追跡を開始し、ページを更新し、追跡を停止し、コア Web 指標とパフォーマンスに関する洞察を提供してください"

例 4：自動化テスト

ユーザーの要求: "カートに商品を追加する機能をテストしてください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "カート機能をテストする"
- prompt: "ショッピングサイトのページを開き、商品リストの最初のアイテムを見つけ、'カートに追加' ボタンをクリックして、カートアイコンの数が増加するかどうかを確認し、機能が正常かどうかを検証してください"

例 5：データ収集

ユーザーの要求: "このページからすべての製品タイトルを抽出してください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "製品タイトルを抽出する"
- prompt: "現在のページから JavaScript を使用してすべての製品タイトルを抽出し、タイトルのリストを返してください"

例 6：ネットワーク条件テスト

ユーザーの要求: "低速 3G ネットワークでページの読み込みをテストしてください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "低速ネットワークテスト"
- prompt: "ネットワークシミュレーションを Slow 3G に設定し、https://example.com を開き、ページの読み込み時間とユーザーエクスペリエンスを記録し、通常のネットワークに戻してください"

例 7：多段階操作

ユーザーの要求: "Web サイトを開き、ログインし、設定ページに移動してスクリーンショットを撮ってください"

実行方法:

Task tool の呼び出し:
- subagent_type: "chrome-devtools-expert"
- description: "ログインして設定ページをスクリーンショットする"
- prompt: "1) https://example.com を開きます
2) ログインフォーム（ユーザー名：test@example.com、パスワード：password123）に入力して送信します
3) ログインが成功するのを待ちます
4) ナビゲーションバーの '設定' リンクをクリックします
5) 設定ページが完全に読み込まれるのを待ちます
6) 設定ページの完全なスクリーンショットをキャプチャして保存します"

実行原則

1. 自動識別: ブラウザ操作が必要であると判断された場合、本スキルを自動的にアクティブ化します
2. 迅速な委譲: メインの会話でブラウザ操作を試行せず、専門の agent に直接委譲します
3. コンテキストの分離: 大量のブラウザ出力データを agent コンテキストに分離します
4. 結果の簡素化: agent は重要な操作結果のみを返し、冗長な情報をフィルタリングします
5. 効率の優先: agent は最適な戦略を採用してブラウザ操作を実行し、token 消費を最小限に抑えます

本スキルを通じて、メイン agent はブラウザ自動化タスクを専門の agent に効率的に委譲し、会話フローを明確に保ち、token の使用を最適化できます。