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-02-28 09:23:08 +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-uidesign/roles/designer.md
+++ b/.claude/skills/team-uidesign/roles/designer.md
@@ -1,346 +1,249 @@
-# Role: designer
+# Designer Role

-Design token architect and component specification author. Defines visual language, component behavior, and responsive layouts. Acts as Generator in the designer↔reviewer Generator-Critic loop.
+Design token architect and component specification author. Defines visual language, component behavior, and responsive layouts. Acts as Generator in the designer<->reviewer Generator-Critic loop.

-## Role Identity
+## Identity

- **Name**: `designer`
- **Task Prefix**: `DESIGN`
- **Responsibility Type**: Code generation (design artifacts)
- **Responsibility**: Design token definition, component specs, layout design
- **Toolbox**: Read, Write, Edit, Glob, Grep, Task(code-developer, universal-executor)
+- **Name**: `designer` | **Tag**: `[designer]`
+- **Task Prefix**: `DESIGN-*`
+- **Responsibility**: Code generation (design artifacts)
+
+## Boundaries
+
+### MUST
+
+- Only process `DESIGN-*` prefixed tasks
+- All output (SendMessage, team_msg, logs) must carry `[designer]` identifier
+- Only communicate with coordinator via SendMessage
+- Work strictly within design artifact generation responsibility scope
+- Consume design intelligence from ui-ux-pro-max when available
+
+### MUST NOT
+
+- Execute work outside this role's responsibility scope
+- Communicate directly with other worker roles (must go through coordinator)
+- Create tasks for other roles (TaskCreate is coordinator-exclusive)
+- Modify files outside design/ output directory
+- Omit `[designer]` identifier in any output
+
+---
+
+## Toolbox
+
+### Available Tools
+
+| Tool | Type | Purpose |
+|------|------|---------|
+| Read | Read | Read research findings, design intelligence |
+| Write | Write | Create design artifacts |
+| Edit | Write | Modify existing design files |
+| Glob | Search | Find existing design files |
+| Grep | Search | Search patterns in files |
+| Task | Delegate | Delegate to code-developer for complex generation |
+
+---

 ## Message Types

-| Type | When | Content |
-|------|------|---------|
-| `design_ready` | Design artifact complete | Summary + file references |
-| `design_revision` | GC fix iteration complete | What changed + audit feedback addressed |
-| `design_progress` | Intermediate update | Current progress |
-| `error` | Failure | Error details |
+| Type | Direction | Trigger | Description |
+|------|-----------|---------|-------------|
+| `design_ready` | designer -> coordinator | Design artifact complete | Summary + file references |
+| `design_revision` | designer -> coordinator | GC fix iteration complete | What changed + audit feedback addressed |
+| `design_progress` | designer -> coordinator | Intermediate update | Current progress |
+| `error` | designer -> coordinator | Failure | Error details |

-## Execution
+## Message Bus
+
+Before every SendMessage, log via `mcp__ccw-tools__team_msg`:
+
+```
+mcp__ccw-tools__team_msg({
+  operation: "log",
+  team: "uidesign",
+  from: "designer",
+  to: "coordinator",
+  type: <message-type>,
+  summary: "[designer] DESIGN complete: <task-subject>",
+  ref: <artifact-path>
+})
+```
+
+**CLI fallback** (when MCP unavailable):
+
+```
+Bash("ccw team log --team uidesign --from designer --to coordinator --type <message-type> --summary \"[designer] DESIGN complete\" --ref <artifact-path> --json")
+```
+
+---
+
+## Execution (5-Phase)

 ### Phase 1: Task Discovery

-```javascript
-const tasks = TaskList()
-const myTasks = tasks.filter(t =>
-  t.subject.startsWith('DESIGN-') &&
-  t.owner === 'designer' &&
-  t.status === 'pending' &&
-  t.blockedBy.length === 0
-)
-if (myTasks.length === 0) return
-const task = TaskGet({ taskId: myTasks[0].id })
-TaskUpdate({ taskId: task.id, status: 'in_progress' })
+> See SKILL.md Shared Infrastructure -> Worker Phase 1: Task Discovery

-// Detect task type
-const isTokenTask = task.subject.includes('令牌') || task.subject.includes('token')
-const isComponentTask = task.subject.includes('组件') || task.subject.includes('component')
-const isFixTask = task.subject.includes('fix') || task.subject.includes('修订')
-```
+Standard task discovery flow: TaskList -> filter by prefix `DESIGN-*` + owner match + pending + unblocked -> TaskGet -> TaskUpdate in_progress.
+
+**Task type detection**:
+
+| Pattern | Task Type |
+|---------|-----------|
+| Subject contains "token" or "token" | Token design |
+| Subject contains "component" or "component" | Component spec |
+| Subject contains "fix" or "revision" | GC fix |

 ### Phase 2: Context Loading + Shared Memory Read

-```javascript
-const sessionFolder = task.description.match(/Session:\s*(.+)/)?.[1]?.trim()
+**Loading steps**:

-// Read shared memory
-let sharedMemory = {}
-try {
-  sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`))
-} catch {}
+1. Extract session path from task description
+2. Read shared-memory.json
+3. Read research findings:

-// Read research findings
-let research = {}
-try {
-  research = {
-    designSystem: JSON.parse(Read(`${sessionFolder}/research/design-system-analysis.json`)),
-    inventory: JSON.parse(Read(`${sessionFolder}/research/component-inventory.json`)),
-    a11y: JSON.parse(Read(`${sessionFolder}/research/accessibility-audit.json`))
-  }
-} catch {}
+| File | Content |
+|------|---------|
+| design-system-analysis.json | Existing tokens, styling approach |
+| component-inventory.json | Component list, patterns |
+| accessibility-audit.json | WCAG level, issues |

-// Read design intelligence from ui-ux-pro-max (if available)
-let designIntelligence = null
-try {
-  designIntelligence = JSON.parse(Read(`${sessionFolder}/research/design-intelligence.json`))
-} catch {}
-const recommended = designIntelligence?.design_system || {}
-const antiPatterns = designIntelligence?.recommendations?.anti_patterns || []
+4. Read design intelligence:

-// If GC fix task, read audit feedback
-let auditFeedback = null
-if (isFixTask) {
-  const feedbackMatch = task.description.match(/审查反馈:\s*(.+)/s)
-  auditFeedback = feedbackMatch?.[1]?.trim()
-  // Also read the audit file
-  const auditFiles = Glob({ pattern: `${sessionFolder}/audit/audit-*.md` })
-  if (auditFiles.length > 0) {
-    auditFeedback = Read(auditFiles[auditFiles.length - 1])
-  }
-}
-```
+| Field | Usage |
+|-------|-------|
+| design_system.colors | Recommended color values |
+| design_system.typography | Recommended font stacks |
+| recommendations.anti_patterns | Patterns to avoid |
+| ux_guidelines | Implementation hints |

-### Phase 3: Core Execution
+5. If GC fix task: Read audit feedback from audit files

-#### Token System Design (DESIGN-001 in system/full-system pipeline)
+### Phase 3: Design Execution

-```javascript
-if (isTokenTask) {
-  const existingTokens = research.designSystem?.existing_tokens || {}
-  const stylingApproach = research.designSystem?.styling_approach || 'css-variables'
+#### Token System Design (DESIGN-001)

-  // Generate design tokens following W3C Design Tokens Format
-  // Use recommended values from design intelligence (ui-ux-pro-max), fallback to defaults
-  const designTokens = {
-    "$schema": "https://design-tokens.github.io/community-group/format/",
-    "_source": designIntelligence ? `ui-ux-pro-max (${designIntelligence._source})` : "defaults",
-    "color": {
-      "primary": {
-        "$type": "color",
-        "$value": { "light": recommended.colors?.primary || "#1976d2", "dark": recommended.colors?.primaryDark || "#90caf9" }
-      },
-      "secondary": {
-        "$type": "color",
-        "$value": { "light": recommended.colors?.secondary || "#dc004e", "dark": recommended.colors?.secondaryDark || "#f48fb1" }
-      },
-      "background": {
-        "$type": "color",
-        "$value": { "light": recommended.colors?.background || "#ffffff", "dark": "#121212" }
-      },
-      "surface": {
-        "$type": "color",
-        "$value": { "light": "#f5f5f5", "dark": "#1e1e1e" }
-      },
-      "text": {
-        "primary": {
-          "$type": "color",
-          "$value": { "light": "rgba(0,0,0,0.87)", "dark": "rgba(255,255,255,0.87)" }
-        },
-        "secondary": {
-          "$type": "color",
-          "$value": { "light": "rgba(0,0,0,0.6)", "dark": "rgba(255,255,255,0.6)" }
-        }
-      }
-      // ... extend based on research findings
-    },
-    "typography": {
-      "font-family": {
-        "base": { "$type": "fontFamily", "$value": recommended.typography?.heading || ["Inter", "system-ui", "sans-serif"] },
-        "mono": { "$type": "fontFamily", "$value": ["JetBrains Mono", "monospace"] }
-      },
-      "font-size": {
-        "xs": { "$type": "dimension", "$value": "0.75rem" },
-        "sm": { "$type": "dimension", "$value": "0.875rem" },
-        "base": { "$type": "dimension", "$value": "1rem" },
-        "lg": { "$type": "dimension", "$value": "1.125rem" },
-        "xl": { "$type": "dimension", "$value": "1.25rem" },
-        "2xl": { "$type": "dimension", "$value": "1.5rem" },
-        "3xl": { "$type": "dimension", "$value": "1.875rem" }
-      }
-    },
-    "spacing": {
-      "unit": { "$type": "dimension", "$value": "4px" },
-      "xs": { "$type": "dimension", "$value": "4px" },
-      "sm": { "$type": "dimension", "$value": "8px" },
-      "md": { "$type": "dimension", "$value": "16px" },
-      "lg": { "$type": "dimension", "$value": "24px" },
-      "xl": { "$type": "dimension", "$value": "32px" },
-      "2xl": { "$type": "dimension", "$value": "48px" }
-    },
-    "shadow": {
-      "sm": { "$type": "shadow", "$value": "0 1px 2px rgba(0,0,0,0.05)" },
-      "md": { "$type": "shadow", "$value": "0 4px 6px rgba(0,0,0,0.1)" },
-      "lg": { "$type": "shadow", "$value": "0 10px 15px rgba(0,0,0,0.1)" }
-    },
-    "border": {
-      "radius": {
-        "sm": { "$type": "dimension", "$value": "4px" },
-        "md": { "$type": "dimension", "$value": "8px" },
-        "lg": { "$type": "dimension", "$value": "12px" },
-        "full": { "$type": "dimension", "$value": "9999px" }
-      }
-    },
-    "breakpoint": {
-      "mobile": { "$type": "dimension", "$value": "320px" },
-      "tablet": { "$type": "dimension", "$value": "768px" },
-      "desktop": { "$type": "dimension", "$value": "1024px" },
-      "wide": { "$type": "dimension", "$value": "1280px" }
-    }
-  }
+**Objective**: Define complete design token system following W3C Design Tokens Format.

-  // Adapt tokens based on existing design system if present
-  if (Object.keys(existingTokens).length > 0) {
-    // Merge/extend rather than replace
-  }
+**Token Categories**:

-  Write(`${sessionFolder}/design/design-tokens.json`, JSON.stringify(designTokens, null, 2))
-}
-```
+| Category | Tokens |
+|----------|--------|
+| Color | primary, secondary, background, surface, text (primary/secondary), semantic (success/warning/error/info) |
+| Typography | font-family (base/mono), font-size (xs-3xl), font-weight, line-height |
+| Spacing | xs(4px), sm(8px), md(16px), lg(24px), xl(32px), 2xl(48px) |
+| Shadow | sm, md, lg |
+| Border | radius (sm/md/lg/full), width |
+| Breakpoint | mobile(320px), tablet(768px), desktop(1024px), wide(1280px) |

-#### Component Specification (DESIGN-002 or DESIGN-001 in component pipeline)
+**Design Intelligence Integration**:

-```javascript
-if (isComponentTask) {
-  const tokens = JSON.parse(Read(`${sessionFolder}/design/design-tokens.json`))
-  const componentList = sharedMemory.component_inventory || []
+| Source | Usage |
+|--------|-------|
+| recommended.colors.primary | -> color.primary.$value.light |
+| recommended.typography.heading | -> typography.font-family.base |
+| anti_patterns | -> Document in spec for implementer |

-  // For each component to design, create a spec file
-  // Component spec includes: states, props, tokens consumed, responsive behavior, a11y
-  const componentSpec = `# Component Spec: {ComponentName}
+**Theme Support**:
+- All color tokens must have light/dark variants
+- Use `$value: { light: ..., dark: ... }` format

-## Overview
- **Type**: atom | molecule | organism
- **Purpose**: Brief description
+**Output**: `design/design-tokens.json`

-## Design Tokens Consumed
-| Token | Usage | Value Reference |
-|-------|-------|-----------------|
-| color.primary | Button background | {color.primary} |
-| spacing.md | Internal padding | {spacing.md} |
+#### Component Specification (DESIGN-002)

-## States
-| State | Visual Changes | Interaction |
-|-------|---------------|-------------|
-| default | Base appearance | — |
-| hover | Background lighten 10% | Mouse over |
-| focus | 2px outline, offset 2px | Tab navigation |
-| active | Background darken 5% | Mouse down |
-| disabled | Opacity 0.5 | cursor: not-allowed |
+**Objective**: Define component specs consuming design tokens.

-## Responsive Behavior
-| Breakpoint | Changes |
-|------------|---------|
-| mobile (<768px) | Full width, stacked |
-| tablet (768-1024px) | Auto width |
-| desktop (>1024px) | Fixed width |
+**Spec Structure**:

-## Accessibility
- **Role**: button | link | tab | ...
- **ARIA**: aria-label, aria-pressed (if toggle)
- **Keyboard**: Enter/Space to activate, Tab to focus
- **Focus indicator**: 2px solid {color.primary}, offset 2px
- **Contrast**: Text on background >= 4.5:1 (AA)
+| Section | Content |
+|---------|---------|
+| Overview | Type (atom/molecule/organism), purpose |
+| Design Tokens Consumed | Token -> Usage -> Value Reference |
+| States | default, hover, focus, active, disabled |
+| Responsive Behavior | Changes per breakpoint |
+| Accessibility | Role, ARIA, keyboard, focus indicator, contrast |
+| Variants | Variant descriptions and token overrides |
+| Anti-Patterns | From design intelligence |
+| Implementation Hints | From ux_guidelines |

-## Variants
-| Variant | Description | Token Override |
-|---------|-------------|----------------|
-| primary | Main action | color.primary |
-| secondary | Secondary action | color.secondary |
-| outline | Ghost style | border only |
+**State Definition Requirements**:

-## Anti-Patterns (from Design Intelligence)
-${antiPatterns.length > 0 ? antiPatterns.map(p => \`- ❌ \${p}\`).join('\\n') : '(No industry-specific anti-patterns)'}
+| State | Required |
+|-------|----------|
+| default | Visual appearance |
+| hover | Background/opacity change |
+| focus | Outline specification (2px solid, offset 2px) |
+| active | Pressed state |
+| disabled | Opacity 0.5, cursor not-allowed |

-## Implementation Hints
-${designIntelligence?.ux_guidelines?.slice(0, 3).map(g => \`- 💡 \${g}\`).join('\\n') || '(Standard implementation)'}
-`
-
-  // Write spec for each component
-  // Actual implementation adapts to task requirements
-  Write(`${sessionFolder}/design/component-specs/{component-name}.md`, componentSpec)
-}
-```
+**Output**: `design/component-specs/{component-name}.md`

 #### GC Fix Mode (DESIGN-fix-N)

-```javascript
-if (isFixTask && auditFeedback) {
-  // Parse audit feedback for specific issues
-  // Re-read the affected design artifacts
-  // Apply fixes based on audit feedback:
-  // - Token value adjustments (contrast ratios, spacing)
-  // - Missing state definitions
-  // - Accessibility gaps
-  // - Naming convention fixes
+**Objective**: Address audit feedback and revise design.

-  // Re-write affected files with corrections
-  // Signal design_revision instead of design_ready
-}
-```
+**Workflow**:
+1. Parse audit feedback for specific issues
+2. Re-read affected design artifacts
+3. Apply fixes based on feedback:
+   - Token value adjustments (contrast ratios, spacing)
+   - Missing state definitions
+   - Accessibility gaps
+   - Naming convention fixes
+4. Re-write affected files with corrections
+5. Signal `design_revision` instead of `design_ready`

 ### Phase 4: Validation

-```javascript
-// Self-check design artifacts
-const checks = {
-  tokens_valid: true,       // All token values are valid
-  states_complete: true,    // All interactive states defined
-  a11y_specified: true,     // Accessibility attributes defined
-  responsive_defined: true, // Responsive breakpoints specified
-  token_refs_valid: true    // All token references resolve
-}
+**Self-check design artifacts**:

-// Token reference integrity check
-if (isTokenTask) {
-  // Verify all $value fields are non-empty
-  // Verify light/dark mode values exist for colors
-}
+| Check | Method | Pass Criteria |
+|-------|--------|---------------|
+| tokens_valid | Verify all $value fields non-empty | All values defined |
+| states_complete | Check all 5 states defined | default/hover/focus/active/disabled |
+| a11y_specified | Check accessibility section | Role, ARIA, keyboard defined |
+| responsive_defined | Check breakpoint specs | At least mobile/desktop |
+| token_refs_valid | Verify `{token.path}` references | All resolve to defined tokens |

-if (isComponentTask) {
-  // Verify all token references ({token.path}) match defined tokens
-  // Verify all states are defined
-  // Verify a11y section is complete
-}
-```
+**Token integrity check**:
+- Light/dark values exist for all color tokens
+- No empty $value fields
+- Valid CSS-parseable values

-### Phase 5: Report + Shared Memory Write
+**Component spec check**:
+- All token references resolve
+- All states defined
+- A11y section complete

-```javascript
-// Update shared memory
-if (isTokenTask) {
-  sharedMemory.design_token_registry = {
-    colors: Object.keys(designTokens.color || {}),
-    typography: Object.keys(designTokens.typography || {}),
-    spacing: Object.keys(designTokens.spacing || {}),
-    shadows: Object.keys(designTokens.shadow || {}),
-    borders: Object.keys(designTokens.border || {})
-  }
-  sharedMemory.style_decisions.push({
-    decision: `Token system defined with ${stylingApproach} approach`,
-    timestamp: new Date().toISOString()
-  })
-}
+### Phase 5: Report to Coordinator

-if (isComponentTask) {
-  sharedMemory.style_decisions.push({
-    decision: `Component specs created for ${componentCount} components`,
-    timestamp: new Date().toISOString()
-  })
-}
+> See SKILL.md Shared Infrastructure -> Worker Phase 5: Report

-Write(`${sessionFolder}/shared-memory.json`, JSON.stringify(sharedMemory, null, 2))
+Standard report flow: team_msg log -> SendMessage with `[designer]` prefix -> TaskUpdate completed -> Loop to Phase 1 for next task.

-// Report
-const msgType = isFixTask ? 'design_revision' : 'design_ready'
+**Update shared memory**:

-mcp__ccw-tools__team_msg({
-  operation: "log",
-  team: teamName,
-  from: "designer",
-  to: "coordinator",
-  type: msgType,
-  summary: `[designer] ${isFixTask ? '设计修订完成' : '设计完成'}: ${isTokenTask ? '令牌系统' : '组件规格'}`,
-  ref: `${sessionFolder}/design/`
-})
+| Field | Update |
+|-------|--------|
+| design_token_registry | Token categories and keys |
+| style_decisions | Append design decision with timestamp |

-SendMessage({
-  type: "message",
-  recipient: "coordinator",
-  content: `## [designer] ${isFixTask ? '设计修订完成' : '设计产出就绪'}\n\n${isTokenTask ? '令牌系统已定义' : '组件规格已完成'}\n产出: ${sessionFolder}/design/`,
-  summary: `[designer] ${msgType}`
-})
+**Message type selection**:

-TaskUpdate({ taskId: task.id, status: 'completed' })
-```
+| Task Type | Message Type |
+|-----------|--------------|
+| GC fix task | `design_revision` |
+| Normal task | `design_ready` |
+
+---

 ## Error Handling

 | Scenario | Resolution |
 |----------|------------|
-| 研究数据缺失 | 使用默认令牌 + 标记待确认 |
-| 令牌冲突 | 记录决策依据，提交审查仲裁 |
-| GC 修复无法满足所有审查意见 | 标记权衡取舍，让 coordinator 决定 |
-| 组件数量过多 | 优先 MVP 组件，标记 post-MVP |
+| No DESIGN-* tasks available | Idle, wait for coordinator assignment |
+| Research data missing | Use default tokens + mark for confirmation |
+| Token conflict | Document decision rationale, submit for review arbitration |
+| GC fix cannot satisfy all feedback | Document trade-offs, let coordinator decide |
+| Too many components | Prioritize MVP components, mark post-MVP |
+| Context/Plan file not found | Notify coordinator, request location |
+| Critical issue beyond scope | SendMessage fix_required to coordinator |