skills.rest
david-nossebro
david-nossebroCOMMUNITY
Explore all skills by this author →
GitHub

debug-and-fix

Reproduce web app failures and fix bugs with Playwright regression tests.

Updated May 3, 2026
Search Tags:#tdd#debugging#root cause analysis#regression testing#playwright#web application#browser verification
One-click install
npx skills add https://github.com/david-nossebro/agent-commons --skill debug-and-fix-david-nossebro
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-and-fix
Source: https://github.com/david-nossebro/agent-commons/tree/main/shared/skills/debug-and-fix
Command: npx skills add https://github.com/david-nossebro/agent-commons --skill debug-and-fix-david-nossebro

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Debug-and-fix helps you stop guessing when a web application behaves incorrectly by turning a real, reproducible failure into a verified TDD-style fix.

Core Features & Use Cases

  • Browser-first reproduction: Recreates the bug in a running app and captures evidence from the actual user path.
  • Playwright-driven diagnosis: Uses Playwright CLI to inspect console errors, network failures, DOM state, and related runtime signals.
  • Regression-test-first bugfixing: Writes a failing regression test before changing code, then verifies with automated tests and a final manual browser check.

Quick Start

Use debug-and-fix to reproduce the issue in your running app, write a failing Playwright regression test, then implement and verify the fix with both tests and a final manual browser check.

Frequently Asked Questions about debug-and-fix

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

FAQPage Schema
How do I debug and fix a web application bug using a TDD workflow?▼

To debug and fix a web app bug with TDD, reproduce the failure in a running app, write a failing regression test before changing code, analyze the root cause, implement the fix, and verify with automated tests and a final manual browser check.

How do I use Playwright to diagnose console errors and network failures in a web app?▼

Use Playwright CLI to inspect console errors, network failures, and DOM state by recreating the bug's user path, capturing runtime signals as evidence to guide your code changes and root cause analysis.

What is the best way to write a regression test before fixing a UI bug?▼

Write a failing regression test before fixing a UI bug by reproducing the issue in your running app, then use that test to verify your code changes alongside a final manual browser check.

Can I use this approach for integration and DOM state issues in web applications?▼

Yes, you can use this approach for integration, DOM state, console, network, and flow issues in web applications by capturing actual runtime evidence from the user path to guide deliberate fixes.

Do I need a running web app to reproduce and diagnose bugs with Playwright?▼

Yes, you need a running web app because browser-first reproduction recreates the bug and uses Playwright CLI to capture evidence from the actual user path to guide code changes.

Related Skills

Explore More Software Engineering Skills→
harperreedharperreed
330

ios-debugger-agent

Build, run, and debug iOS projects on a booted simulator with UI inspection and log capture.

Community
Advanced
eng-vmessiaheng-vmessiah
2

ai-regression-testing

Automate regression tests validating API response shapes and state integrity.

Community
Intermediate
BamoJBamoJ

debug

Diagnose WebGL and Webflow integration issues using browser console debugging.

Community
Advanced
duynhneduynhne

playwright-expert

Automate end-to-end browser testing with Playwright across Chromium, Firefox, and WebKit.

Community
Intermediate