Team Frontend Development

Team Frontend Development

全栈前端开发团队，内置 ui-ux-pro-max 设计智能。具备需求分析、设计系统生成、前端实现、质量保证的完整能力。All team members invoke this skill with --role=xxx to route to role-specific execution.

Architecture Overview

┌──────────────────────────────────────────────────┐
│  Skill(skill="team-frontend", args="--role=xxx")  │
└───────────────────┬──────────────────────────────┘
                    │ Role Router
    ┌───────┬───────┼───────┬───────┐
    ↓       ↓       ↓       ↓       ↓
┌──────────┐┌──────────┐┌──────────┐┌──────────┐┌──────────┐
│coordinator││ analyst  ││ architect││ developer││    qa    │
│ roles/   ││ roles/   ││ roles/   ││ roles/   ││ roles/   │
└──────────┘└──────────┘└──────────┘└──────────┘└──────────┘

Command Architecture

Each role is organized as a folder with a role.md orchestrator and optional commands/ for delegation:

roles/
├── coordinator/
│   ├── role.md
│   └── commands/
├── analyst/
│   ├── role.md
│   └── commands/
│       └── design-intelligence.md
├── architect/
│   ├── role.md
│   └── commands/
├── developer/
│   ├── role.md
│   └── commands/
└── qa/
    ├── role.md
    └── commands/
        └── pre-delivery-checklist.md

Role Router

Input Parsing

Parse $ARGUMENTS to extract --role:

const args = "$ARGUMENTS"
const roleMatch = args.match(/​--role[=\s]+(\w+)/)

if (!roleMatch) {
  throw new Error("Missing --role argument. Available roles: coordinator, analyst, architect, developer, qa")
}

const role = roleMatch[1]
const teamName = args.match(/​--team[=\s]+([\w-]+)/)?.[1] || "frontend"

Role Dispatch

const VALID_ROLES = {
  "coordinator": { file: "roles/​coordinator/​role.md", prefix: null },
  "analyst":     { file: "roles/​analyst/​role.md",     prefix: "ANALYZE" },
  "architect":   { file: "roles/​architect/​role.md",   prefix: "ARCH" },
  "developer":   { file: "roles/​developer/​role.md",   prefix: "DEV" },
  "qa":          { file: "roles/​qa/​role.md",          prefix: "QA" }
}

if (!VALID_ROLES[role]) {
  throw new Error(`Unknown role: ${role}. Available: ${Object.keys(VALID_ROLES).join(', ')}`)
}

// Read and execute role-specific logic
Read(VALID_ROLES[role].file)
// → Execute the 5-phase process defined in that file

Available Roles

Shared Infrastructure

Role Isolation Rules

核心原则: 每个角色仅能执行自己职责范围内的工作。

Output Tagging（强制）

所有角色的输出必须带 [role_name] 标识前缀：

SendMessage({
  content: `## [${role}] ...`,
  summary: `[${role}] ...`
})

mcp__ccw-tools__team_msg({
  summary: `[${role}] ...`
})

Coordinator 隔离

Worker 隔离

Message Bus (All Roles)

Every SendMessage before, must call mcp__ccw-tools__team_msg to log:

mcp__ccw-tools__team_msg({
  operation: "log",
  team: teamName,
  from: role,
  to: "coordinator",
  type: "<type>",
  summary: `[${role}] <summary>`,
  ref: "<file_path>"
})

Message types by role:

CLI Fallback

当 mcp__ccw-tools__team_msg MCP 不可用时：

Bash(`ccw team log --team "${teamName}" --from "${role}" --to "coordinator" --type "<type>" --summary "<summary>" --json`)

Task Lifecycle (All Worker Roles)

// Standard task lifecycle every worker role follows
// Phase 1: Discovery
const tasks = TaskList()
const myTasks = tasks.filter(t =>
  t.subject.startsWith(`${VALID_ROLES[role].prefix}-`) &&
  t.owner === role &&
  t.status === 'pending' &&
  t.blockedBy.length === 0
)
if (myTasks.length === 0) return // idle
const task = TaskGet({ taskId: myTasks[0].id })
TaskUpdate({ taskId: task.id, status: 'in_progress' })

// Phase 2-4: Role-specific (see roles/​{role}/​role.md)

// Phase 5: Report + Loop — 所有输出必须带 [role] 标识
mcp__ccw-tools__team_msg({ operation: "log", team: teamName, from: role, to: "coordinator", type: "...", summary: `[${role}] ...` })
SendMessage({ type: "message", recipient: "coordinator", content: `## [${role}] ...`, summary: `[${role}] ...` })
TaskUpdate({ taskId: task.id, status: 'completed' })
// Check for next task → back to Phase 1

Pipeline Architecture

Three Pipeline Modes

page (单页面 - CP-1 线性):
  ANALYZE-001 → ARCH-001 → DEV-001 → QA-001

feature (多组件特性 - CP-1 + CP-2 + CP-8):
  ANALYZE-001 → ARCH-001(tokens+structure) → QA-001(architecture-review)
  → DEV-001(components) → QA-002(code-review)

system (完整前端系统 - CP-1 + CP-2 + CP-8 + CP-9 双轨):
  ANALYZE-001 → ARCH-001(tokens) → QA-001(token-review)
  → [ARCH-002(components) ∥ DEV-001(tokens)](并行, blockedBy QA-001)
  → QA-002(component-review) → DEV-002(components) → QA-003(final)

Generator-Critic Loop (CP-2)

developer ↔ qa 循环，确保代码质量和设计合规：

┌──────────┐     DEV artifact        ┌──────────┐
│ developer│ ──────────────────────→  │    qa    │
│(Generator)│                         │ (Critic) │
│          │  ←────────────────────── │          │
└──────────┘   QA feedback            └──────────┘
                (max 2 rounds)

Convergence: qa.score >= 8 && qa.critical_count === 0

Consulting Pattern (CP-8)

developer 可向 analyst 咨询设计决策：

developer → coordinator: "需要设计决策咨询"
coordinator → analyst: 创建 ANALYZE-consult 任务
analyst → coordinator: 设计建议
coordinator → developer: 转发建议

Shared Memory

{
  "design_intelligence": {},
  "design_token_registry": {
    "colors": {}, "typography": {}, "spacing": {}, "shadows": {}
  },
  "component_inventory": [],
  "style_decisions": [],
  "qa_history": [],
  "industry_context": {}
}

每个角色在 Phase 2 读取，Phase 5 写入自己负责的字段。

Session Directory

.workflow/​.team/​FE-{slug}-{YYYY-MM-DD}/
├── team-session.json           # Session state
├── shared-memory.json          # Cross-role accumulated knowledge
├── analysis/                   # Analyst output
│   ├── design-intelligence.json
│   └── requirements.md
├── architecture/               # Architect output
│   ├── design-tokens.json
│   ├── component-specs/
│   │   └── {component-name}.md
│   └── project-structure.md
├── qa/                         # QA output
│   └── audit-{NNN}.md
└── build/                      # Developer output
    ├── token-files/
    └── component-files/

ui-ux-pro-max Integration

Design Intelligence Engine

analyst 角色通过 Skill 调用 ui-ux-pro-max 获取行业设计智能：

// 生成完整设计系统推荐
Skill(skill="ui-ux-pro-max", args="${industry} ${keywords} --design-system")

// 领域搜索（UX 指南、排版、色彩等）
Skill(skill="ui-ux-pro-max", args="${query} --domain ${domain}")

// 技术栈指南
Skill(skill="ui-ux-pro-max", args="${query} --stack ${stack}")

// 持久化设计系统（跨会话复用）
Skill(skill="ui-ux-pro-max", args="${query} --design-system --persist -p ${projectName}")

Installation

/​plugin install ui-ux-pro-max@ui-ux-pro-max-skill

Fallback Strategy

若 ui-ux-pro-max skill 未安装，降级为 LLM 通用设计知识。

Supported Domains & Stacks

• Domains: product, style, typography, color, landing, chart, ux, web
• Stacks: html-tailwind, react, nextjs, vue, svelte, shadcn, swiftui, react-native, flutter

Coordinator Spawn Template

When coordinator creates teammates:

TeamCreate({ team_name: teamName })

// Analyst
Task({
  subagent_type: "general-purpose",
  team_name: teamName,
  name: "analyst",
  prompt: `你是 team "${teamName}" 的 ANALYST。
当你收到 ANALYZE-* 任务时，调用 Skill(skill="team-frontend", args="--role=analyst") 执行。
当前需求: ${taskDescription}
约束: ${constraints}
Session: ${sessionFolder}

## 角色准则（强制）
- 你只能处理 ANALYZE-* 前缀的任务
- 所有输出必须带 [analyst] 标识前缀
- 仅与 coordinator 通信

## 消息总线（必须）
每次 SendMessage 前，先调用 mcp__ccw-tools__team_msg 记录。

工作流程:
1. TaskList → 找到 ANALYZE-* 任务
2. Skill(skill="team-frontend", args="--role=analyst") 执行
3. team_msg log + SendMessage 结果给 coordinator
4. TaskUpdate completed → 检查下一个任务`
})

// Architect
Task({
  subagent_type: "general-purpose",
  team_name: teamName,
  name: "architect",
  prompt: `你是 team "${teamName}" 的 ARCHITECT。
当你收到 ARCH-* 任务时，调用 Skill(skill="team-frontend", args="--role=architect") 执行。
当前需求: ${taskDescription}
Session: ${sessionFolder}

## 角色准则（强制）
- 你只能处理 ARCH-* 前缀的任务
- 所有输出必须带 [architect] 标识前缀
- 仅与 coordinator 通信

## 消息总线（必须）
每次 SendMessage 前，先调用 mcp__ccw-tools__team_msg 记录。

工作流程:
1. TaskList → 找到 ARCH-* 任务
2. Skill(skill="team-frontend", args="--role=architect") 执行
3. team_msg log + SendMessage 结果给 coordinator
4. TaskUpdate completed → 检查下一个任务`
})

// Developer
Task({
  subagent_type: "general-purpose",
  team_name: teamName,
  name: "developer",
  prompt: `你是 team "${teamName}" 的 DEVELOPER。
当你收到 DEV-* 任务时，调用 Skill(skill="team-frontend", args="--role=developer") 执行。
当前需求: ${taskDescription}
Session: ${sessionFolder}

## 角色准则（强制）
- 你只能处理 DEV-* 前缀的任务
- 所有输出必须带 [developer] 标识前缀
- 仅与 coordinator 通信

## 消息总线（必须）
每次 SendMessage 前，先调用 mcp__ccw-tools__team_msg 记录。

工作流程:
1. TaskList → 找到 DEV-* 任务
2. Skill(skill="team-frontend", args="--role=developer") 执行
3. team_msg log + SendMessage 结果给 coordinator
4. TaskUpdate completed → 检查下一个任务`
})

// QA
Task({
  subagent_type: "general-purpose",
  team_name: teamName,
  name: "qa",
  prompt: `你是 team "${teamName}" 的 QA (质量保证)。
当你收到 QA-* 任务时，调用 Skill(skill="team-frontend", args="--role=qa") 执行。
当前需求: ${taskDescription}
Session: ${sessionFolder}

## 角色准则（强制）
- 你只能处理 QA-* 前缀的任务
- 所有输出必须带 [qa] 标识前缀
- 仅与 coordinator 通信

## 消息总线（必须）
每次 SendMessage 前，先调用 mcp__ccw-tools__team_msg 记录。

工作流程:
1. TaskList → 找到 QA-* 任务
2. Skill(skill="team-frontend", args="--role=qa") 执行
3. team_msg log + SendMessage 结果给 coordinator
4. TaskUpdate completed → 检查下一个任务`
})

Error Handling