🛠️ エージェントCollaborationProtocol
APIとUIの両方が必要なフルスタック機能開発において、バックエンドとフロントエンドのエンジニアを連携・調整するSkill。
📺 まず動画で見る(YouTube)
▶ 【衝撃】最強のAIエージェント「Claude Code」の最新機能・使い方・プログラミングをAIで効率化する超実践術を解説! ↗
※ jpskill.com 編集部が参考用に選んだ動画です。動画の内容と Skill の挙動は厳密には一致しないことがあります。
📜 元の英語説明(参考)
Structured multi-agent collaboration for backend + frontend builds. Use when an orchestrator needs to coordinate a backend engineer and frontend engineer on the same feature. Triggered by multi-role build requests like "build a dashboard with an API and UI" or "create a full-stack feature" or any task requiring both backend (API, data, infra) and frontend (UI, templates, design) work.
🇯🇵 日本人クリエイター向け解説
APIとUIの両方が必要なフルスタック機能開発において、バックエンドとフロントエンドのエンジニアを連携・調整するSkill。
※ jpskill.com 編集部が日本のビジネス現場向けに補足した解説です。Skill本体の挙動とは独立した参考情報です。
⚠️ ダウンロード・利用は自己責任でお願いします。当サイトは内容・動作・安全性について責任を負いません。
🎯 このSkillでできること
下記の説明文を読むと、このSkillがあなたに何をしてくれるかが分かります。Claudeにこの分野の依頼をすると、自動で発動します。
📦 インストール方法 (3ステップ)
- 1. 上の「ダウンロード」ボタンを押して .skill ファイルを取得
- 2. ファイル名の拡張子を .skill から .zip に変えて展開(macは自動展開可)
- 3. 展開してできたフォルダを、ホームフォルダの
.claude/skills/に置く- · macOS / Linux:
~/.claude/skills/ - · Windows:
%USERPROFILE%\.claude\skills\
- · macOS / Linux:
Claude Code を再起動すれば完了。「このSkillを使って…」と話しかけなくても、関連する依頼で自動的に呼び出されます。
詳しい使い方ガイドを見る →- 最終更新
- 2026-05-17
- 取得日時
- 2026-05-17
- 同梱ファイル
- 5
💬 こう話しかけるだけ — サンプルプロンプト
- › Agent Collaboration Protocol を使って、最小構成のサンプルコードを示して
- › Agent Collaboration Protocol の主な使い方と注意点を教えて
- › Agent Collaboration Protocol を既存プロジェクトに組み込む方法を教えて
これをClaude Code に貼るだけで、このSkillが自動発動します。
📖 Claude が読む原文 SKILL.md(中身を展開)
この本文は AI(Claude)が読むための原文(英語または中国語)です。日本語訳は順次追加中。
Agent Collaboration Protocol
How It Works
Three roles collaborate through a shared workspace:
| Role | Responsibility |
|---|---|
| Orchestrator | Defines the contract, spawns both builders, verifies integration, merges |
| Backend Engineer | Writes API code, data models, infrastructure |
| Frontend Engineer | Writes UI components, templates, styles |
The contract lives in shared/build-{YYYYMMDD}/. Both builders write to the same directory. The orchestrator inspects and merges when both are done.
Workflow
Step 1: Orchestrator Creates the Build Directory and Contract
shared/build-{YYYYMMDD}/
SPEC.md ← Integration contract
backend/ ← Backend Engineer writes here
frontend/ ← Frontend Engineer writes here
integration.md ← Both update as they work
Write SPEC.md with these sections:
# SPEC: {Feature Name}
## Contract
- API base path, auth scheme, content type
- Data models (all entities, fields, types, relationships)
- Endpoints (method, path, request/response shapes)
- Error format
## Routes
Backend Engineer implements these. Frontend Engineer consumes them.
## UI Components
Frontend Engineer builds these. Backend Engineer doesn't touch them.
## Success Criteria
Observable behavior. Not "tests pass" — "user can log in and see calendar."
Step 2: Orchestrator Spawns Agents
Spawn two subagents with sessions_spawn:
Backend Engineer:
task: >
Implement the API spec in shared/build-{YYYYMMDD}/SPEC.md.
Write all backend code to shared/build-{YYYYMMDD}/backend/.
Update shared/build-{YYYYMMDD}/integration.md with progress.
Use {backend framework} (FastAPI, Express, etc.).
Frontend Engineer:
task: >
Implement the UI for the spec in shared/build-{YYYYMMDD}/SPEC.md.
Write all frontend code to shared/build-{YYYYMMDD}/frontend/.
Use the API contract in SPEC.md for your fetch calls.
Update shared/build-{YYYYMMDD}/integration.md with progress.
Use {frontend stack} (HTMX+Tailwind, React, etc.).
Set mode: "run" for one-shot completion.
Step 3: Both Build Simultaneously
Backend Engineer writes to shared/build-{YYYYMMDD}/backend/:
- Router/handler code
- Data models and schemas
- Config and infrastructure files
- Updates
integration.mdwith progress and any blockers
Frontend Engineer writes to shared/build-{YYYYMMDD}/frontend/:
- UI components / templates
- Styles and layout
- API client code
- Updates
integration.mdwith progress and any blockers
Step 4: Orchestrator Verifies and Merges
- Read
integration.mdfrom both agents - Inspect files in
backend/andfrontend/ - Verify API responses match UI expectations
- If mismatches found, send corrections to the responsible agent
- Move code to production paths
- Archive the build directory (or delete it)
Setup Script
Run once per project to initialize the collaboration structure:
scripts/init_collab.sh /path/to/project
Creates shared/ with template SPEC.md and .gitignore.
Reference Files
For deeper patterns and templates:
references/spec-template.md— Full SPEC.md template with examplesreferences/integration-log.md— integration.md status formatreferences/handoff-format.md— Task handoff message template
When Not to Use
- Single-file changes (just do it directly)
- Solo tasks that don't cross backend/frontend boundaries
- Bug fixes that are purely backend or purely frontend
- Tasks where one agent can handle both sides (use a single subagent instead)
Limitations
- Requires the
sessions_spawntool (OpenClaw v1.0+) - Works best with model pairs that have complementary strengths (e.g., backend-specialized + frontend-specialized)
- Not a replacement for a design system — frontend engineer should have access to design tokens separately
同梱ファイル
※ ZIPに含まれるファイル一覧。`SKILL.md` 本体に加え、参考資料・サンプル・スクリプトが入っている場合があります。
- 📄 SKILL.md (4,343 bytes)
- 📎 references/handoff-format.md (688 bytes)
- 📎 references/integration-log.md (858 bytes)
- 📎 references/spec-template.md (1,950 bytes)
- 📎 scripts/init_collab.sh (1,548 bytes)