team-frontend-debug
team-frontend-debug orchestrates a multi-role team for frontend quality assurance, routing feature lists to a testing pipeline or bug reports to a debugging pipeline. Both flows leverage Chrome DevTools MCP for browser inspection, DOM analysis, console monitoring, and performance tracing. The coordinator role parses your input, spawns specialized workers (tester, reproducer, analyzer, fixer, verifier), and manages progress across phases.
team-frontend-debug sets up a coordinated team to test features or debug frontend bugs using Chrome DevTools.
AI-generated summary based on this skill's SKILL.md
Install
catlog22/Claude-Code-Workflow/team-frontend-debug · repository language: TypeScript
git clone https://github.com/catlog22/Claude-Code-Workflow
cp -r Claude-Code-Workflow/.claude/skills/team-frontend-debug ~/.claude/skills/team-frontend-debugnpx skillfed install catlog22/Claude-Code-Workflow/team-frontend-debugFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I debug frontend issues with Chrome DevTools using team-frontend-debug?
team-frontend-debug integrates Chrome DevTools MCP to enable collaborative debugging. The skill assigns specialized roles—reproducer, analyzer, and fixer—to your team. Each role uses DevTools for browser inspection, DOM analysis, console monitoring, and performance tracing. The coordinator parses your input and routes it through the appropriate debugging pipeline, ensuring systematic issue investigation and resolution.
What is the team-frontend-debug setup for testing features and finding bugs?
team-frontend-debug orchestrates a multi-role team where the coordinator receives your feature list or bug report, then spawns specialized workers: tester handles feature validation, reproducer captures browser issues with evidence, analyzer diagnoses root causes, fixer generates solutions, and verifier confirms fixes. This structured workflow ensures comprehensive frontend quality assurance across your web app.
Can team-frontend-debug automate feature testing and bug verification workflows?
Yes. team-frontend-debug automates both testing and verification phases. Feature lists flow through the tester role for systematic validation, while bug reports enter the reproducer pipeline for automated evidence capture. The verifier role then confirms fixes work correctly. This end-to-end automation reduces manual effort and ensures consistent quality checks across your frontend.
How does team-frontend-debug reproduce and fix browser bugs?
team-frontend-debug uses a coordinated pipeline: the reproducer role captures browser issues using Chrome DevTools, documenting console errors, network activity, and DOM state. The analyzer role then diagnoses the root cause, and the fixer role generates targeted solutions. Each step leverages DevTools MCP for detailed browser inspection and performance monitoring.
What team roles does team-frontend-debug assign for frontend debugging?
team-frontend-debug assigns five specialized roles: coordinator (parses input and manages workflow), tester (validates features), reproducer (captures browser issues with DevTools), analyzer (diagnoses problems), fixer (generates fixes), and verifier (confirms solutions). This multi-role structure ensures systematic coverage of testing, debugging, and verification phases.
Does team-frontend-debug monitor network, console, and performance during debugging?
Yes. team-frontend-debug leverages Chrome DevTools MCP to monitor network requests, console logs, and performance metrics throughout the debugging workflow. The reproducer and analyzer roles use these insights to capture evidence and diagnose issues. This comprehensive monitoring ensures you have full visibility into browser behavior during feature testing and bug investigation.
SKILL.md
rendered from the published skill — quoted content, verbatim
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 | ┌──────────────────────────┼──────────────────────┐
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 12 files
.claude/skills/team-frontend-debug/SKILL.md
.claude/skills/team-frontend-debug/roles/analyzer/role.md
.claude/skills/team-frontend-debug/roles/coordinator/commands/analyze.md
.claude/skills/team-frontend-debug/roles/coordinator/commands/dispatch.md
.claude/skills/team-frontend-debug/roles/coordinator/commands/monitor.md
.claude/skills/team-frontend-debug/roles/coordinator/role.md
.claude/skills/team-frontend-debug/roles/fixer/role.md
.claude/skills/team-frontend-debug/roles/reproducer/role.md
.claude/skills/team-frontend-debug/roles/tester/role.md
.claude/skills/team-frontend-debug/roles/verifier/role.md
.claude/skills/team-frontend-debug/specs/debug-tools.md
.claude/skills/team-frontend-debug/specs/pipelines.md