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

test-pipeline

debug-pipeline

Role Registry

Role Router

Parse

$ARGUMENTS

• Has

  --role <name>

  → Read

  roles/<name>/role.md

  , execute Phase 2-4
• No

  --role

  →

  roles/coordinator/role.md

  , execute entry router

Delegation Lock

Coordinator is a PURE ORCHESTRATOR. It coordinates, it does NOT do.

Before calling ANY tool, apply this check:

spawn_agent

wait_agent

close_agent

send_message

followup_task

list_agents

request_user_input

mcp__ccw-tools__team_msg

Read/Write

.workflow/.team/

Read

roles/

commands/

specs/

Read/Grep/Glob

Edit

.workflow/

Bash("ccw cli ...")

Bash

If a tool call is BLOCKED: STOP. Create a task, spawn a worker.

No exceptions for "simple" tasks. Even a single-file read-and-report MUST go through spawn_agent.

Shared Constants

• Session prefix:

  TFD

• Session path:

  .workflow/.team/TFD-<date>-<slug>/

• CLI tools:

  ccw cli --mode analysis

  (read-only),

  ccw cli --mode write

  (modifications)
• Message bus:

  mcp__ccw-tools__team_msg(session_id=<session-id>, ...)

Workspace Resolution

Coordinator MUST resolve paths at Phase 2 before spawning workers:

1. Run

   Bash({ command: "pwd" })

   → capture

   project_root

   (absolute path)

2. skill_root = <project_root>/.claude/skills/team-frontend-debug

3. Store in

   team-session.json

   :

   { "project_root": "/abs/path/to/project", "skill_root": "/abs/path/to/skill" }
   

4. All worker

   role_spec

   values MUST use

   <skill_root>/roles/<role>/role.md

   (absolute)

This ensures workers always receive an absolute, resolvable path regardless of their working directory.

Chrome DevTools MCP Tools

All browser inspection operations use Chrome DevTools MCP. Reproducer and Verifier are primary consumers.

mcp__chrome-devtools__navigate_page

mcp__chrome-devtools__take_screenshot

mcp__chrome-devtools__take_snapshot

mcp__chrome-devtools__list_console_messages

mcp__chrome-devtools__get_console_message

mcp__chrome-devtools__list_network_requests

mcp__chrome-devtools__get_network_request

mcp__chrome-devtools__performance_start_trace

mcp__chrome-devtools__performance_stop_trace

mcp__chrome-devtools__click

mcp__chrome-devtools__fill

mcp__chrome-devtools__hover

mcp__chrome-devtools__evaluate_script

mcp__chrome-devtools__wait_for

mcp__chrome-devtools__list_pages

mcp__chrome-devtools__select_page

Worker Spawn Template

Coordinator spawns workers using this template:

spawn_agent({
  agent_type: "team_worker",
  task_name: "<task-id>",
  fork_turns: "none",
  message: `## Role Assignment
role: <role>
role_spec: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
requirement: <task-description>
inner_loop: <true|false>

Read role_spec file (<skill_root>/roles/<role>/role.md) to load Phase 2-4 domain instructions.

## Task Context
task_id: <task-id>
title: <task-title>
description: <task-description>
pipeline_phase: <pipeline-phase>

## Upstream Context
<prev_context>`
})

After spawning, use

wait_agent({ timeout_ms: 1800000 })

result.timed_out

close_agent({ target })

Model Selection Guide

Debug workflows require tool-heavy interaction (Chrome DevTools MCP). Reasoning effort varies by role.

User Commands

check

status

resume

continue

revise <TASK-ID> [feedback]

feedback <text>

retry <TASK-ID>

v4 Agent Coordination

Message Semantics

send_message

followup_task

list_agents

Agent Health Check

Use

list_agents({})

// Reconcile session state with actual running agents
const running = list_agents({})
// Compare with team-session.json active tasks
// Reset orphaned tasks (in_progress but agent gone) to pending

Named Agent Targeting

Workers are spawned with

task_name: "<task-id>"

• send_message({ target: "ANALYZE-001", message: "..." })

  -- send evidence from reproducer to analyzer

• followup_task({ target: "FIX-001", message: "..." })

  -- assign fix based on analysis results

• close_agent({ target: "VERIFY-001" })

  -- cleanup after verification

Iterative Debug Loop Pattern

When verifier reports a fix did not resolve the issue, coordinator uses

followup_task

// Verifier reports failure -> coordinator dispatches re-fix
followup_task({
  target: "FIX-001",   // reuse existing fixer if inner_loop, or spawn new
  message: `## Re-fix Assignment
verification_result: FAIL
failure_evidence: <verifier's screenshot/console evidence>
previous_fix_summary: <what was tried>
instruction: Analyze verification failure and apply corrected fix.`
})

This pattern enables iterative debug rounds: FIX -> VERIFY -> re-FIX -> re-VERIFY (max 3 rounds).

Completion Action

When pipeline completes, coordinator presents:

functions.request_user_input({
  questions: [{
    question: "Pipeline complete. What would you like to do?",
    header: "Completion",
    multiSelect: false,
    options: [
      { label: "Archive & Clean (Recommended)", description: "Archive session, clean up" },
      { 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-<date>-<slug>/
├── 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