mcpField
T
team-frontend

team-frontend

github.com/catlog22开发2.1k54 次安装19 周前更新
代码仓库

关于 team-frontend

面向前端开发的团队技能，覆盖需求分析、设计系统生成、实现与质量检查，并通过协调者和专业工作角色组织流程。它还包含 ui-ux-pro-max 设计能力，并支持查看状态与恢复流程。

主要功能

  1. 01需求分析与设计系统生成
  2. 02前端实现与质量检查
  3. 03协调者及专业角色路由
  4. 04团队工作者并行协作
  5. 05状态查看与流程恢复

适用场景

  1. 01从需求推进前端开发流程
  2. 02生成设计系统并实现界面
  3. 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.md
roles/architect/
role.md
roles/coordinator/
role.md
roles/coordinator/commands/
analyze.md
dispatch.md
monitor.md
roles/developer/
role.md
roles/qa/
role.md
specs/
pipelines.md
team-config.json

详细介绍

团队前端开发

统一的团队技能：内置 ui-ux-pro-max 设计智能的前端开发。涵盖需求分析、设计系统生成、前端实现和质量保证。基于 team-worker Agent 架构——所有工作角色共用一个 Agent 定义，并根据角色从 role.md 规范加载 Phase 2-4。

架构

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)

角色注册表

角色路径前缀内循环
coordinatorroles/coordinator/role.md——
analystroles/analyst/role.mdANALYZE-*false
architectroles/architect/role.mdARCH-*false
developerroles/developer/role.mdDEV-*true
qaroles/qa/role.mdQA-*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>, ...)

工作器启动模板

Coordinator 使用此模板启动工作器：

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

规范参考

错误处理

场景解决方案
未知命令报错并显示可用命令列表
未找到角色报错并显示角色注册表
经过 2 轮 GC 后 QA 评分 < 6上报给用户
ui-ux-pro-max 不可用降级为大模型通用设计知识
工作器无响应报告等待中的任务，并建议用户执行 resume
工作流死锁检查 blockedBy 链，并报告阻塞点

评论

支持 Markdown