diagnose-bugs

Diagnose bugs in shipped Next.js and React apps with reproduce-first, red-then-green verification loops.

1|Updated Jul 13, 2026
One-click install
npx skills add https://github.com/dineshrevunuru/SuperSkills --skill diagnose-bugs-dineshrevunuru
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: diagnose-bugs
Source: https://github.com/dineshrevunuru/SuperSkills/tree/main/diagnose-bugs
Command: npx skills add https://github.com/dineshrevunuru/SuperSkills --skill diagnose-bugs-dineshrevunuru

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve? Debugging shipped applications often devolves into reading code, forming a confident theory, and shipping an unverified fix. This Skill enforces a reproduce-before-you-theorize discipline: build a signal that goes red on the exact bug first, then prove the fix by watching it flip red-to-green and back. ## Core Features & Use Cases - Mode-switched debugging loops: Screenshot-first fast path for CSS/layout/interaction bugs, a full instrumented six-phase loop for state/data/async bugs, and a measure-first branch for performance regressions. - Structured hypothesis control: Generates 3-5 ranked, falsifiable hypotheses before testing any, countering anchoring and confirmation bias. - Flake-rate reproduction: Playwright loops that run intermittent bugs dozens of times to raise reproduction rates, plus a human-in-the-loop bash template for steps only a person can perform. - Use Case: A booking app intermittently confirms the wrong time slot. The Skill drives a Playwright loop 50 times to establish a 30% flake rate, minimizes the repro to a fast double-tap, proves a stale-closure root cause, and locks it with a regression test. ## Quick Start Ask the agent to diagnose why the confirmation screen intermittently shows the wrong time in your shipped Next.js app, starting by building a failing reproduction before proposing any fix.

Frequently Asked Questions about diagnose-bugs

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

FAQPage Schema
How do I debug an intermittent bug in a React app?

Build an automated loop that reproduces the intermittent bug at a measurable flake rate, such as a Playwright script run 50-100 times that asserts the exact symptom. Raise the reproduction rate with parallel runs or injected delays until the bug is debuggable, then minimize and instrument.

How to reproduce a bug before fixing it in Next.js?

Create one command that goes red on the exact symptom: a failing test at the right seam, a curl script against the API route, or a Playwright assertion on DOM and network. Run it once before forming any theory, then tighten it to be fast, sharp, and deterministic.

Should I use screenshots or tests to debug a visual bug?

Use screenshots for deterministic CSS, layout, and interaction bugs since they iterate in seconds. If the visual symptom is intermittent, escalate to an instrumented test loop because passing screenshot runs can quietly validate a wrong theory about an underlying async cause.

Why does my bug fix not prove the root cause?

A fix only proves root cause when the signal flips red-to-green after the fix and returns to red when the fix is reverted. Declaring a cause from a plausible code read without this two-directional proof is assertion, not evidence.

When should I not use a full debugging process?

Skip rigorous debugging for throwaway prototypes, where a bug is the prototype answering its question and the right move is deletion, not regression tests. Also skip the full instrumented loop for always-visible visual bugs, where a screenshot comparison is the faster red-capable signal.