skills.rest
catlog22
catlog22COMMUNITY
Explore all skills by this author →
GitHub

team-frontend-debug

Reproduce frontend bugs and collect browser evidence via Chrome DevTools MCP.

76|5|Updated Jul 7, 2026
Search Tags:#debugging#frontend#root cause analysis#verification#multi-agent#chrome devtools#bug reproduction
One-click install
npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-frontend-debug-catlog22
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: team-frontend-debug
Source: https://github.com/catlog22/pi-maestro-flow/tree/main/.pi/skills/team-frontend-debug
Command: npx skills add https://github.com/catlog22/pi-maestro-flow --skill team-frontend-debug-catlog22

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you debug frontend issues end to end by turning a bug report or feature checklist into a structured team workflow that can reproduce problems, investigate evidence, apply fixes, and verify results.

Core Features & Use Cases

  • Bug reproduction: Re-run reported issues in the browser and collect screenshots, console logs, DOM snapshots, and network evidence.
  • Root-cause analysis: Correlate UI, console, network, and performance signals to identify the likely source file and line.
  • Code fixing and verification: Apply minimal fixes, validate syntax, and re-test the same steps to confirm the bug is resolved.
  • Use case: A developer reports a login failure or blank screen, and this Skill coordinates evidence collection, diagnosis, patching, and regression verification in one workflow.

Quick Start

Ask this skill to debug a frontend bug by giving the app URL, the observed problem, and the exact steps to reproduce it.

Frequently Asked Questions about team-frontend-debug

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug a frontend bug from a bug report and verify the fix?▼

To debug a frontend bug, you reproduce the reported issue in the browser to collect screenshots, console logs, and network evidence. You then correlate these signals for root-cause analysis, apply code fixes, and re-test the same steps to verify the bug is resolved.

How do I reproduce a frontend bug and collect browser evidence for root cause analysis?▼

You reproduce a frontend bug by re-running the reported issue in a Chrome-based web app. During reproduction, the workflow collects browser evidence including screenshots, DOM snapshots, console logs, and network data to support root cause analysis.

Does frontend debugging work with Chrome DevTools for network failures and performance problems?▼

Yes, frontend debugging works with Chrome DevTools for network failures and performance problems. The workflow applies multi-agent task orchestration to collect UI, console, network, and performance signals for diagnosing issues in Chrome-based web applications.

What's the best way to diagnose a blank screen or login failure in a web app?▼

The best way to diagnose a blank screen or login failure is using a structured workflow that coordinates evidence collection, diagnosis, and patching. It collects browser evidence, correlates UI and network signals to identify the source file, and applies a minimal fix.

How do I verify a frontend code fix and prevent regressions after patching?▼

You verify a frontend code fix by applying minimal patches, validating syntax, and re-testing the exact reproduction steps. This structured regression verification confirms the observed problem is resolved and prevents the bug from reoccurring.

Related Skills

Explore More Software Engineering Skills→
henkisdabrohenkisdabro
77

devtools

Automate Chrome remote debugging setup and launch via chrome-devtools-mcp.

Community
Advanced
akiyoshiakiyoshi

qa

Automate end-to-end testing and generate structured QA reports with health scores.

Community
Advanced
getsentrygetsentry
246

sentry-debug-issue

Identify, analyze, and resolve Sentry issues with structured debugging workflows.

Official
Advanced
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced