mirror of
https://github.com/catlog22/Claude-Code-Workflow.git
synced 2026-03-10 17:11:04 +08:00
80d8954b7a
- Introduced `fixer` role for implementing code fixes based on RCA reports, including phases for parsing RCA, planning fixes, implementing changes, and documenting results. - Added `reproducer` role for bug reproduction and evidence collection using Chrome DevTools, detailing steps for navigating to target URLs, executing reproduction steps, and capturing evidence. - Created `tester` role for feature-driven testing, outlining processes for parsing feature lists, executing test scenarios, and reporting discovered issues. - Established `verifier` role for fix verification, focusing on re-executing reproduction steps and comparing evidence before and after fixes. - Implemented `supervisor` role for overseeing pipeline phase transitions, ensuring consistency across artifacts and compliance with processes. - Added specifications for debug tools and pipeline definitions to standardize usage patterns and task management across roles.
171 lines
6.8 KiB
Markdown
171 lines
6.8 KiB
Markdown
---
|
|
name: team-frontend-debug
|
|
description: Frontend debugging team using Chrome DevTools MCP. Dual-mode — feature-list testing or bug-report debugging. Triggers on "team-frontend-debug", "frontend debug".
|
|
allowed-tools: TeamCreate(*), TeamDelete(*), SendMessage(*), TaskCreate(*), TaskUpdate(*), TaskList(*), TaskGet(*), Agent(*), AskUserQuestion(*), Read(*), Write(*), Edit(*), Bash(*), Glob(*), Grep(*), mcp__chrome-devtools__*(*)
|
|
---
|
|
|
|
# Frontend Debug Team
|
|
|
|
Dual-mode frontend debugging: feature-list testing or bug-report debugging, powered by Chrome DevTools MCP.
|
|
|
|
## Architecture
|
|
|
|
```
|
|
Skill(skill="team-frontend-debug", args="feature list or bug description")
|
|
|
|
|
SKILL.md (this file) = Router
|
|
|
|
|
+--------------+--------------+
|
|
| |
|
|
no --role flag --role <name>
|
|
| |
|
|
Coordinator Worker
|
|
roles/coordinator/role.md roles/<name>/role.md
|
|
|
|
|
+-- analyze input → select pipeline → dispatch → spawn → STOP
|
|
|
|
|
┌──────────────────────────┼──────────────────────┐
|
|
v v v
|
|
[test-pipeline] [debug-pipeline] [shared]
|
|
tester(DevTools) reproducer(DevTools) analyzer
|
|
fixer
|
|
verifier
|
|
```
|
|
|
|
## Pipeline Modes
|
|
|
|
| Input | Pipeline | Flow |
|
|
|-------|----------|------|
|
|
| Feature list / 功能清单 | `test-pipeline` | TEST → ANALYZE → FIX → VERIFY |
|
|
| Bug report / 错误描述 | `debug-pipeline` | REPRODUCE → ANALYZE → FIX → VERIFY |
|
|
|
|
## Role Registry
|
|
|
|
| Role | Path | Prefix | Inner Loop |
|
|
|------|------|--------|------------|
|
|
| coordinator | [roles/coordinator/role.md](roles/coordinator/role.md) | — | — |
|
|
| tester | [roles/tester/role.md](roles/tester/role.md) | TEST-* | true |
|
|
| reproducer | [roles/reproducer/role.md](roles/reproducer/role.md) | REPRODUCE-* | false |
|
|
| analyzer | [roles/analyzer/role.md](roles/analyzer/role.md) | ANALYZE-* | false |
|
|
| fixer | [roles/fixer/role.md](roles/fixer/role.md) | FIX-* | true |
|
|
| verifier | [roles/verifier/role.md](roles/verifier/role.md) | VERIFY-* | false |
|
|
|
|
## Role Router
|
|
|
|
Parse `$ARGUMENTS`:
|
|
- Has `--role <name>` → Read `roles/<name>/role.md`, execute Phase 2-4
|
|
- No `--role` → Read `roles/coordinator/role.md`, execute entry router
|
|
|
|
## Shared Constants
|
|
|
|
- **Session prefix**: `TFD`
|
|
- **Session path**: `.workflow/.team/TFD-<slug>-<date>/`
|
|
- **CLI tools**: `ccw cli --mode analysis` (read-only), `ccw cli --mode write` (modifications)
|
|
- **Message bus**: `mcp__ccw-tools__team_msg(session_id=<session-id>, ...)`
|
|
|
|
## Chrome DevTools MCP Tools
|
|
|
|
All browser inspection operations use Chrome DevTools MCP. Reproducer and Verifier are primary consumers.
|
|
|
|
| Tool | Purpose |
|
|
|------|---------|
|
|
| `mcp__chrome-devtools__navigate_page` | Navigate to target URL |
|
|
| `mcp__chrome-devtools__take_screenshot` | Capture visual state |
|
|
| `mcp__chrome-devtools__take_snapshot` | Capture DOM/a11y tree |
|
|
| `mcp__chrome-devtools__list_console_messages` | Read console logs |
|
|
| `mcp__chrome-devtools__get_console_message` | Get specific console message |
|
|
| `mcp__chrome-devtools__list_network_requests` | Monitor network activity |
|
|
| `mcp__chrome-devtools__get_network_request` | Inspect request/response detail |
|
|
| `mcp__chrome-devtools__performance_start_trace` | Start performance recording |
|
|
| `mcp__chrome-devtools__performance_stop_trace` | Stop and analyze trace |
|
|
| `mcp__chrome-devtools__click` | Simulate user click |
|
|
| `mcp__chrome-devtools__fill` | Fill form inputs |
|
|
| `mcp__chrome-devtools__hover` | Hover over elements |
|
|
| `mcp__chrome-devtools__evaluate_script` | Execute JavaScript in page |
|
|
| `mcp__chrome-devtools__wait_for` | Wait for element/text |
|
|
| `mcp__chrome-devtools__list_pages` | List open browser tabs |
|
|
| `mcp__chrome-devtools__select_page` | Switch active tab |
|
|
|
|
## Worker Spawn Template
|
|
|
|
Coordinator spawns workers using this template:
|
|
|
|
```
|
|
Agent({
|
|
subagent_type: "team-worker",
|
|
description: "Spawn <role> worker",
|
|
team_name: <team-name>,
|
|
name: "<role>",
|
|
run_in_background: true,
|
|
prompt: `## Role Assignment
|
|
role: <role>
|
|
role_spec: .claude/skills/team-frontend-debug/roles/<role>/role.md
|
|
session: <session-folder>
|
|
session_id: <session-id>
|
|
team_name: <team-name>
|
|
requirement: <task-description>
|
|
inner_loop: <true|false>
|
|
|
|
Read role_spec file to load Phase 2-4 domain instructions.
|
|
Execute built-in Phase 1 (task discovery) -> role Phase 2-4 -> built-in Phase 5 (report).`
|
|
})
|
|
```
|
|
|
|
## User Commands
|
|
|
|
| Command | Action |
|
|
|---------|--------|
|
|
| `check` / `status` | View execution status graph |
|
|
| `resume` / `continue` | Advance to next step |
|
|
| `revise <TASK-ID> [feedback]` | Revise specific task |
|
|
| `feedback <text>` | Inject feedback for revision |
|
|
| `retry <TASK-ID>` | Re-run a failed task |
|
|
|
|
## Completion Action
|
|
|
|
When pipeline completes, coordinator presents:
|
|
|
|
```
|
|
AskUserQuestion({
|
|
questions: [{
|
|
question: "Pipeline complete. What would you like to do?",
|
|
header: "Completion",
|
|
multiSelect: false,
|
|
options: [
|
|
{ label: "Archive & Clean (Recommended)", description: "Archive session, clean up team" },
|
|
{ label: "Keep Active", description: "Keep session for follow-up debugging" },
|
|
{ label: "Export Results", description: "Export debug report and patches" }
|
|
]
|
|
}]
|
|
})
|
|
```
|
|
|
|
## Specs Reference
|
|
|
|
- [specs/pipelines.md](specs/pipelines.md) — Pipeline definitions and task registry
|
|
- [specs/debug-tools.md](specs/debug-tools.md) — Chrome DevTools MCP usage patterns and evidence collection
|
|
|
|
## Session Directory
|
|
|
|
```
|
|
.workflow/.team/TFD-<slug>-<date>/
|
|
├── team-session.json # Session state + role registry
|
|
├── evidence/ # Screenshots, snapshots, network logs
|
|
├── artifacts/ # Test reports, RCA reports, patches, verification reports
|
|
├── wisdom/ # Cross-task debug knowledge
|
|
└── .msg/ # Team message bus
|
|
```
|
|
|
|
## Error Handling
|
|
|
|
| Scenario | Resolution |
|
|
|----------|------------|
|
|
| All features pass test | Report success, pipeline completes without ANALYZE/FIX/VERIFY |
|
|
| Bug not reproducible | Reproducer reports failure, coordinator asks user for more details |
|
|
| Browser not available | Report error, suggest manual reproduction steps |
|
|
| Analysis inconclusive | Analyzer requests more evidence via iteration loop |
|
|
| Fix introduces regression | Verifier reports fail, coordinator dispatches re-fix |
|
|
| No issues found in test | Skip downstream tasks, report all-pass |
|
|
| Unknown command | Error with available command list |
|
|
| Role not found | Error with role registry |
|