Communitygithub.com

BIGboss248/nextjs-wordpress

여러 Chrome DevTools MCP 인스턴스를 사용하여 병렬 브라우저 자동화를 오케스트레이션합니다. 문의 양식 제출, 지원서 작성, JS 렌더링이 필요한 페이지 스크래핑 등 동일한 브라우저 작업을 여러 대상에 대해 동시에 수행해야 할 때 사용합니다. 1~5개의 병렬 Chrome 에이전트를 실행합니다.

nextjs-wordpress란 무엇인가요?

이 스킬은 여러 Claude Code 에이전트가 각각 자체 Chrome 브라우저 인스턴스를 사용하여 브라우저 기반 작업을 동시에 수행할 수 있도록 하는 '멀티 에이전트 Chrome 오케스트레이터'입니다. 특히 반복적이고 시간이 많이 소요되는 브라우저 작업(예: 여러 웹사이트에 양식 제출, 여러 플랫폼에 지원서 작성, JavaScript 렌더링이 필요한 페이지 스크래핑)을 순차적으로 처리할 때 발생하는 병목 현상을 해결하기 위해 설계되었습니다. orchestrator는 공유 `chat.md` 파일을 통해 작업을 조정하고, 5개의 전용 에이전트 워크스페이스(각각 9223-9227 포트의 Chrome 인스턴스에 연결됨)를 통해 통신합니다. 각 에이전트는 `CLAUDE.md` 지침과 `.mcp.json` 설정을 사용하여 자체 `claude` 세션을 시작하며, 진행 상황을 `chat.md`에 `[WORKING]`, `[DONE]`, `[ERROR]` 등의 태그로 보고합니다. 이 스킬은 macOS의 `osascript`를 통한 프로그래밍 방식 에이전트 실행을 지원하며, 수동 대체 방법도 제공합니다. 또한 CAPTCHA, 속도 제한, 로그인 필요 작업, 장기 실행 작업 중단과 같은 엣지 케이스를 처리하는 방법을 설명합니다.

지원 대상✓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]

이 명령은 9223+ 포트에 COUNT개의 Chrome 인스턴스를 실행합니다. 각각에 대해 "READY" 확인 메시지를 기다립니다.

3. 채팅 파일 초기화

채팅 파일을 지우고 작업 할당을 작성합니다:

# Multi-Chrome Agent Chat

## Orchestrator
[2026-03-05 14:30] 문의 양식 제출을 위해 3개의 에이전트를 시작합니다.

### Agent 1 Tasks
1. https://example1.com/contact 방문 -> 이름: "Nick Saraev", 이메일: "[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 'You are Agent $i. Read /Users/nicksaraev/Business/active/multi-chrome-agent/chat.md, find your tasks under Agent $i, and execute them. Use Chrome DevTools MCP to browse websites, search listings, and collect data. Write your findings as a markdown table back to chat.md under the Agent $i section. Mark yourself as [WORKING] while active and [DONE] when finished.'\""
    sleep 2
done

이 명령은 각각 자체 Chrome DevTools MCP가 있는 독립적인 Claude Code 세션을 실행하는 별도의 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: 에이전트가 [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...

관련 스킬