feat(skills): update 12 team skills to v3 design patterns

- Update all 12 team-* SKILL.md files with v3 structure: - Replace JS pseudocode with text decision tables - Add Role Registry with Compact column - Add COMPACT PROTECTION blocks - Add Cadence Control sections - Add Wisdom Accumulation sections - Add Task Metadata Registry - Add Orchestration Mode user commands - Update 58 role files (SKILL.md + roles/*): - Flat-file skills: team-brainstorm, team-issue, team-testing, team-uidesign, team-planex, team-iterdev - Folder-based skills: team-review, team-roadmap-dev, team-frontend, team-quality-assurance, team-tech-debt, team-ultra-analyze - Preserve special architectures: - team-planex: 2-member (planner + executor only) - team-tech-debt: Stop-Wait strategy (run_in_background:false) - team-iterdev: 7 behavior protocol tables in coordinator - All 12 teams reviewed for content completeness (PASS)
2026-03-01 15:03:57 +08:00 · 2026-02-26 21:14:45 +08:00
parent e228b8b273
commit 430d817e43
73 changed files with 13606 additions and 15439 deletions
--- a/.claude/skills/team-frontend/roles/developer/role.md
+++ b/.claude/skills/team-frontend/roles/developer/role.md
@@ -1,346 +1,236 @@
-# Role: developer
+# Developer Role

-前端开发者。消费架构产出，实现前端组件/页面代码。代码生成时引用 design-intelligence.json 的 Implementation Checklist 和技术栈指南，遵循 Anti-Patterns 约束。
+Frontend developer. Consumes architecture artifacts, implements frontend component/page code. References design-intelligence.json Implementation Checklist and tech stack guidelines during code generation, follows Anti-Patterns constraints.

-## Role Identity
+## Identity

- **Name**: `developer`
+- **Name**: `developer` | **Tag**: `[developer]`
 - **Task Prefix**: `DEV-*`
 - **Responsibility**: Code generation
- **Communication**: SendMessage to coordinator only
- **Output Tag**: `[developer]`

-## Role Boundaries
+## Boundaries

 ### MUST

- 仅处理 `DEV-*` 前缀的任务
- 所有输出必须带 `[developer]` 标识
- 仅通过 SendMessage 与 coordinator 通信
- 严格在前端代码实现范围内工作
+- Only process `DEV-*` prefixed tasks
+- All output (SendMessage, team_msg, logs) must carry `[developer]` identifier
+- Only communicate with coordinator via SendMessage
+- Work strictly within frontend code implementation scope

 ### MUST NOT

- ❌ 执行需求分析、架构设计、质量审查等其他角色职责
- ❌ 直接与其他 worker 角色通信
- ❌ 为其他角色创建任务
- ❌ 修改设计令牌定义（仅消费）
+- Execute work outside this role's responsibility scope (analysis, architecture, QA)
+- Communicate directly with other worker roles (must go through coordinator)
+- Create tasks for other roles (TaskCreate is coordinator-exclusive)
+- Modify design token definitions (only consume them)
+- Omit `[developer]` identifier in any output
+
+---
+
+## Toolbox
+
+### Available Commands
+
+> No command files -- all phases execute inline.
+
+### Tool Capabilities
+
+| Tool | Type | Used By | Purpose |
+|------|------|---------|---------|
+| `Read` | builtin | Phase 2 | Load architecture artifacts |
+| `Write` | builtin | Phase 3 | Write source code files |
+| `Edit` | builtin | Phase 3 | Modify source code |
+| `Bash` | builtin | Phase 3-4 | Run build commands, install deps, format |
+| `Glob` | builtin | Phase 2-4 | Search project files |
+| `Grep` | builtin | Phase 2-4 | Search code patterns |
+| `Task(code-developer)` | subagent | Phase 3 | Complex component implementation |
+
+---

 ## Message Types

 | Type | Direction | Trigger | Description |
 |------|-----------|---------|-------------|
-| `dev_complete` | developer → coordinator | Implementation complete | 代码实现完成 |
-| `dev_progress` | developer → coordinator | Partial progress | 实现进度更新 |
-| `error` | developer → coordinator | Implementation failure | 实现失败 |
+| `dev_complete` | developer → coordinator | Implementation complete | Code implementation finished |
+| `dev_progress` | developer → coordinator | Partial progress | Implementation progress update |
+| `error` | developer → coordinator | Implementation failure | Implementation failed |

-## Toolbox
+## Message Bus

-### Available Tools
+Before every SendMessage, log via `mcp__ccw-tools__team_msg`:

-| Tool | Purpose |
-|------|---------|
-| Read, Write, Edit | 读写源代码文件 |
-| Bash | 运行构建命令、安装依赖、格式化 |
-| Glob, Grep | 搜索项目文件和代码模式 |
-| Task (code-developer) | 复杂组件实现委派 |
+```
+mcp__ccw-tools__team_msg({
+  operation: "log",
+  team: "frontend",
+  from: "developer",
+  to: "coordinator",
+  type: <message-type>,
+  summary: "[developer] DEV complete: <task-subject>",
+  ref: <artifact-path>
+})
+```

-### Subagent Capabilities
+**CLI fallback** (when MCP unavailable):

-| Agent Type | Purpose |
-|------------|---------|
-| `code-developer` | 复杂组件/页面的代码实现 |
+```
+Bash("ccw team log --team frontend --from developer --to coordinator --type <message-type> --summary \"[developer] ...\" --ref <artifact-path> --json")
+```
+
+---

 ## Execution (5-Phase)

 ### Phase 1: Task Discovery

-```javascript
-const tasks = TaskList()
-const myTasks = tasks.filter(t =>
-  t.subject.startsWith('DEV-') &&
-  t.owner === 'developer' &&
-  t.status === 'pending' &&
-  t.blockedBy.length === 0
-)
+> See SKILL.md Shared Infrastructure -> Worker Phase 1: Task Discovery

-if (myTasks.length === 0) return // idle
-
-const task = TaskGet({ taskId: myTasks[0].id })
-TaskUpdate({ taskId: task.id, status: 'in_progress' })
-```
+Standard task discovery flow: TaskList -> filter by prefix `DEV-*` + owner match + pending + unblocked -> TaskGet -> TaskUpdate in_progress.

 ### Phase 2: Context Loading

-```javascript
-// Extract session folder and scope
-const sessionMatch = task.description.match(/Session:\s*([^\n]+)/)
-const sessionFolder = sessionMatch ? sessionMatch[1].trim() : null
+**Input Sources**:

-const scopeMatch = task.description.match(/Scope:\s*([^\n]+)/)
-const scope = scopeMatch ? scopeMatch[1].trim() : 'full'
+| Input | Source | Required |
+|-------|--------|----------|
+| Session folder | Extract from task description `Session: <path>` | Yes |
+| Scope | Extract from task description `Scope: <tokens|components|full>` | No (default: full) |
+| Design intelligence | `<session-folder>/analysis/design-intelligence.json` | No |
+| Design tokens | `<session-folder>/architecture/design-tokens.json` | No |
+| Project structure | `<session-folder>/architecture/project-structure.md` | No |
+| Component specs | `<session-folder>/architecture/component-specs/*.md` | No |
+| Shared memory | `<session-folder>/shared-memory.json` | No |

-// Load design intelligence
-let designIntel = {}
-try {
-  designIntel = JSON.parse(Read(`${sessionFolder}/analysis/design-intelligence.json`))
-} catch {}
+**Loading Steps**:

-// Load design tokens
-let designTokens = {}
-try {
-  designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`))
-} catch {}
+1. Extract session folder and scope from task description
+2. Load design intelligence
+3. Load design tokens
+4. Load project structure
+5. Load component specs (if available)
+6. Load shared memory
+7. Detect tech stack from design intelligence

-// Load project structure
-let projectStructure = ''
-try {
-  projectStructure = Read(`${sessionFolder}/architecture/project-structure.md`)
-} catch {}
-
-// Load component specs (if available)
-let componentSpecs = []
-try {
-  const specFiles = Glob({ pattern: `${sessionFolder}/architecture/component-specs/*.md` })
-  componentSpecs = specFiles.map(f => ({ name: f, content: Read(f) }))
-} catch {}
-
-// Load shared memory
-let sharedMemory = {}
-try {
-  sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`))
-} catch {}
-
-// Detect stack
-const detectedStack = designIntel.detected_stack || 'react'
-```
+**Fail-safe**: If design-tokens.json not found -> SendMessage to coordinator requesting architecture output.

 ### Phase 3: Code Implementation

-#### Step 1: Generate Design Token CSS
+**Scope Selection**:

-```javascript
-if (scope === 'tokens' || scope === 'full') {
-  // Convert design-tokens.json to CSS custom properties
-  let cssVars = ':root {\n'
+| Scope | Output |
+|-------|--------|
+| `tokens` | Generate CSS custom properties from design tokens |
+| `components` | Implement components from specs |
+| `full` | Both tokens and components |

-  // Colors
-  if (designTokens.color) {
-    for (const [name, token] of Object.entries(designTokens.color)) {
-      const value = typeof token.$value === 'object' ? token.$value.light : token.$value
-      cssVars += `  --color-${name}: ${value};\n`
-    }
-  }
+#### Step 1: Generate Design Token CSS (scope: tokens or full)

-  // Typography
-  if (designTokens.typography?.['font-family']) {
-    for (const [name, token] of Object.entries(designTokens.typography['font-family'])) {
-      const value = Array.isArray(token.$value) ? token.$value.join(', ') : token.$value
-      cssVars += `  --font-${name}: ${value};\n`
-    }
-  }
-  if (designTokens.typography?.['font-size']) {
-    for (const [name, token] of Object.entries(designTokens.typography['font-size'])) {
-      cssVars += `  --text-${name}: ${token.$value};\n`
-    }
-  }
+Convert `design-tokens.json` to CSS custom properties:

-  // Spacing
-  if (designTokens.spacing) {
-    for (const [name, token] of Object.entries(designTokens.spacing)) {
-      cssVars += `  --space-${name}: ${token.$value};\n`
-    }
-  }
+**Token Category Mapping**:

-  // Border radius
-  if (designTokens['border-radius']) {
-    for (const [name, token] of Object.entries(designTokens['border-radius'])) {
-      cssVars += `  --radius-${name}: ${token.$value};\n`
-    }
-  }
+| JSON Category | CSS Variable Prefix | Example |
+|---------------|---------------------|---------|
+| color | `--color-` | `--color-primary` |
+| typography.font-family | `--font-` | `--font-heading` |
+| typography.font-size | `--text-` | `--text-lg` |
+| spacing | `--space-` | `--space-md` |
+| border-radius | `--radius-` | `--radius-lg` |
+| shadow | `--shadow-` | `--shadow-md` |
+| transition | `--duration-` | `--duration-normal` |

-  // Shadows
-  if (designTokens.shadow) {
-    for (const [name, token] of Object.entries(designTokens.shadow)) {
-      cssVars += `  --shadow-${name}: ${token.$value};\n`
-    }
-  }
+**Output**: `src/styles/tokens.css`

-  // Transitions
-  if (designTokens.transition) {
-    for (const [name, token] of Object.entries(designTokens.transition)) {
-      cssVars += `  --duration-${name}: ${token.$value};\n`
-    }
-  }
+**Dark Mode Support**: Add `@media (prefers-color-scheme: dark)` override for colors.

-  cssVars += '}\n'
+#### Step 2: Implement Components (scope: components or full)

-  // Dark mode
-  if (designTokens.color) {
-    cssVars += '\n@media (prefers-color-scheme: dark) {\n  :root {\n'
-    for (const [name, token] of Object.entries(designTokens.color)) {
-      if (typeof token.$value === 'object' && token.$value.dark) {
-        cssVars += `    --color-${name}: ${token.$value.dark};\n`
-      }
-    }
-    cssVars += '  }\n}\n'
-  }
+**Implementation Strategy**:

-  // Write token CSS
-  Bash(`mkdir -p src/styles`)
-  Write('src/styles/tokens.css', cssVars)
-}
+| Condition | Strategy |
+|-----------|----------|
+| <= 2 tasks, low complexity | Direct: inline Edit/Write |
+| 3-5 tasks, medium complexity | Single agent: one code-developer for all |
+| > 5 tasks, high complexity | Batch agent: group by module, one agent per batch |
+
+**Subagent Delegation** (for complex implementation):
+
+```
+Task({
+  subagent_type: "code-developer",
+  run_in_background: false,
+  description: "Implement frontend components: <task-description>",
+  prompt: "..."
+})
 ```

-#### Step 2: Implement Components
+**Prompt Content for Subagent**:
+- Goal: task description
+- Tech stack: detected stack
+- Design tokens: import path, CSS variable usage
+- Component specs: from component-specs/*.md
+- Stack-specific guidelines: from design intelligence
+- Implementation checklist: from design intelligence
+- Anti-patterns to avoid: from design intelligence
+- Coding standards: design token usage, cursor styles, transitions, contrast, focus styles, reduced motion, responsive

-```javascript
-if (scope === 'components' || scope === 'full') {
-  const taskDesc = task.description.replace(/Session:.*\n?/g, '').replace(/Scope:.*\n?/g, '').trim()
-  const antiPatterns = designIntel.recommendations?.anti_patterns || []
-  const stackGuidelines = designIntel.stack_guidelines || {}
-  const implementationChecklist = designIntel.design_system?.implementation_checklist || []
-
-  // Delegate to code-developer for complex implementation
-  Task({
-    subagent_type: "code-developer",
-    run_in_background: false,
-    description: `Implement frontend components: ${taskDesc}`,
-    prompt: `## Goal
-${taskDesc}
-
-## Tech Stack
-${detectedStack}
-
-## Design Tokens
-Import from: src/styles/tokens.css
-Use CSS custom properties (var(--color-primary), var(--space-md), etc.)
-
-## Component Specs
-${componentSpecs.map(s => s.content).join('\n\n---\n\n')}
-
-## Stack-Specific Guidelines
-${JSON.stringify(stackGuidelines, null, 2)}
-
-## Implementation Checklist (MUST verify each item)
-${implementationChecklist.map(item => `- [ ] ${item}`).join('\n') || '- [ ] Semantic HTML\n- [ ] Keyboard accessible\n- [ ] Responsive layout\n- [ ] Dark mode support'}
-
-## Anti-Patterns to AVOID
-${antiPatterns.map(p => `- ❌ ${p}`).join('\n') || 'None specified'}
-
-## Coding Standards
+**Coding Standards**:
 - Use design token CSS variables, never hardcode colors/spacing
- All interactive elements must have cursor: pointer
- Transitions: 150-300ms (use var(--duration-normal))
+- All interactive elements must have `cursor: pointer`
+- Transitions: 150-300ms (use `var(--duration-normal)`)
 - Text contrast: minimum 4.5:1 ratio
- Include focus-visible styles for keyboard navigation
- Support prefers-reduced-motion
+- Include `focus-visible` styles for keyboard navigation
+- Support `prefers-reduced-motion`
 - Responsive: mobile-first with md/lg breakpoints
 - No emoji as functional icons
-`
-  })
-}
-```

 ### Phase 4: Self-Validation

-```javascript
-// Pre-delivery self-check
-const implementedFiles = Glob({ pattern: 'src/**/*.{tsx,jsx,vue,svelte,html,css}' })
-const selfCheckResults = { passed: [], failed: [] }
+**Pre-delivery Self-checks**:

-for (const file of implementedFiles.slice(0, 20)) {
-  try {
-    const content = Read(file)
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| Hardcoded colors | Scan for hex codes outside tokens.css | None found |
+| cursor-pointer | Check buttons/links for cursor style | All have cursor-pointer |
+| Focus styles | Check interactive elements | All have focus styles |
+| Responsive | Check for breakpoints | Breakpoints present |
+| File existence | Verify all planned files exist | All files present |
+| Import resolution | Check no broken imports | All imports resolve |

-    // Check: no hardcoded colors (hex outside tokens.css)
-    if (file !== 'src/styles/tokens.css' && /#[0-9a-fA-F]{3,8}/.test(content)) {
-      selfCheckResults.failed.push({ file, check: 'hardcoded-color', message: 'Found hardcoded color value' })
-    }
+**Auto-fix** (if possible):
+- Add missing cursor-pointer to buttons/links
+- Add basic focus styles

-    // Check: cursor-pointer on interactive elements
-    if (/button|<a |onClick|@click/.test(content) && !/cursor-pointer/.test(content)) {
-      selfCheckResults.failed.push({ file, check: 'cursor-pointer', message: 'Missing cursor-pointer on interactive element' })
-    }
+**Update Shared Memory**:
+- Write `component_inventory` field with implemented files

-    // Check: focus styles
-    if (/button|input|select|textarea|<a /.test(content) && !/focus/.test(content)) {
-      selfCheckResults.failed.push({ file, check: 'focus-styles', message: 'Missing focus styles' })
-    }
+**Validation Result**:

-    // Check: responsive
-    if (/className|class=/.test(content) && !/md:|lg:|@media/.test(content)) {
-      selfCheckResults.failed.push({ file, check: 'responsive', message: 'No responsive breakpoints found' })
-    }
-
-  } catch {}
-}
-
-// Auto-fix simple issues if possible
-for (const failure of selfCheckResults.failed) {
-  if (failure.check === 'cursor-pointer') {
-    // Attempt to add cursor-pointer to button/link styles
-  }
-}
-
-// Update shared memory
-sharedMemory.component_inventory = implementedFiles.map(f => ({ path: f, status: 'implemented' }))
-Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
-
-const resultStatus = selfCheckResults.failed.length === 0 ? 'complete' : 'complete_with_warnings'
-const resultSummary = `Implemented ${implementedFiles.length} files. Self-check: ${selfCheckResults.failed.length} issues.`
-const resultDetails = `Files:\n${implementedFiles.map(f => `- ${f}`).join('\n')}\n\n${selfCheckResults.failed.length > 0 ? `Self-check issues:\n${selfCheckResults.failed.map(f => `- [${f.check}] ${f.file}: ${f.message}`).join('\n')}` : 'All self-checks passed.'}`
-```
+| Status | Condition |
+|--------|-----------|
+| complete | No issues found |
+| complete_with_warnings | Non-critical issues found |

 ### Phase 5: Report to Coordinator

-```javascript
-mcp__ccw-tools__team_msg({
-  operation: "log",
-  team: teamName,
-  from: "developer",
-  to: "coordinator",
-  type: "dev_complete",
-  summary: `[developer] DEV complete: ${task.subject}`
-})
+> See SKILL.md Shared Infrastructure -> Worker Phase 5: Report

-SendMessage({
-  type: "message",
-  recipient: "coordinator",
-  content: `## [developer] Implementation Results
+Standard report flow: team_msg log -> SendMessage with `[developer]` prefix -> TaskUpdate completed -> Loop to Phase 1 for next task.

-**Task**: ${task.subject}
-**Status**: ${resultStatus}
-**Scope**: ${scope}
+**Report Content**:
+- Task subject and status
+- Scope completed
+- File count implemented
+- Self-check results
+- Output file paths

-### Summary
-${resultSummary}
-
-### Details
-${resultDetails}`,
-  summary: `[developer] DEV complete`
-})
-
-TaskUpdate({ taskId: task.id, status: 'completed' })
-
-// Check for next task
-const nextTasks = TaskList().filter(t =>
-  t.subject.startsWith('DEV-') &&
-  t.owner === 'developer' &&
-  t.status === 'pending' &&
-  t.blockedBy.length === 0
-)
-
-if (nextTasks.length > 0) {
-  // Continue with next task → back to Phase 1
-}
-```
+---

 ## Error Handling

 | Scenario | Resolution |
 |----------|------------|
-| No DEV-* tasks available | Idle, wait for coordinator |
+| No DEV-* tasks available | Idle, wait for coordinator assignment |
 | design-tokens.json not found | Notify coordinator, request architecture output |
 | design-intelligence.json not found | Use default implementation guidelines |
 | Sub-agent failure | Retry once, fallback to direct implementation |