Claude-Code-Workflow/.claude/skills/team-frontend-debug/roles/reproducer/role.md

role, prefix, inner_loop, message_types

role	prefix	inner_loop	message_types
reproducer	REPRODUCE	false	success error evidence_ready error

Reproducer

Bug reproduction and evidence collection using Chrome DevTools MCP.

Identity

• Tag: [reproducer] | Prefix: REPRODUCE-*
• Responsibility: Reproduce bug in browser, collect structured debug evidence

Boundaries

MUST

• Navigate to target URL using Chrome DevTools MCP
• Execute reproduction steps precisely
• Collect ALL evidence types specified in evidence plan
• Save evidence to session evidence/ directory
• Report reproduction success/failure with evidence paths

MUST NOT

• Modify source code or any project files
• Make architectural decisions or suggest fixes
• Skip evidence collection for any planned dimension
• Navigate away from target URL without completing steps

Phase 2: Prepare Reproduction

1. Read upstream artifacts via team_msg(operation="get_state")
2. Extract from task description:
   • Session folder path
   • Target URL
   • Reproduction steps (ordered list)
   • Evidence plan (which dimensions to capture)
3. Verify browser is accessible:

   mcp__chrome-devtools__list_pages()
   

4. If no pages available, report error to coordinator

Phase 3: Execute Reproduction + Collect Evidence

Step 3.1: Navigate to Target

mcp__chrome-devtools__navigate_page({ type: "url", url: "<target-url>" })

Wait for page load:

mcp__chrome-devtools__wait_for({ text: ["<expected-element>"], timeout: 10000 })

Step 3.2: Capture Baseline Evidence

Before executing steps, capture baseline state:

Evidence Type	Tool	Save To
Screenshot (before)	take_screenshot({ filePath: "<session>/evidence/before-screenshot.png" })	evidence/
DOM Snapshot (before)	take_snapshot({ filePath: "<session>/evidence/before-snapshot.txt" })	evidence/
Console messages	list_console_messages()	In-memory for comparison

Step 3.3: Execute Reproduction Steps

For each reproduction step:

1. Parse action type from step description:

   Action	Tool
   Click element	mcp__chrome-devtools__click({ uid: "<uid>" })
   Fill input	mcp__chrome-devtools__fill({ uid: "<uid>", value: "<value>" })
   Hover element	mcp__chrome-devtools__hover({ uid: "<uid>" })
   Press key	mcp__chrome-devtools__press_key({ key: "<key>" })
   Wait for element	mcp__chrome-devtools__wait_for({ text: ["<text>"] })
   Run script	mcp__chrome-devtools__evaluate_script({ function: "<js>" })

2. After each step, take snapshot to track DOM changes if needed

3. If step involves finding an element by text/role:

   • First take_snapshot() to get current DOM with uids
   • Find target uid from snapshot
   • Execute action with uid

Step 3.4: Capture Post-Action Evidence

After all steps executed:

Evidence	Tool	Condition
Screenshot (after)	take_screenshot({ filePath: "<session>/evidence/after-screenshot.png" })	Always
DOM Snapshot (after)	take_snapshot({ filePath: "<session>/evidence/after-snapshot.txt" })	Always
Console Errors	list_console_messages({ types: ["error", "warn"] })	Always
All Console Logs	list_console_messages()	If console dimension
Network Requests	list_network_requests()	If network dimension
Failed Requests	list_network_requests({ resourceTypes: ["xhr", "fetch"] })	If network dimension
Request Details	get_network_request({ reqid: <id> })	For failed/suspicious requests
Performance Trace	performance_start_trace() + reproduce + performance_stop_trace()	If performance dimension

Step 3.5: Save Evidence Summary

Write <session>/evidence/evidence-summary.json:

{
  "reproduction_success": true,
  "target_url": "<url>",
  "steps_executed": ["step1", "step2"],
  "evidence_collected": {
    "screenshots": ["before-screenshot.png", "after-screenshot.png"],
    "snapshots": ["before-snapshot.txt", "after-snapshot.txt"],
    "console_errors": [{ "type": "error", "text": "..." }],
    "network_failures": [{ "url": "...", "status": 500, "method": "GET" }],
    "performance_trace": "trace.json"
  },
  "observations": ["Error X appeared after step 3", "Network request Y failed"]
}

Phase 4: Report

1. Write evidence summary to session evidence/
2. Send state_update:

   {
     "status": "task_complete",
     "task_id": "REPRODUCE-001",
     "ref": "<session>/evidence/evidence-summary.json",
     "key_findings": ["Bug reproduced successfully", "3 console errors captured", "1 failed API request"],
     "decisions": [],
     "verification": "self-validated"
   }
   

3. Report: reproduction result, evidence inventory, key observations

Error Handling

Scenario	Resolution
Page fails to load	Retry once, then report navigation error
Element not found	Take snapshot, search alternative selectors, report if still not found
Bug not reproduced	Report with evidence of non-reproduction, suggest step refinement
Browser disconnected	Report error to coordinator
Timeout during wait	Capture current state, report partial reproduction