skills.rest
Nikhil-Chopra-7
Nikhil-Chopra-7COMMUNITY
Explore all skills by this author →
GitHub

bug-resolver

Diagnose frontend bugs in the browser and trace them to the codebase.

1|Updated Apr 25, 2026
Search Tags:#debugging#frontend#qa#diagnose#orchestrator#chrome-devtools
One-click install
npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill bug-resolver
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: bug-resolver
Source: https://github.com/Nikhil-Chopra-7/claude-frontend-skills/tree/main/bug-resolver
Command: npx skills add https://github.com/Nikhil-Chopra-7/claude-frontend-skills --skill bug-resolver

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Orchestrator skill for diagnosing and fixing frontend bugs. Uses Chrome DevTools MCP to inspect the live page — console errors, failed network requests, DOM state, visual glitches — then traces the root cause to code, fixes it, and verifies the fix via DevTools. Manages a bug state file for complex bugs. Routes to appropriate QA skills for regression verification after fix. Use this skill when the user reports a runtime bug with a URL, shares an error screenshot, pastes a console error, says "this is broken," "why isn't this working," "debug this page," or shares a bug ticket. Also trigger when the user shares a screenshot of a broken page. The key difference from feature-updater's bug fix path: this skill starts in the BROWSER to diagnose, then moves to CODE to fix.

Core Features & Use Cases

  • Browser-first diagnosis and evidence collection (console, network, DOM)
  • Bug state file management and routing to QA regression verification
  • Guided hand-off to code repair steps via subskills like code-reviewer and testing-strategy

Quick Start

Reproduce the bug in the browser and capture console, network, and DOM evidence for verification.

Frequently Asked Questions about bug-resolver

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

FAQPage Schema
How do I diagnose a frontend bug from a console error or broken page?▼

To diagnose a frontend bug, reproduce the issue in the browser to capture console errors, network failures, and DOM state, then trace that evidence back to the codebase to apply the fix.

What is the best way to debug a live web page using Chrome DevTools?▼

Debugging a live web page with Chrome DevTools involves inspecting runtime console errors, failed network requests, and DOM state to find visual glitches, then applying code fixes and verifying them directly in the browser.

Can I trace a runtime visual glitch to its root cause in my source code?▼

Yes, you can trace a runtime visual glitch to its root cause by using an orchestrator workflow that connects browser-based inspection of the live page with codebase analysis and repair steps.

How do you verify a frontend fix and prevent regressions?▼

Verify a frontend fix and prevent regressions by routing the completed code repair to QA skills for regression testing, ensuring the runtime issue is resolved without introducing new defects.

Does fixing a broken page require starting diagnosis in the browser or the code?▼

Fixing a broken page requires a browser-first diagnosis approach that collects runtime evidence like console and network errors before moving to the code to implement and verify the fix.

Related Skills

Explore More Software Engineering Skills→
Monjyu1101Monjyu1101
1

dogfood

Identify and document web application issues through guided exploratory QA testing.

Community
Advanced
FiventsFivents

systematic-debugging

Identify and fix bug root causes with a four-step debugging workflow.

Official
Intermediate
89jobrien89jobrien
4

tdd-pytest

Automate pytest test-driven development with Red-Green-Refactor and coverage reporting.

Community
Advanced
j-cogburnj-cogburn

browser-testing-with-devtools

Inspect live DOM, console, network, and performance data from Chrome DevTools.

Community
Intermediate