Files
Claude-Code-Workflow/.claude/skills/team-frontend-debug/SKILL.md
catlog22 80d8954b7a Add roles for fixer, reproducer, tester, verifier, and supervisor with detailed workflows
- 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.
2026-03-07 22:52:40 +08:00

6.8 KiB

name, description, allowed-tools
name description allowed-tools
team-frontend-debug Frontend debugging team using Chrome DevTools MCP. Dual-mode — feature-list testing or bug-report debugging. Triggers on "team-frontend-debug", "frontend debug". 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
tester roles/tester/role.md TEST-* true
reproducer roles/reproducer/role.md REPRODUCE-* false
analyzer roles/analyzer/role.md ANALYZE-* false
fixer roles/fixer/role.md FIX-* true
verifier 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

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