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: ~ or <project>/.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 — Pipeline definitions and task registry

• 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