Communitygithub.com

BIGboss248/nextjs-wordpress

编排并行浏览器自动化:使用多个Chrome DevTools MCP实例同时执行相同的浏览器操作,例如提交联系表单、填写申请或抓取需要JS渲染的页面。支持1-5个并行Chrome代理。

nextjs-wordpress 是什么?

本技能(Multi-Agent Chrome Orchestrator)允许您在一次任务中同时启动1-5个独立的Claude Code代理,每个代理都拥有自己的Chrome浏览器实例,用于并行执行浏览器自动化任务。它通过共享的`chat.md`文件进行协调,每个代理读取自己的任务分配并报告状态(工作/完成/错误)。技能提供了完整的步骤指南:启动Chrome实例、重置聊天文件、使用`osascript`或手动方式生成代理、监控进度以及最终清理。适用于提交联系表单、多平台申请填写、抓取JS渲染页面等重复性、耗时的浏览器任务。支持平台为Claude Code,并假设您已配置好Chrome DevTools MCP。

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

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

多代理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. 重置聊天文件

清除聊天文件并写入任务分配:

# 多Chrome代理聊天

## 编排器
[2026-03-05 14:30] 启动3个代理用于联系表单提交。

### 代理1任务
1. 访问 https://example1.com/contact -> 填写姓名:"Nick Saraev",邮箱:"[email protected]",消息:"您好,我对...感兴趣"
2. 访问 https://example2.com/contact -> 同样的表单填写

### 代理2任务
1. 访问 https://example3.com/contact -> 填写表单
2. 访问 https://example4.com/contact -> 填写表单

### 代理3任务
1. 访问 https://example5.com/contact -> 填写表单
2. 访问 https://example6.com/contact -> 填写表单

## 代理1

## 代理2

## 代理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 '你是代理$i。读取/Users/nicksaraev/Business/active/multi-chrome-agent/chat.md,找到你在代理$i下的任务并执行它们。使用Chrome DevTools MCP浏览网站、搜索列表并收集数据。将你的发现以markdown表格形式写回chat.md中代理$i的部分。活动时标记自己为[WORKING],完成后标记为[DONE]。'\""
    sleep 2
done

这将打开独立的Terminal.app窗口,每个窗口运行一个独立的Claude Code会话,并配有各自的Chrome DevTools MCP。

手动后备方案: 如果osascript不起作用,告诉用户打开N个终端标签页:

标签页1:cd ~/Business/active/multi-chrome-agent/chrome-agent-1 && claude
标签页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]代理遇到阻塞(验证码、超时等)
[WAITING]代理空闲,等待新任务

端口映射

代理Chrome端口工作空间
19223chrome-agent-1/
29224chrome-agent-2/
39225chrome-agent-3/
49226chrome-agent-4/
59227chrome-agent-5/

端口9222保留给主(非并行)Chrome DevTools MCP。

边界情况

  • 验证码: 代理在聊天中报告[ERROR] CAPTCHA on https://...。编排器可以重新分配或跳过。
  • 速率限制: 如果某个网站在N次请求后开始阻止,则将URL分散到更多代理上,使每个代理对该网站的访问次数减少。
  • 需要登录: 在分配任务之前,在每个Chrome实例中预先进行身份验证,或者在任务列表中包含登录步骤。
  • 长时间运行的任务: 代理每30秒检查一次chat.md。如果编排器需要中止,请在编排器部分写入[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...

相关技能