Communitygithub.com

マルチエージェントChromeオーケストレーター

複数のChrome DevTools MCPインスタンスを使用して、並列ブラウザ自動化を調整します。同時に多数のターゲットに対して同じブラウザ操作を行うタスク(コンタクトフォーム送信、申請書記入、JSレンダリングが必要なページのスクレイピングなど)に使用します。1~5の並列Chromeエージェントを起動できます。

マルチエージェントChromeオーケストレーター とは?

このスキルは、複数のClaude Codeエージェントを並列起動し、それぞれに独立したChromeブラウザを割り当てることで、ブラウザ操作を同時に実行できるようにします。主なユースケースは、リスト上のウェブサイトへのコンタクトフォーム送信、複数プラットフォームへの申請書記入、JavaScriptレンダリングを必要とするページのスクレイピングなど、時間のかかる反復的なブラウザタスクを高速化することです。アーキテクチャは、オーケストレーターとなるビジネスワークスペースと、各エージェント用の個別ワークスペースで構成され、`launch_chrome.sh`でChromeインスタンスを起動し、`chat.md`ファイルを介してエージェント間でタスクの割り当てとステータスを通信します。エージェントは`osascript`を使用して既存のClaude Codeセッション内からプログラム的に起動することも、手動でターミナルタブを開いて起動することも可能です。各エージェントは割り当てられたタスクを実行し、`[WORKING]`や`[DONE]`などのタグで進捗を報告します。タスク完了後は`kill_chrome.sh`ですべてのChromeインスタンスを破棄します。

対応✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/BIGboss248/nextjs-wordpress/tree/HEAD/.agents/skills/multi-agent-chrome

お気に入りのAIに質問する

このエージェントスキルを事前に読み込んだ状態で新しいチャットを開きます。

ドキュメント

マルチエージェントChromeオーケストレーター は何をしますか?

1~5の並列Claude Codeエージェントを起動し、それぞれに独立したChromeブラウザを割り当てて、ブラウザタスクを同時に実行します。

使用するタイミング

  • ウェブサイトのリストに対してコンタクトフォームを送信する
  • 複数のプラットフォームで申請書を記入する
  • 実際のブラウザ操作が必要なJSレンダリングページをスクレイピングする
  • 逐次実行では遅すぎる反復的なブラウザタスク

アーキテクチャ

Business workspace (orchestrator)
├── active/multi-chrome-agent/
│   ├── chat.md                    # 共有調整ファイル
│   ├── launch_chrome.sh           # ポート9223~9227にChromeインスタンスを生成
│   ├── kill_chrome.sh             # すべてのChromeインスタンスを終了
│   ├── chrome-agent-1/            # エージェント1用ワークスペース
│   │   ├── .mcp.json              # ポート9223のChrome DevTools
│   │   └── CLAUDE.md              # エージェント動作指示
│   ├── chrome-agent-2/            # ポート9224
│   ├── chrome-agent-3/            # ポート9225
│   ├── chrome-agent-4/            # ポート9226
│   └── chrome-agent-5/            # ポート9227

ステップバイステップの調整手順

1. 必要なエージェント数を決定する

タスクを確認します。10件のコンタクトフォームがある場合は、3~5エージェントが適切です。3件の場合は、2~3エージェントを使用します。過剰にプロビジョニングしないでください。

2. Chromeインスタンスを起動する

bash /Users/nicksaraev/Business/active/multi-chrome-agent/launch_chrome.sh [COUNT]

これにより、COUNT個のChromeインスタンスがポート9223以降で生成されます。各インスタンスの「READY」確認を待ちます。

3. チャットファイルをリセットする

チャットファイルをクリアし、タスクの割り当てを記述します:

# Multi-Chrome Agent Chat

## Orchestrator
[2026-03-05 14:30] コンタクトフォーム送信のために3エージェントを起動中。

### Agent 1 Tasks
1. https://example1.com/contact にアクセス → 名前:「山田太郎」、メール:「[email protected]」、メッセージ:「こんにちは、興味があります...」を入力
2. https://example2.com/contact にアクセス → 同様のフォーム入力

### Agent 2 Tasks
1. https://example3.com/contact にアクセス → フォーム入力
2. https://example4.com/contact にアクセス → フォーム入力

### Agent 3 Tasks
1. https://example5.com/contact にアクセス → フォーム入力
2. https://example6.com/contact にアクセス → フォーム入力

## Agent 1

## Agent 2

## Agent 3

4. Claude Codeエージェントを起動する

各エージェントについて、新しいターミナルを開いて以下を実行します:

cd /Users/nicksaraev/Business/active/multi-chrome-agent/chrome-agent-N && claude

ここでNは1~5です。各エージェントは以下を行います:

  • 自身のCLAUDE.md(ブラウザワーカー指示)を読み込む
  • 自身のローカル.mcp.jsonを介してChromeインスタンスに接続する
  • chat.mdを読み、自身のタスク割り当てを取得する
  • タスクを実行し、ステータスをchat.mdに報告する

osascriptによるプログラム的な起動: Claude CodeはCLAUDECODE環境変数によってネストされたセッションをブロックします。既存のセッション内からエージェントをプログラム的に起動するには、osascriptとenv -uを使用してブロック環境変数を除去します:

for i in 1 2 3 4 5; do
    osascript -e "tell application \"Terminal\" to do script \"cd /Users/nicksaraev/Business/active/multi-chrome-agent/chrome-agent-$i && env -u CLAUDECODE -u CLAUDE_CODE_ENTRYPOINT -u CLAUDE_AGENT_SDK_VERSION -u CLAUDE_CODE_ENABLE_SDK_FILE_CHECKPOINTING -u CLAUDE_CODE_EXPERIMENTAL_AGENT_TEAMS claude --dangerously-skip-permissions -p 'あなたはAgent $iです。/Users/nicksaraev/Business/active/multi-chrome-agent/chat.mdを読み、Agent $iに割り当てられたタスクを見つけて実行してください。Chrome DevTools MCPを使用してウェブサイトを閲覧し、リストを検索し、データを収集してください。結果はマークダウンテーブルとしてchat.mdのAgent $iセクションに書き込んでください。処理中は[WORKING]、完了時は[DONE]としてマークしてください。'\""
    sleep 2
done

これにより、それぞれ独立したClaude Codeセッションと独自のChrome DevTools MCPを持つ個別のTerminal.appウィンドウが開きます。

手動フォールバック: osascriptが機能しない場合は、ユーザーにN個のターミナルタブを開くように指示します:

Tab 1: cd ~/Business/active/multi-chrome-agent/chrome-agent-1 && claude
Tab 2: cd ~/Business/active/multi-chrome-agent/chrome-agent-2 && claude
...

5. 進捗を監視する

定期的にチャットファイルを読み、エージェントのステータスを確認します:

cat /Users/nicksaraev/Business/active/multi-chrome-agent/chat.md

各エージェントからの[DONE]、[ERROR]、または[WORKING]タグを探します。

6. 後片付け

すべてのエージェントが[DONE]を報告したら:

bash /Users/nicksaraev/Business/active/multi-chrome-agent/kill_chrome.sh

チャットプロトコル

エージェントは共有のchat.mdファイルを介して通信します:

タグ意味
[WORKING]エージェントがタスクを処理中
[DONE]エージェントが割り当てられた全タスクを完了
[ERROR]エージェントが障害に遭遇(CAPTCHA、タイムアウトなど)
[WAITING]エージェントがアイドル状態で、新しいタスクを待機中

ポートマップ

エージェントChromeポートワークスペース
19223chrome-agent-1/
29224chrome-agent-2/
39225chrome-agent-3/
49226chrome-agent-4/
59227chrome-agent-5/

ポート9222はメイン(非並列)のChrome DevTools MCP用に予約されています。

エッジケース

  • CAPTCHA: エージェントはchatに[ERROR] CAPTCHA on https://...を報告します。オーケストレーターは再割り当てまたはスキップできます。
  • レート制限: サイトがN回のリクエスト後にブロックする場合、URLをより多くのエージェントに分散して、各エージェントがサイトにアクセスする回数を減らします。
  • ログイン必須: タスクを割り当てる前に各Chromeインスタンスで事前認証を行うか、タスクリストにログイン手順を含めます。
  • 長時間実行タスク: エージェントは30秒ごとにchat.mdを確認します。オーケストレーターが中止する必要がある場合は、Orchestratorセクションに[ABORT]を記述します。

Individual skills in this repo

This repo contains 20 individual skills — each has its own dedicated page.

BIGboss248/nextjs-wordpress

Create, configure, manage, and validate Google Antigravity customizations including skills, rules, MCP servers, lifecycle hooks, plugins, and custom JSON configs. Use when adding new capabilities to Antigravity, configuring MCP servers, writing rules, creating skills, setting up hooks, or modernizing legacy workflows.

BIGboss248/nextjs-wordpress

Spawn multiple agents into a shared conversation where they debate, disagree, and converge on a solution via a shared chat.json file. Use for architecture decisions, code review debates, design trade-offs, or any problem that benefits from adversarial reasoning. Triggers on "chatroom", "agent debate", "have agents discuss", "agent chatroom", "debate this", or /agent-chatrooms. Also triggers on phrases like "have 3 agents argue about", "multi-agent discussion", or "let them debate".

BIGboss248/nextjs-wordpress

Always-active code intelligence, search, and navigation skill utilizing the codebase-memory MCP server. Enforces an index-first protocol (verifying and refreshing the knowledge graph via index_repository or index_status before searching, required because background auto_watch is disabled to eliminate editor stutter and system lag), followed by graph-first exploration (search_graph, trace_path, get_code_snippet, query_graph, get_architecture, detect_changes) instead of naive text grep or full-file reads. Always activate before searching the codebase, inspecting unknown architecture, finding symbols, or tracing callers/callees.

BIGboss248/nextjs-wordpress

>- Discover, interview, and craft comprehensive UX/UI design specifications (design-spec.md) and design tokens for web components. Triggers on "/component-design", "design component", "design section", "design UI", "wireframe component", or "create design spec".

BIGboss248/nextjs-wordpress

>- Configure and query WooCommerce APIs including WPGraphQL, WooGraphQL, and JWT auth for headless frontends. Use when connecting Next.js to WooCommerce or fetching store catalog data.

BIGboss248/nextjs-wordpress

Workflow for spawning an independent subagent to conduct unbiased code reviews and inject adversarial edge-case tests ([ComponentName].edge.test.tsx).

BIGboss248/nextjs-wordpress

>- Build Next.js App Router React components with Suspense skeletons, semantic OKLCH tokens, Jest + RTL unit tests, Playwright visual/hydration checks, and Tailwind logical styling. Triggers on "/nextjs-component-dev", "create component", "new component", "build component", or "develop component".

BIGboss248/nextjs-wordpress

>- Bootstrap, configure, and verify the complete Next.js App Router development environment, developer tooling, testing suites, MCP servers, Docker containerization, and CI/CD. Triggers on "/nextjs-dev-setup", "setup nextjs dev environment", "start a nextjs project", or "containerize nextjs app".

BIGboss248/nextjs-wordpress

>- Configure production health monitoring endpoints (/api/health), Docker Compose probes, and runtime metrics in Next.js App Router applications. Use when asked to "setup health check", "add health endpoint", "docker compose healthcheck nextjs", "configure health monitor", or "/nextjs-healthcheck".

BIGboss248/nextjs-wordpress

Bootstrap, configure, and verify next-intl App Router internationalization (proxy.ts/middleware.ts, next/root-params, [locale] layout, routing). Triggers on "/nextjs-i18n-setup", "setup i18n", "install next-intl", "configure next-intl", "add internationalization", "setup locale routing", "migrate to [locale]".

BIGboss248/nextjs-wordpress

Read/write translation dictionaries (messages/[locale].json), next-intl hooks (getTranslations/useTranslations), providers (Storybook/tests/subtrees), and BiDi styling. Triggers on "/nextjs-i18n-usage", "i18n dictionary", "use translations", "read dictionary", "i18n provider", "next-intl hooks", "storybook i18n", "test i18n", "add translation keys", "localize component", "create a component", "update a component".

BIGboss248/nextjs-wordpress

>- Configure, test, and verify OpenTelemetry (OTel) observability in Next.js App Router applications. Triggers on "/nextjs-otel", "setup otel", "configure opentelemetry", "test otel", or "verify opentelemetry".

BIGboss248/nextjs-wordpress

Step-by-step workflow for designing and building Next.js App Router pages (RSC page.tsx, loading skeleton, metadata, JSON-LD schema, and dynamic static params). Triggers on "/nextjs-page-dev", "create page", "new page", "develop page", "build route", or "implement page".

BIGboss248/nextjs-wordpress

>- Orchestrate end-to-end planning for Next.js App Router projects, generating canonical specifications, design systems, and a 7-phase modular implementation roadmap in docs/plan/. Triggers on "/nextjs-plan", "plan a nextjs project", "plan nextjs app", "create nextjs project plan", "outline nextjs architecture", or "generate plan".

BIGboss248/nextjs-wordpress

Workflow and engineering standards for crafting co-located Storybook CSF3 stories ([ComponentName].stories.tsx) with interactive controls, action spies, and 4 canonical theme variants.

BIGboss248/nextjs-wordpress

>- Build Next.js e-commerce frontends backed by WooCommerce APIs, handling ISR catalogs, cart sessions, and JWT authentication. Use when building or querying Next.js stores with WooCommerce.

BIGboss248/nextjs-wordpress

Self-correcting rules engine and feedback loop that learns from user corrections, mistakes, and project-specific constraints by maintaining a persistent autofix ruleset. Scans learned rules before starting any task, resolves conflicts, and automatically appends new rules upon corrections. Triggers on user corrections ("no, do it this way", "never do X", "always use Y"), /learn, "self repair", "add rule", "update rules", or when diagnosing assumptions and bugs. CRITICAL ALWAYS-ACTIVE LIFECYCLE SKILL. Must always be kept in context, loaded at session start, and consulted before starting ANY task to read and apply active constraints from autofix.json. MUST ALWAYS be triggered immediately whenever the user provides ANY correction, preference, criticism, rejection of an approach, or adjustment ("no", "don't do X", "use Y", "remember", "prefer"), or when any mistake/bug is identified. Automatically and immediately formulates and appends the new imperative rule to the project's autofix.json ruleset file.

BIGboss248/nextjs-wordpress

Setup, automate, and execute SEO audits, CI/CD pre-push/pre-deploy checks, and ranking optimizations using the seo CLI and MCP server.

BIGboss248/nextjs-wordpress

End-to-end repository onboarding and development environment setup skill. Scans repository structure, configures project metadata (docs/project.json), sets up the codebase-memory-mcp code intelligence knowledge graph server (in workspace mcp.json and globally for AGY only), configures git hooks with Husky and Commitlint, establishes multi-stage production Docker containerization, and automates credit-optimized Release Please CI/CD with multi-arch (AMD64 & ARM64) GHCR package deployment. Triggers on "/setup-repository", "setup repository", "setup repo", "initialize repository", "new repo setup", or when preparing any repository for development and AI agent workflows.

BIGboss248/nextjs-wordpress

AI screen scaffolding, layout generation, and variant exploration workflow powered by Google Stitch (StitchMCP). Consumes a component design specification (docs/design/components/[page name]/[component name]/design-spec.md), verifies and reuses the central Stitch project in docs/project.json (or creates/persists one if absent), seeds the project's design system into Stitch, synthesizes layout prompts to generate a screen and create one variant of the given design spec file, downloads and saves Stitch JPG screenshots and HTML code files directly into docs/design/components/[page name]/[component name]/stitch/ using binary-safe PowerShell Invoke-WebRequest, outputs image prompts to the user if visual assets are needed (without calling generate_image to conserve tokens), updates design-spec.md with Stitch layout benchmarks, and audits asset download integrity with an independent subagent. Triggers on "/stitch-design", "generate stitch screen", "create stitch variant", "scaffold screen with stitch", or "stitch...

関連スキル