team-frontend について
要件分析、デザインシステム生成、実装、品質確認を扱うフロントエンド開発向けチームスキルです。コーディネーターと専門ロールで作業を進め、セッションの確認や再開にも対応します。
主な機能
- 01要件分析とデザインシステム生成
- 02フロントエンド実装と品質確認
- 03コーディネーターとロール別ルーティング
- 04team-worker による並行作業
- 05セッション状況の確認と再開
活用シーン
- 01要件から実装までのフロントエンド開発
- 02デザインシステムの作成と画面実装
- 03品質確認とチームタスク状況の追跡
MCP 対応
セッション内のロール間通信に、メッセージバスとして `mcp__ccw-tools__team_msg` を使用します。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ catlog22/ claude-code-workflow --skill team-frontendインストール後、Claude Code で/team-frontendを入力して読み込まれたか確認します。
同梱ファイル
SKILL.md と一緒にインストールされる参考資料やスクリプト。
roles/analyst/role.mdroles/architect/role.mdroles/coordinator/role.mdroles/coordinator/commands/analyze.mddispatch.mdmonitor.mdroles/developer/role.mdroles/qa/role.mdspecs/pipelines.mdteam-config.json詳細
チームフロントエンド開発
統合チームスキル:ui-ux-pro-max によるデザインインテリジェンスを内蔵したフロントエンド開発です。要件分析、デザインシステムの生成、フロントエンドの実装、品質保証をカバーします。team-worker エージェントアーキテクチャを基盤としており、すべてのワーカーロールは単一のエージェント定義を共有し、ロール固有の Phase 2-4 は role.md の仕様から読み込まれます。
アーキテクチャ
Skill(skill="team-frontend", args="task description")
|
SKILL.md (this file) = Router
|
+--------------+--------------+
| |
no --role flag --role <name>
| |
Coordinator Worker
roles/coordinator/role.md roles/<name>/role.md
|
+-- analyze -> dispatch -> spawn workers -> STOP
|
+-------+-------+-------+
v v v v
[analyst] [architect] [developer] [qa]
(team-worker agents, each loads roles/<role>/role.md)
ロールレジストリ
| ロール | パス | プレフィックス | 内部ループ |
|---|---|---|---|
| コーディネーター | roles/coordinator/role.md | — | — |
| アナリスト | roles/analyst/role.md | ANALYZE-* | false |
| アーキテクト | roles/architect/role.md | ARCH-* | false |
| 開発者 | roles/developer/role.md | DEV-* | true |
| QA | roles/qa/role.md | QA-* | false |
ロールルーター
$ARGUMENTS を解析します:
--role <name>がある →roles/<name>/role.mdを読み込み、Phase 2-4 を実行--roleがない →@roles/coordinator/role.mdを読み込み、エントリルーターを実行
共有定数
- セッションプレフィックス:
FE - セッションパス:
.workflow/.team/FE-<slug>-<date>/ - CLI ツール:
ccw cli --mode analysis(読み取り専用)、ccw cli --mode write(変更) - メッセージバス:
mcp__ccw-tools__team_msg(session_id=<session-id>, ...)
ワーカー起動テンプレート
コーディネーターはこのテンプレートを使用してワーカーを起動します:
Agent({
subagent_type: "team-worker",
description: "Spawn <role> worker",
team_name: "frontend",
name: "<role>",
run_in_background: true,
prompt: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: frontend
requirement: <task-description>
inner_loop: <true|false>
## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.
Read role_spec file (@<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.
Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
})
ユーザーコマンド
| コマンド | アクション |
|---|---|
check / status | 実行ステータスグラフを表示 |
resume / continue | 次のステップに進む |
セッションディレクトリ
.workflow/.team/FE-<slug>-<YYYY-MM-DD>/
├── .msg/
│ ├── messages.jsonl # Message bus log
│ └── meta.json # Session state + cross-role state
├── task-analysis.json # Coordinator analyze output
├── wisdom/ # Cross-task knowledge
├── analysis/ # Analyst output
│ ├── design-intelligence.json
│ └── requirements.md
├── architecture/ # Architect output
│ ├── design-tokens.json
│ ├── component-specs/
│ └── project-structure.md
├── qa/ # QA output
│ └── audit-<NNN>.md
└── build/ # Developer output
仕様リファレンス
- specs/pipelines.md — パイプライン定義とタスクレジストリ
エラー処理
| シナリオ | 解決方法 |
|---|---|
| 不明なコマンド | 利用可能なコマンド一覧とともにエラーを表示 |
| ロールが見つからない | ロールレジストリとともにエラーを表示 |
| 2 回の GC ラウンドで QA スコアが 6 未満 | ユーザーにエスカレーション |
| ui-ux-pro-max が利用できない | LLM の一般的なデザイン知識にフォールバック |
| ワーカーから応答がない | 待機中のタスクを報告し、ユーザーに resume を提案 |
| パイプラインのデッドロック | blockedBy チェーンを確認し、ブロック箇所を報告 |
コメント
Markdown 対応