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
Decision gist · record as of 2026-06-18
team-frontend-debug sets up a coordinated team to test features or debug frontend bugs using Chrome DevTools. 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.
Use it when
- team-frontend-debug orchestrates a multi-role team where the coordinator receives your feature list or bug report.
- Yes.
Verify before relying
Read SKILL.md below before installing (12 files). Open directory: indexed for reading, not audited.
Install
catlog22/Claude-Code-Workflow/team-frontend-debug · repository language: TypeScript
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
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
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Set up a coordinated team to test features and debug frontend bugs”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
Math Modeling Skill orchestrates three specialized roles—analyst, programmer, and writer—to guide you from problem interpretation through model development, implementation, and competition-ready documentation. It enforces structured workflows with built-in quality gates and optional peer review at critical stages.
Investigate guides you through structured debugging in five phases, from evidence collection to verified fix. It enforces the Iron Law principle—never fix without a confirmed root cause—using pattern analysis, hypothesis testing with a 3-strike escalation rule, and regression coverage. Output includes a machine-readable debug report with the full evidence chain.
Investigate walks you through structured bug diagnosis, starting with hypothesis generation and moving through code inspection, data flow tracing, and controlled experiments to isolate the root cause. It focuses on finding and explaining problems rather than fixing them, and escalates to diagnostic logging only when code inspection alone cannot pinpoint the issue.
Bug Fix TDD guides you through test-driven bug resolution: write a failing test that reproduces the issue, then apply the minimum fix to make it pass. The skill covers test placement, mock patterns, and the complete red-green-refactor cycle for both standard fixes and fallback code-analysis approaches when reproduction isn't possible.
vc-debug guides you through structured investigation before any fix, combining root cause tracing, defense-in-depth validation, and verification protocols. Handle code bugs, system failures, CI/CD issues, and performance degradation with frameworks for each scenario—from call stack analysis to log inspection to frontend verification.
Issue Management provides a menu-driven interface for tracking and organizing issues through the `ccw issue` CLI. Create, view, edit, delete, and bulk-update issues while filtering by status, priority, or other criteria—with automatic archiving of completed items.
More skills Debugging (unlicensed)