Claude-Code-Workflow 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".

install

source · Clone the upstream repo

git clone https://github.com/catlog22/Claude-Code-Workflow

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/catlog22/Claude-Code-Workflow "$T" && mkdir -p ~/.claude/skills && cp -r "$T/.claude/skills/team-frontend-debug" ~/.claude/skills/catlog22-claude-code-workflow-team-frontend-debug && rm -rf "$T"

manifest: .claude/skills/team-frontend-debug/SKILL.md

source content

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
```
→
```
@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>, ...)

Workspace Resolution

Coordinator MUST resolve paths at Phase 2 before TeamCreate:

Run
```
Bash({ command: "pwd" })
```
→ capture
```
project_root
```
(absolute path)

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

Store in

team-session.json

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

All worker

role_spec

values MUST use

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

(absolute)

This ensures workers spawned with

run_in_background: true

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.

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: <skill_root>/roles/<role>/role.md
session: <session-folder>
session_id: <session-id>
team_name: <team-name>
requirement: <task-description>
inner_loop: <true|false>

## Progress Milestones
session_id: <session-id>
Report progress via team_msg at natural phase boundaries (context loaded -> core work done -> verification).
Report blockers immediately via team_msg type="blocker".
Report completion via team_msg type="task_complete" after final SendMessage.

Read role_spec file (@<skill_root>/roles/<role>/role.md) 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