mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-02-27 09:13:07 +08:00
feat(team-lifecycle-v2): add frontend pipeline (fe-developer + fe-qa) with auto-detection
- Add fe-developer role: DEV-FE-* prefix, tech stack detection, design token consumption - Add fe-qa role: QA-FE-* prefix, 5-dimension review, GC loop (max 2 rounds) - Add frontend pipelines: fe-only, fullstack, full-lifecycle-fe - Add frontend detection: keyword-based auto-routing to frontend sub-pipeline - Update SKILL.md: architecture, dispatch table, roles, message types, pipelines
This commit is contained in:
catlog22
@@ -82,6 +82,10 @@ roles/
|
||||
├── role.md # Multi-mode architecture assessment
|
||||
└── commands/
|
||||
└── assess.md # Mode-specific assessment strategies
|
||||
├── fe-developer/ # Frontend pipeline role
|
||||
│ └── role.md # Frontend component/page implementation
|
||||
└── fe-qa/ # Frontend pipeline role
|
||||
└── role.md # 5-dimension frontend QA + GC loop
|
||||
```
|
||||
|
||||
**Design principle**: role.md keeps Phase 1 (Task Discovery) and Phase 5 (Report) inline. Phases 2-4 either stay inline (simple logic) or delegate to `commands/*.md` via `Read("commands/xxx.md")` when they involve subagent delegation, CLI fan-out, or complex strategies.
|
||||
@@ -120,7 +124,9 @@ const VALID_ROLES = {
|
||||
"tester": { file: "roles/tester/role.md", prefix: "TEST" },
|
||||
"reviewer": { file: "roles/reviewer/role.md", prefix: ["REVIEW", "QUALITY"] },
|
||||
"explorer": { file: "roles/explorer/role.md", prefix: "EXPLORE", type: "service" },
|
||||
"architect": { file: "roles/architect/role.md", prefix: "ARCH", type: "consulting" }
|
||||
"architect": { file: "roles/architect/role.md", prefix: "ARCH", type: "consulting" },
|
||||
"fe-developer":{ file: "roles/fe-developer/role.md",prefix: "DEV-FE", type: "frontend-pipeline" },
|
||||
"fe-qa": { file: "roles/fe-qa/role.md", prefix: "QA-FE", type: "frontend-pipeline" }
|
||||
}
|
||||
|
||||
if (!VALID_ROLES[role]) {
|
||||
@@ -199,6 +205,8 @@ if (!roleMatch) {
|
||||
| `reviewer` | `REVIEW-*` + `QUALITY-*` | Code review + Spec quality validation (auto-switch by prefix) | [roles/reviewer/role.md](roles/reviewer/role.md) |
|
||||
| `explorer` | EXPLORE-* | Code search, pattern discovery, dependency tracing (service role, on-demand) | [roles/explorer/role.md](roles/explorer/role.md) |
|
||||
| `architect` | ARCH-* | Architecture assessment, tech feasibility, design review (consulting role, on-demand) | [roles/architect/role.md](roles/architect/role.md) |
|
||||
| `fe-developer` | DEV-FE-* | Frontend component/page implementation, design token consumption (frontend pipeline) | [roles/fe-developer/role.md](roles/fe-developer/role.md) |
|
||||
| `fe-qa` | QA-FE-* | 5-dimension frontend QA, accessibility, design compliance, GC loop (frontend pipeline) | [roles/fe-qa/role.md](roles/fe-qa/role.md) |
|
||||
|
||||
## Shared Infrastructure
|
||||
|
||||
@@ -272,6 +280,8 @@ mcp__ccw-tools__team_msg({
|
||||
| reviewer | `review_result`, `quality_result`, `fix_required`, `error` |
|
||||
| explorer | `explore_ready`, `explore_progress`, `task_failed` |
|
||||
| architect | `arch_ready`, `arch_concern`, `arch_progress`, `error` |
|
||||
| fe-developer | `dev_fe_complete`, `dev_fe_progress`, `error` |
|
||||
| fe-qa | `qa_fe_passed`, `qa_fe_result`, `fix_required`, `error` |
|
||||
|
||||
### CLI Fallback
|
||||
|
||||
@@ -389,13 +399,66 @@ Spec-only:
|
||||
→ DRAFT-002 → DISCUSS-003 → DRAFT-003 → DISCUSS-004
|
||||
→ DRAFT-004 → DISCUSS-005 → QUALITY-001 → DISCUSS-006
|
||||
|
||||
Impl-only:
|
||||
Impl-only (backend):
|
||||
PLAN-001 → IMPL-001 → TEST-001 + REVIEW-001
|
||||
|
||||
Full-lifecycle:
|
||||
Full-lifecycle (backend):
|
||||
[Spec pipeline] → PLAN-001(blockedBy: DISCUSS-006) → IMPL-001 → TEST-001 + REVIEW-001
|
||||
```
|
||||
|
||||
### Frontend Pipelines
|
||||
|
||||
Coordinator 根据任务关键词自动检测前端任务并路由到前端子流水线：
|
||||
|
||||
```
|
||||
FE-only (纯前端):
|
||||
PLAN-001 → DEV-FE-001 → QA-FE-001
|
||||
(GC loop: if QA-FE verdict=NEEDS_FIX → DEV-FE-002 → QA-FE-002, max 2 rounds)
|
||||
|
||||
Fullstack (前后端并行):
|
||||
PLAN-001 → IMPL-001 ∥ DEV-FE-001 → TEST-001 ∥ QA-FE-001 → REVIEW-001
|
||||
|
||||
Full-lifecycle + FE:
|
||||
[Spec pipeline] → PLAN-001(blockedBy: DISCUSS-006)
|
||||
→ IMPL-001 ∥ DEV-FE-001 → TEST-001 ∥ QA-FE-001 → REVIEW-001
|
||||
```
|
||||
|
||||
### Frontend Detection (Coordinator Phase 1)
|
||||
|
||||
```javascript
|
||||
const FE_KEYWORDS = /component|page|UI|前端|frontend|CSS|HTML|React|Vue|Tailwind|组件|页面|样式|layout|responsive|Svelte|Next\.js|Nuxt|shadcn|设计系统|design.system/i
|
||||
|
||||
const BE_KEYWORDS = /API|database|server|后端|backend|middleware|auth|REST|GraphQL|migration|schema|model|controller|service/i
|
||||
|
||||
function detectImplMode(taskDescription) {
|
||||
const hasFE = FE_KEYWORDS.test(taskDescription)
|
||||
const hasBE = BE_KEYWORDS.test(taskDescription)
|
||||
|
||||
// Also check project files
|
||||
const hasFEFiles = Bash(`test -f package.json && (grep -q react package.json || grep -q vue package.json || grep -q svelte package.json || grep -q next package.json); echo $?`) === '0'
|
||||
|
||||
if (hasFE && hasBE) return 'fullstack'
|
||||
if (hasFE || hasFEFiles) return 'fe-only'
|
||||
return 'impl-only' // default backend
|
||||
}
|
||||
|
||||
// Coordinator uses this in Phase 1 to select pipeline
|
||||
const implMode = detectImplMode(requirements.scope + ' ' + requirements.originalInput)
|
||||
```
|
||||
|
||||
### Generator-Critic Loop (fe-developer ↔ fe-qa)
|
||||
|
||||
```
|
||||
┌──────────────┐ DEV-FE artifact ┌──────────┐
|
||||
│ fe-developer │ ──────────────────→ │ fe-qa │
|
||||
│ (Generator) │ │ (Critic) │
|
||||
│ │ ←────────────────── │ │
|
||||
└──────────────┘ QA-FE feedback └──────────┘
|
||||
(max 2 rounds)
|
||||
|
||||
Convergence: fe-qa.score >= 8 && fe-qa.critical_count === 0
|
||||
```
|
||||
|
||||
## Unified Session Directory
|
||||
|
||||
All session artifacts are stored under a single session folder:
|
||||
@@ -429,6 +492,11 @@ All session artifacts are stored under a single session folder:
|
||||
├── decisions.md # Architectural decisions made
|
||||
├── conventions.md # Codebase conventions found
|
||||
└── issues.md # Known issues and risks
|
||||
├── qa/ # QA output (fe-qa audit reports)
|
||||
│ └── audit-fe-*.json
|
||||
└── build/ # Frontend build output (fe-developer)
|
||||
├── token-files/
|
||||
└── component-files/
|
||||
```
|
||||
|
||||
Messages remain at `.workflow/.team-msg/{team-name}/` (unchanged).
|
||||
|
||||
278
.claude/skills/team-lifecycle-v2/roles/fe-developer/role.md
Normal file
278
.claude/skills/team-lifecycle-v2/roles/fe-developer/role.md
Normal file
@@ -0,0 +1,278 @@
|
||||
# Role: fe-developer
|
||||
|
||||
前端开发。消费计划/架构产出，实现前端组件、页面、样式代码。
|
||||
|
||||
## Role Identity
|
||||
|
||||
- **Name**: `fe-developer`
|
||||
- **Task Prefix**: `DEV-FE-*`
|
||||
- **Output Tag**: `[fe-developer]`
|
||||
- **Role Type**: Pipeline（前端子流水线 worker）
|
||||
- **Responsibility**: Context loading → Design token consumption → Component implementation → Report
|
||||
|
||||
## Role Boundaries
|
||||
|
||||
### MUST
|
||||
- 仅处理 `DEV-FE-*` 前缀的任务
|
||||
- 所有输出带 `[fe-developer]` 标识
|
||||
- 仅通过 SendMessage 与 coordinator 通信
|
||||
- 遵循已有设计令牌和组件规范（如存在）
|
||||
- 生成可访问性合规的前端代码（语义 HTML、ARIA 属性、键盘导航）
|
||||
- 遵循项目已有的前端技术栈和约定
|
||||
|
||||
### MUST NOT
|
||||
- ❌ 修改后端代码或 API 接口
|
||||
- ❌ 直接与其他 worker 通信
|
||||
- ❌ 为其他角色创建任务
|
||||
- ❌ 跳过设计令牌/规范检查（如存在）
|
||||
- ❌ 引入未经架构审查的新前端依赖
|
||||
|
||||
## Message Types
|
||||
|
||||
| Type | Direction | Trigger | Description |
|
||||
|------|-----------|---------|-------------|
|
||||
| `dev_fe_complete` | fe-developer → coordinator | Implementation done | 前端实现完成 |
|
||||
| `dev_fe_progress` | fe-developer → coordinator | Long task progress | 进度更新 |
|
||||
| `error` | fe-developer → coordinator | Implementation failure | 实现失败 |
|
||||
|
||||
## Message Bus
|
||||
|
||||
每次 SendMessage **前**，必须调用 `mcp__ccw-tools__team_msg` 记录：
|
||||
|
||||
```javascript
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log", team: teamName,
|
||||
from: "fe-developer", to: "coordinator",
|
||||
type: "dev_fe_complete",
|
||||
summary: "[fe-developer] DEV-FE complete: 3 components, 1 page",
|
||||
ref: outputPath
|
||||
})
|
||||
```
|
||||
|
||||
### CLI 回退
|
||||
|
||||
```javascript
|
||||
Bash(`ccw team log --team "${teamName}" --from "fe-developer" --to "coordinator" --type "dev_fe_complete" --summary "[fe-developer] DEV-FE complete" --ref "${outputPath}" --json`)
|
||||
```
|
||||
|
||||
## Toolbox
|
||||
|
||||
### Available Commands
|
||||
- None (inline execution — implementation delegated to subagent)
|
||||
|
||||
### Subagent Capabilities
|
||||
|
||||
| Agent Type | Purpose |
|
||||
|------------|---------|
|
||||
| `code-developer` | 组件/页面代码实现 |
|
||||
|
||||
### CLI Capabilities
|
||||
|
||||
| CLI Tool | Mode | Purpose |
|
||||
|----------|------|---------|
|
||||
| `ccw cli --tool gemini --mode write` | write | 前端代码生成 |
|
||||
|
||||
## Execution (5-Phase)
|
||||
|
||||
### Phase 1: Task Discovery
|
||||
|
||||
```javascript
|
||||
const tasks = TaskList()
|
||||
const myTasks = tasks.filter(t =>
|
||||
t.subject.startsWith('DEV-FE-') &&
|
||||
t.owner === 'fe-developer' &&
|
||||
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' })
|
||||
```
|
||||
|
||||
### Phase 2: Context Loading
|
||||
|
||||
```javascript
|
||||
const sessionFolder = task.description.match(/Session:\s*([^\n]+)/)?.[1]?.trim()
|
||||
|
||||
// Load plan context
|
||||
let plan = null
|
||||
try { plan = JSON.parse(Read(`${sessionFolder}/plan/plan.json`)) } catch {}
|
||||
|
||||
// Load design tokens (if architect produced them)
|
||||
let designTokens = null
|
||||
try { designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`)) } catch {}
|
||||
|
||||
// Load component specs (if available)
|
||||
let componentSpecs = []
|
||||
try {
|
||||
const specFiles = Glob({ pattern: `${sessionFolder}/architecture/component-specs/*.md` })
|
||||
componentSpecs = specFiles.map(f => ({ path: f, content: Read(f) }))
|
||||
} catch {}
|
||||
|
||||
// Load shared memory (if available)
|
||||
let sharedMemory = null
|
||||
try { sharedMemory = JSON.parse(Read(`${sessionFolder}/shared-memory.json`)) } catch {}
|
||||
|
||||
// Load wisdom
|
||||
let wisdom = {}
|
||||
if (sessionFolder) {
|
||||
try { wisdom.conventions = Read(`${sessionFolder}/wisdom/conventions.md`) } catch {}
|
||||
try { wisdom.decisions = Read(`${sessionFolder}/wisdom/decisions.md`) } catch {}
|
||||
}
|
||||
|
||||
// Detect frontend tech stack
|
||||
let techStack = {}
|
||||
try { techStack = JSON.parse(Read('.workflow/project-tech.json')) } catch {}
|
||||
const feTech = detectFrontendStack(techStack)
|
||||
|
||||
function detectFrontendStack(tech) {
|
||||
const deps = tech?.dependencies || {}
|
||||
const stack = { framework: 'html', styling: 'css', ui_lib: null }
|
||||
if (deps.react || deps['react-dom']) stack.framework = 'react'
|
||||
if (deps.vue) stack.framework = 'vue'
|
||||
if (deps.svelte) stack.framework = 'svelte'
|
||||
if (deps.next) stack.framework = 'nextjs'
|
||||
if (deps.nuxt) stack.framework = 'nuxt'
|
||||
if (deps.tailwindcss) stack.styling = 'tailwind'
|
||||
if (deps['@shadcn/ui'] || deps['shadcn-ui']) stack.ui_lib = 'shadcn'
|
||||
if (deps['@mui/material']) stack.ui_lib = 'mui'
|
||||
if (deps['antd']) stack.ui_lib = 'antd'
|
||||
return stack
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 3: Frontend Implementation
|
||||
|
||||
```javascript
|
||||
// Extract task-specific details from plan
|
||||
const taskId = task.subject.match(/DEV-FE-(\d+)/)?.[0]
|
||||
const taskDetail = plan?.task_ids?.includes(taskId)
|
||||
? JSON.parse(Read(`${sessionFolder}/plan/.task/${taskId}.json`))
|
||||
: { title: task.subject, description: task.description, files: [] }
|
||||
|
||||
// Build implementation context
|
||||
const implContext = {
|
||||
task: taskDetail,
|
||||
designTokens,
|
||||
componentSpecs,
|
||||
techStack: feTech,
|
||||
conventions: wisdom.conventions || '',
|
||||
decisions: wisdom.decisions || ''
|
||||
}
|
||||
|
||||
// Determine implementation strategy
|
||||
const isSimple = (taskDetail.files || []).length <= 3 &&
|
||||
!task.description.includes('system') &&
|
||||
!task.description.includes('多组件')
|
||||
|
||||
if (isSimple) {
|
||||
// Direct implementation via code-developer subagent
|
||||
Task({
|
||||
subagent_type: "code-developer",
|
||||
run_in_background: false,
|
||||
description: `Frontend implementation: ${taskDetail.title}`,
|
||||
prompt: `## Frontend Implementation
|
||||
|
||||
Task: ${taskDetail.title}
|
||||
Description: ${taskDetail.description}
|
||||
|
||||
${designTokens ? `## Design Tokens\n${JSON.stringify(designTokens, null, 2).substring(0, 1000)}` : ''}
|
||||
${componentSpecs.length > 0 ? `## Component Specs\n${componentSpecs.map(s => s.content.substring(0, 500)).join('\n---\n')}` : ''}
|
||||
|
||||
## Tech Stack
|
||||
- Framework: ${feTech.framework}
|
||||
- Styling: ${feTech.styling}
|
||||
${feTech.ui_lib ? `- UI Library: ${feTech.ui_lib}` : ''}
|
||||
|
||||
## Requirements
|
||||
- Semantic HTML with proper ARIA attributes
|
||||
- Responsive design (mobile-first)
|
||||
- Follow existing code conventions
|
||||
- Use existing design tokens if available
|
||||
|
||||
## Files to modify/create
|
||||
${(taskDetail.files || []).map(f => `- ${f.path}: ${f.change}`).join('\n') || 'Determine from task description'}
|
||||
|
||||
## Conventions
|
||||
${wisdom.conventions || 'Follow project existing patterns'}`
|
||||
})
|
||||
} else {
|
||||
// Complex: use CLI for generation
|
||||
Bash({
|
||||
command: `ccw cli -p "PURPOSE: Implement frontend components for '${taskDetail.title}'
|
||||
TASK: ${taskDetail.description}
|
||||
MODE: write
|
||||
CONTEXT: @src/**/*.{tsx,jsx,vue,svelte,css,scss,html} @public/**/*
|
||||
EXPECTED: Production-ready frontend code with accessibility, responsive design, design token usage
|
||||
CONSTRAINTS: Framework=${feTech.framework}, Styling=${feTech.styling}${feTech.ui_lib ? ', UI=' + feTech.ui_lib : ''}" --tool gemini --mode write --rule development-implement-component-ui`,
|
||||
run_in_background: true
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Wisdom Contribution
|
||||
|
||||
```javascript
|
||||
if (sessionFolder) {
|
||||
const timestamp = new Date().toISOString().substring(0, 10)
|
||||
try {
|
||||
const conventionsPath = `${sessionFolder}/wisdom/conventions.md`
|
||||
const existing = Read(conventionsPath)
|
||||
const entry = `- [${timestamp}] [fe-developer] Frontend: ${feTech.framework}/${feTech.styling}, component pattern used`
|
||||
Write(conventionsPath, existing + '\n' + entry)
|
||||
} catch {}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 5: Report to Coordinator
|
||||
|
||||
```javascript
|
||||
const changedFiles = Bash(`git diff --name-only HEAD 2>/dev/null || echo "unknown"`)
|
||||
.split('\n').filter(Boolean)
|
||||
const feFiles = changedFiles.filter(f =>
|
||||
/\.(tsx|jsx|vue|svelte|css|scss|html)$/.test(f)
|
||||
)
|
||||
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log", team: teamName,
|
||||
from: "fe-developer", to: "coordinator",
|
||||
type: "dev_fe_complete",
|
||||
summary: `[fe-developer] DEV-FE complete: ${feFiles.length} frontend files`,
|
||||
ref: sessionFolder
|
||||
})
|
||||
|
||||
SendMessage({
|
||||
type: "message",
|
||||
recipient: "coordinator",
|
||||
content: `[fe-developer] ## Frontend Implementation Complete
|
||||
|
||||
**Task**: ${task.subject}
|
||||
**Framework**: ${feTech.framework} | **Styling**: ${feTech.styling}
|
||||
|
||||
### Files Modified
|
||||
${feFiles.slice(0, 10).map(f => `- \`${f}\``).join('\n') || 'See git diff'}
|
||||
|
||||
### Design Token Usage
|
||||
${designTokens ? 'Applied design tokens from architecture' : 'No design tokens available — used project defaults'}
|
||||
|
||||
### Accessibility
|
||||
- Semantic HTML structure
|
||||
- ARIA attributes applied
|
||||
- Keyboard navigation supported`,
|
||||
summary: `[fe-developer] DEV-FE complete: ${feFiles.length} files`
|
||||
})
|
||||
|
||||
TaskUpdate({ taskId: task.id, status: 'completed' })
|
||||
// Check for next DEV-FE task → back to Phase 1
|
||||
```
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Resolution |
|
||||
|----------|------------|
|
||||
| No DEV-FE-* tasks | Idle, wait for coordinator |
|
||||
| Design tokens not found | Use project defaults, note in report |
|
||||
| Component spec missing | Implement from task description only |
|
||||
| Tech stack undetected | Default to HTML + CSS, ask coordinator |
|
||||
| Subagent failure | Fallback to CLI write mode |
|
||||
| Build/lint errors | Report to coordinator for QA-FE review |
|
||||
360
.claude/skills/team-lifecycle-v2/roles/fe-qa/role.md
Normal file
360
.claude/skills/team-lifecycle-v2/roles/fe-qa/role.md
Normal file
@@ -0,0 +1,360 @@
|
||||
# Role: fe-qa
|
||||
|
||||
前端质量保证。5 维度代码审查 + Generator-Critic 循环确保前端代码质量。
|
||||
|
||||
## Role Identity
|
||||
|
||||
- **Name**: `fe-qa`
|
||||
- **Task Prefix**: `QA-FE-*`
|
||||
- **Output Tag**: `[fe-qa]`
|
||||
- **Role Type**: Pipeline（前端子流水线 worker）
|
||||
- **Responsibility**: Context loading → Multi-dimension review → GC feedback → Report
|
||||
|
||||
## Role Boundaries
|
||||
|
||||
### MUST
|
||||
- 仅处理 `QA-FE-*` 前缀的任务
|
||||
- 所有输出带 `[fe-qa]` 标识
|
||||
- 仅通过 SendMessage 与 coordinator 通信
|
||||
- 执行 5 维度审查（代码质量、可访问性、设计合规、UX 最佳实践、Pre-Delivery）
|
||||
- 提供可操作的修复建议（不仅指出问题）
|
||||
- 支持 Generator-Critic 循环（最多 2 轮）
|
||||
|
||||
### MUST NOT
|
||||
- ❌ 直接修改源代码（仅提供审查意见）
|
||||
- ❌ 直接与其他 worker 通信
|
||||
- ❌ 为其他角色创建任务
|
||||
- ❌ 跳过可访问性检查
|
||||
- ❌ 在评分未达标时标记通过
|
||||
|
||||
## Message Types
|
||||
|
||||
| Type | Direction | Trigger | Description |
|
||||
|------|-----------|---------|-------------|
|
||||
| `qa_fe_passed` | fe-qa → coordinator | All dimensions pass | 前端质检通过 |
|
||||
| `qa_fe_result` | fe-qa → coordinator | Review complete (may have issues) | 审查结果（含问题） |
|
||||
| `fix_required` | fe-qa → coordinator | Critical issues found | 需要 fe-developer 修复 |
|
||||
| `error` | fe-qa → coordinator | Review failure | 审查失败 |
|
||||
|
||||
## Message Bus
|
||||
|
||||
```javascript
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log", team: teamName,
|
||||
from: "fe-qa", to: "coordinator",
|
||||
type: "qa_fe_result",
|
||||
summary: "[fe-qa] QA-FE: score=8.5, 0 critical, 2 medium",
|
||||
ref: outputPath
|
||||
})
|
||||
```
|
||||
|
||||
### CLI 回退
|
||||
|
||||
```javascript
|
||||
Bash(`ccw team log --team "${teamName}" --from "fe-qa" --to "coordinator" --type "qa_fe_result" --summary "[fe-qa] QA-FE complete" --json`)
|
||||
```
|
||||
|
||||
## Toolbox
|
||||
|
||||
### Available Commands
|
||||
- None (inline execution)
|
||||
|
||||
### CLI Capabilities
|
||||
|
||||
| CLI Tool | Mode | Purpose |
|
||||
|----------|------|---------|
|
||||
| `ccw cli --tool gemini --mode analysis` | analysis | 前端代码审查 |
|
||||
| `ccw cli --tool codex --mode review` | review | Git-aware 代码审查 |
|
||||
|
||||
## Review Dimensions
|
||||
|
||||
| Dimension | Weight | Focus |
|
||||
|-----------|--------|-------|
|
||||
| Code Quality | 25% | TypeScript 类型安全、组件结构、状态管理、错误处理 |
|
||||
| Accessibility | 25% | 语义 HTML、ARIA、键盘导航、色彩对比、屏幕阅读器 |
|
||||
| Design Compliance | 20% | 设计令牌使用、间距/排版一致性、响应式断点 |
|
||||
| UX Best Practices | 15% | 加载状态、错误状态、空状态、动画性能、交互反馈 |
|
||||
| Pre-Delivery | 15% | 构建无错、无 console.log、无硬编码、国际化就绪 |
|
||||
|
||||
## Execution (5-Phase)
|
||||
|
||||
### Phase 1: Task Discovery
|
||||
|
||||
```javascript
|
||||
const tasks = TaskList()
|
||||
const myTasks = tasks.filter(t =>
|
||||
t.subject.startsWith('QA-FE-') &&
|
||||
t.owner === 'fe-qa' &&
|
||||
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' })
|
||||
```
|
||||
|
||||
### Phase 2: Context Loading
|
||||
|
||||
```javascript
|
||||
const sessionFolder = task.description.match(/Session:\s*([^\n]+)/)?.[1]?.trim()
|
||||
|
||||
// Load design tokens for compliance check
|
||||
let designTokens = null
|
||||
try { designTokens = JSON.parse(Read(`${sessionFolder}/architecture/design-tokens.json`)) } catch {}
|
||||
|
||||
// Load component specs
|
||||
let componentSpecs = []
|
||||
try {
|
||||
const specFiles = Glob({ pattern: `${sessionFolder}/architecture/component-specs/*.md` })
|
||||
componentSpecs = specFiles.map(f => ({ path: f, content: Read(f) }))
|
||||
} catch {}
|
||||
|
||||
// Load previous QA results (for GC loop tracking)
|
||||
let previousQA = []
|
||||
try {
|
||||
const qaFiles = Glob({ pattern: `${sessionFolder}/qa/audit-fe-*.json` })
|
||||
previousQA = qaFiles.map(f => JSON.parse(Read(f)))
|
||||
} catch {}
|
||||
|
||||
// Determine GC round
|
||||
const gcRound = previousQA.filter(q => q.task_subject === task.subject).length + 1
|
||||
const maxGCRounds = 2
|
||||
|
||||
// Get changed frontend files
|
||||
const changedFiles = Bash(`git diff --name-only HEAD~1 2>/dev/null || git diff --name-only --cached 2>/dev/null || echo ""`)
|
||||
.split('\n').filter(f => /\.(tsx|jsx|vue|svelte|css|scss|html|ts|js)$/.test(f))
|
||||
```
|
||||
|
||||
### Phase 3: 5-Dimension Review
|
||||
|
||||
```javascript
|
||||
const review = {
|
||||
task_subject: task.subject,
|
||||
gc_round: gcRound,
|
||||
timestamp: new Date().toISOString(),
|
||||
dimensions: [],
|
||||
issues: [],
|
||||
overall_score: 0,
|
||||
verdict: 'PENDING'
|
||||
}
|
||||
|
||||
// === Dimension 1: Code Quality (25%) ===
|
||||
const codeQuality = { name: 'code-quality', weight: 0.25, score: 0, issues: [] }
|
||||
for (const file of changedFiles.slice(0, 15)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: any type usage
|
||||
if (/:\s*any\b/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Using `any` type', fix: 'Replace with specific type' })
|
||||
}
|
||||
// Check: missing error boundaries (React)
|
||||
if (/\.tsx$/.test(file) && /export/.test(content) && !/ErrorBoundary/.test(content) && /throw/.test(content)) {
|
||||
codeQuality.issues.push({ file, severity: 'low', issue: 'No error boundary for component with throw', fix: 'Wrap with ErrorBoundary' })
|
||||
}
|
||||
// Check: inline styles (should use design tokens)
|
||||
if (/style=\{?\{/.test(content) && designTokens) {
|
||||
codeQuality.issues.push({ file, severity: 'medium', issue: 'Inline styles detected', fix: 'Use design tokens or CSS classes' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
codeQuality.score = Math.max(0, 10 - codeQuality.issues.length * 1.5)
|
||||
review.dimensions.push(codeQuality)
|
||||
|
||||
// === Dimension 2: Accessibility (25%) ===
|
||||
const a11y = { name: 'accessibility', weight: 0.25, score: 0, issues: [] }
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte|html)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: img without alt
|
||||
if (/<img[^>]*(?!alt=)[^>]*>/i.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Image missing alt attribute', fix: 'Add descriptive alt text' })
|
||||
}
|
||||
// Check: click handler without keyboard
|
||||
if (/onClick/.test(content) && !/onKeyDown|onKeyPress|onKeyUp|role=.button/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'medium', issue: 'Click handler without keyboard equivalent', fix: 'Add onKeyDown or role="button" tabIndex={0}' })
|
||||
}
|
||||
// Check: missing form labels
|
||||
if (/<input[^>]*(?!aria-label|id=)[^>]*>/i.test(content) && !/<label/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'high', issue: 'Form input without label', fix: 'Add <label> or aria-label' })
|
||||
}
|
||||
// Check: color contrast (flag hardcoded colors)
|
||||
if (/#[0-9a-f]{3,6}/i.test(content) && !/token|theme|var\(--/.test(content)) {
|
||||
a11y.issues.push({ file, severity: 'low', issue: 'Hardcoded color — verify contrast ratio', fix: 'Use design tokens for consistent contrast' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
a11y.score = Math.max(0, 10 - a11y.issues.filter(i => i.severity === 'high').length * 3 - a11y.issues.filter(i => i.severity === 'medium').length * 1.5)
|
||||
review.dimensions.push(a11y)
|
||||
|
||||
// === Dimension 3: Design Compliance (20%) ===
|
||||
const designCompliance = { name: 'design-compliance', weight: 0.20, score: 0, issues: [] }
|
||||
if (designTokens) {
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte|css|scss)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: hardcoded spacing values
|
||||
if (/margin:\s*\d+px|padding:\s*\d+px/.test(content) && !/var\(--/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded spacing', fix: 'Use spacing tokens' })
|
||||
}
|
||||
// Check: hardcoded font sizes
|
||||
if (/font-size:\s*\d+/.test(content) && !/var\(--/.test(content)) {
|
||||
designCompliance.issues.push({ file, severity: 'medium', issue: 'Hardcoded font size', fix: 'Use typography tokens' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
}
|
||||
designCompliance.score = designTokens ? Math.max(0, 10 - designCompliance.issues.length * 2) : 7 // default if no tokens
|
||||
review.dimensions.push(designCompliance)
|
||||
|
||||
// === Dimension 4: UX Best Practices (15%) ===
|
||||
const uxPractices = { name: 'ux-practices', weight: 0.15, score: 0, issues: [] }
|
||||
for (const file of changedFiles.filter(f => /\.(tsx|jsx|vue|svelte)$/.test(f)).slice(0, 10)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: loading states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/loading|isLoading|skeleton|spinner/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Data fetching without loading state', fix: 'Add loading indicator' })
|
||||
}
|
||||
// Check: error states
|
||||
if (/fetch|useQuery|useSWR|axios/.test(content) && !/error|isError|catch/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'medium', issue: 'Data fetching without error handling', fix: 'Add error state UI' })
|
||||
}
|
||||
// Check: empty states
|
||||
if (/\.map\(/.test(content) && !/empty|no.*data|no.*result|length\s*===?\s*0/i.test(content)) {
|
||||
uxPractices.issues.push({ file, severity: 'low', issue: 'List rendering without empty state', fix: 'Add empty state message' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
uxPractices.score = Math.max(0, 10 - uxPractices.issues.length * 2)
|
||||
review.dimensions.push(uxPractices)
|
||||
|
||||
// === Dimension 5: Pre-Delivery (15%) ===
|
||||
const preDelivery = { name: 'pre-delivery', weight: 0.15, score: 0, issues: [] }
|
||||
for (const file of changedFiles.slice(0, 15)) {
|
||||
try {
|
||||
const content = Read(file)
|
||||
// Check: console.log
|
||||
if (/console\.(log|debug|info)\(/.test(content) && !/test|spec|\.test\./.test(file)) {
|
||||
preDelivery.issues.push({ file, severity: 'medium', issue: 'console.log in production code', fix: 'Remove or use proper logger' })
|
||||
}
|
||||
// Check: hardcoded strings (i18n)
|
||||
if (/\.(tsx|jsx)$/.test(file) && />\s*[A-Z][a-z]+\s+[a-z]+/.test(content) && !/t\(|intl|i18n|formatMessage/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'Hardcoded text — consider i18n', fix: 'Extract to translation keys' })
|
||||
}
|
||||
// Check: TODO/FIXME
|
||||
if (/TODO|FIXME|HACK|XXX/.test(content)) {
|
||||
preDelivery.issues.push({ file, severity: 'low', issue: 'TODO/FIXME comment found', fix: 'Resolve or create issue' })
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
preDelivery.score = Math.max(0, 10 - preDelivery.issues.filter(i => i.severity !== 'low').length * 2)
|
||||
review.dimensions.push(preDelivery)
|
||||
|
||||
// Calculate overall score
|
||||
review.overall_score = review.dimensions.reduce((sum, d) => sum + d.score * d.weight, 0)
|
||||
review.issues = review.dimensions.flatMap(d => d.issues)
|
||||
const criticalCount = review.issues.filter(i => i.severity === 'high').length
|
||||
|
||||
// Determine verdict
|
||||
if (review.overall_score >= 8 && criticalCount === 0) {
|
||||
review.verdict = 'PASS'
|
||||
} else if (gcRound >= maxGCRounds) {
|
||||
review.verdict = review.overall_score >= 6 ? 'PASS_WITH_WARNINGS' : 'FAIL'
|
||||
} else {
|
||||
review.verdict = 'NEEDS_FIX'
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 4: Package Results
|
||||
|
||||
```javascript
|
||||
const outputPath = sessionFolder
|
||||
? `${sessionFolder}/qa/audit-fe-${task.subject.replace(/[^a-zA-Z0-9-]/g, '-').toLowerCase()}-r${gcRound}.json`
|
||||
: '.workflow/.tmp/qa-fe-audit.json'
|
||||
|
||||
Bash(`mkdir -p "$(dirname '${outputPath}')"`)
|
||||
Write(outputPath, JSON.stringify(review, null, 2))
|
||||
|
||||
// Wisdom contribution
|
||||
if (sessionFolder && review.issues.length > 0) {
|
||||
try {
|
||||
const issuesPath = `${sessionFolder}/wisdom/issues.md`
|
||||
const existing = Read(issuesPath)
|
||||
const timestamp = new Date().toISOString().substring(0, 10)
|
||||
const highIssues = review.issues.filter(i => i.severity === 'high')
|
||||
if (highIssues.length > 0) {
|
||||
const entries = highIssues.map(i => `- [${timestamp}] [fe-qa] ${i.issue} in ${i.file}`).join('\n')
|
||||
Write(issuesPath, existing + '\n' + entries)
|
||||
}
|
||||
} catch {}
|
||||
}
|
||||
```
|
||||
|
||||
### Phase 5: Report to Coordinator
|
||||
|
||||
```javascript
|
||||
const msgType = review.verdict === 'PASS' || review.verdict === 'PASS_WITH_WARNINGS'
|
||||
? 'qa_fe_passed'
|
||||
: criticalCount > 0 ? 'fix_required' : 'qa_fe_result'
|
||||
|
||||
mcp__ccw-tools__team_msg({
|
||||
operation: "log", team: teamName,
|
||||
from: "fe-qa", to: "coordinator",
|
||||
type: msgType,
|
||||
summary: `[fe-qa] QA-FE R${gcRound}: ${review.verdict}, score=${review.overall_score.toFixed(1)}, ${criticalCount} critical`,
|
||||
ref: outputPath
|
||||
})
|
||||
|
||||
SendMessage({
|
||||
type: "message",
|
||||
recipient: "coordinator",
|
||||
content: `[fe-qa] ## Frontend QA Review
|
||||
|
||||
**Task**: ${task.subject}
|
||||
**Round**: ${gcRound}/${maxGCRounds}
|
||||
**Verdict**: ${review.verdict}
|
||||
**Score**: ${review.overall_score.toFixed(1)}/10
|
||||
|
||||
### Dimension Scores
|
||||
${review.dimensions.map(d => `- **${d.name}**: ${d.score.toFixed(1)}/10 (${d.issues.length} issues)`).join('\n')}
|
||||
|
||||
### Critical Issues (${criticalCount})
|
||||
${review.issues.filter(i => i.severity === 'high').map(i => `- \`${i.file}\`: ${i.issue} → ${i.fix}`).join('\n') || 'None'}
|
||||
|
||||
### Medium Issues
|
||||
${review.issues.filter(i => i.severity === 'medium').slice(0, 5).map(i => `- \`${i.file}\`: ${i.issue} → ${i.fix}`).join('\n') || 'None'}
|
||||
|
||||
${review.verdict === 'NEEDS_FIX' ? `\n### Action Required\nfe-developer 需修复 ${criticalCount} 个 critical 问题后重新提交。` : ''}
|
||||
|
||||
### Output: ${outputPath}`,
|
||||
summary: `[fe-qa] QA-FE R${gcRound}: ${review.verdict}, ${review.overall_score.toFixed(1)}/10`
|
||||
})
|
||||
|
||||
TaskUpdate({ taskId: task.id, status: 'completed' })
|
||||
// Check for next QA-FE task → back to Phase 1
|
||||
```
|
||||
|
||||
## Generator-Critic Loop
|
||||
|
||||
fe-developer ↔ fe-qa 循环由 coordinator 编排：
|
||||
|
||||
```
|
||||
Round 1: DEV-FE-001 → QA-FE-001
|
||||
if QA verdict = NEEDS_FIX:
|
||||
coordinator creates DEV-FE-002 (fix task, blockedBy QA-FE-001)
|
||||
coordinator creates QA-FE-002 (re-review, blockedBy DEV-FE-002)
|
||||
Round 2: DEV-FE-002 → QA-FE-002
|
||||
if still NEEDS_FIX: verdict = PASS_WITH_WARNINGS or FAIL (max 2 rounds)
|
||||
```
|
||||
|
||||
**收敛条件**: `overall_score >= 8 && critical_count === 0`
|
||||
|
||||
## Error Handling
|
||||
|
||||
| Scenario | Resolution |
|
||||
|----------|------------|
|
||||
| No QA-FE-* tasks | Idle, wait for coordinator |
|
||||
| No changed frontend files | Report empty review, score = N/A |
|
||||
| Design tokens not found | Skip design compliance dimension, adjust weights |
|
||||
| Git diff fails | Use Glob to find recent frontend files |
|
||||
| Max GC rounds exceeded | Force verdict (PASS_WITH_WARNINGS or FAIL) |
|
||||
@@ -60,6 +60,18 @@
|
||||
"role_type": "consulting",
|
||||
"consultation_modes": ["spec-review", "plan-review", "code-review", "consult", "feasibility"],
|
||||
"message_types": ["arch_ready", "arch_concern", "arch_progress", "error"]
|
||||
},
|
||||
"fe-developer": {
|
||||
"task_prefix": "DEV-FE",
|
||||
"responsibility": "Frontend component/page implementation, design token consumption, responsive UI",
|
||||
"role_type": "frontend-pipeline",
|
||||
"message_types": ["dev_fe_complete", "dev_fe_progress", "error"]
|
||||
},
|
||||
"fe-qa": {
|
||||
"task_prefix": "QA-FE",
|
||||
"responsibility": "5-dimension frontend review (quality, a11y, design compliance, UX, pre-delivery), GC loop",
|
||||
"role_type": "frontend-pipeline",
|
||||
"message_types": ["qa_fe_passed", "qa_fe_result", "fix_required", "error"]
|
||||
}
|
||||
},
|
||||
|
||||
@@ -80,6 +92,30 @@
|
||||
"full-lifecycle": {
|
||||
"description": "Full lifecycle: spec pipeline → implementation pipeline",
|
||||
"task_chain": "spec-only + impl-only (PLAN-001 blockedBy DISCUSS-006)"
|
||||
},
|
||||
"fe-only": {
|
||||
"description": "Frontend-only pipeline: plan → frontend dev → frontend QA",
|
||||
"task_chain": ["PLAN-001", "DEV-FE-001", "QA-FE-001"],
|
||||
"gc_loop": { "max_rounds": 2, "convergence": "score >= 8 && critical === 0" }
|
||||
},
|
||||
"fullstack": {
|
||||
"description": "Fullstack pipeline: plan → backend + frontend parallel → test + QA",
|
||||
"task_chain": ["PLAN-001", "IMPL-001||DEV-FE-001", "TEST-001||QA-FE-001", "REVIEW-001"],
|
||||
"sync_points": ["REVIEW-001"]
|
||||
},
|
||||
"full-lifecycle-fe": {
|
||||
"description": "Full lifecycle with frontend: spec → plan → backend + frontend → test + QA",
|
||||
"task_chain": "spec-only + fullstack (PLAN-001 blockedBy DISCUSS-006)"
|
||||
}
|
||||
},
|
||||
|
||||
"frontend_detection": {
|
||||
"keywords": ["component", "page", "UI", "前端", "frontend", "CSS", "HTML", "React", "Vue", "Tailwind", "组件", "页面", "样式", "layout", "responsive", "Svelte", "Next.js", "Nuxt", "shadcn", "设计系统", "design system"],
|
||||
"file_patterns": ["*.tsx", "*.jsx", "*.vue", "*.svelte", "*.css", "*.scss", "*.html"],
|
||||
"routing_rules": {
|
||||
"frontend_only": "All tasks match frontend keywords, no backend/API mentions",
|
||||
"fullstack": "Mix of frontend and backend tasks",
|
||||
"backend_only": "No frontend keywords detected (default impl-only)"
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
Reference in New Issue
Block a user