skills.rest
JuanGarciaFuture
JuanGarciaFutureCOMMUNITY
Explore all skills by this author →
GitHub

frontend-bug-hunt-playbook

Diagnose frontend interaction bugs with hypothesis testing and regression tests.

Updated Aug 23, 2026
Search Tags:#frontend#react#nextjs#bug-hunt#hypotheses#manual-testing#ui-debugging
One-click install
npx skills add https://github.com/JuanGarciaFuture/mobile-practice --skill frontend-bug-hunt-playbook
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: frontend-bug-hunt-playbook
Source: https://github.com/JuanGarciaFuture/mobile-practice/tree/main/.cursor/skills/frontend-bug-hunt-playbook
Command: npx skills add https://github.com/JuanGarciaFuture/mobile-practice --skill frontend-bug-hunt-playbook

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Frontend Bug Hunt Playbook provides a disciplined, hypothesis-driven workflow to diagnose and resolve hard-to-reproduce UI bugs without jumping to partial fixes.

Core Features & Use Cases

  • Rank and test 3-5 hypotheses to isolate root causes for interaction bugs.
  • Run targeted experiments and verify outcomes with minimal, auditable changes.
  • Enforce a mandatory root-cause validation and a manual browser pass before concluding.
  • Provide a clear patch summary, regression tests, and risk assessment for handoffs.

Quick Start

Follow the checklist to reproduce the bug, rank hypotheses, run targeted experiments, implement a minimal fix, add tests, and perform a manual browser pass.

Frequently Asked Questions about frontend-bug-hunt-playbook

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

FAQPage Schema
How do I debug stubborn frontend interaction bugs without jumping to partial fixes?▼

To debug frontend bugs systematically, rank 3-5 hypotheses for the interaction issue, run targeted experiments to isolate the root cause, and validate the fix with regression tests before completing a manual browser pass.

What is a hypothesis-driven approach to diagnosing UI rendering issues?▼

A hypothesis-driven approach to diagnosing UI rendering issues captures 3-5 ranked hypotheses, runs targeted experiments to test them, and enforces mandatory root-cause validation to ensure the fix addresses the actual source.

How do I fix scroll or touch bugs in a React or Next.js application?▼

Fix scroll and touch bugs in React or Next.js by following a reproducible workflow: rank hypotheses, run targeted experiments across devices, validate the root cause, implement a minimal patch, and verify with a manual browser pass.

Does this frontend debugging workflow require automated testing or manual browser validation?▼

This workflow requires both: it mandates a manual browser pass to verify the interaction fix visually, and it requires regression tests to provide proof of fix and prevent future recurrence of the bug.

What's the best way to document a frontend bug fix for team handoffs?▼

Document a frontend bug fix for handoffs by generating a structured summary that captures the ranked hypotheses, experiments, isolated root cause, patch details, and proof of fix with regression tests and risk assessment.

Related Skills

Explore More Software Engineering Skills→
dallaydallay

webapp-testing

Automate Playwright browser testing and debugging for local web applications.

Official
Intermediate
aist-ai-sastaist-ai-sast

mcp-regression-fix

Diagnose MCP regression failures and implement durable fixes across test suites.

Official
Advanced
mynameistitomynameistito

next-browser

Inspect React component trees and Next.js dev server diagnostics.

Community
Advanced
CleanExpoCleanExpo
1

playwright-browser

Automate headless browser tasks and end-to-end tests with Playwright.

Community
Advanced