skills.rest
SkinnnyJay
SkinnnyJayCOMMUNITY
Explore all skills by this author →
𝕏@gravyskyyGitHub

debug-browser

Diagnoses React and Next.js frontend issues using Playwright and Puppeteer browser automation.

2|Updated Feb 15, 2026
Search Tags:#React#frontend#Next.js#Playwright#puppeteer#console errors#browser debugging
One-click install
npx skills add https://github.com/SkinnnyJay/simpill-utils --skill debug-browser-skinnnyjay
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: debug-browser
Source: https://github.com/SkinnnyJay/simpill-utils/tree/main/.claude/skills/debug-browser
Command: npx skills add https://github.com/SkinnnyJay/simpill-utils --skill debug-browser-skinnnyjay

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Frontend bugs in React/Next.js apps are hard to reproduce and diagnose without seeing the actual browser behavior, console errors, and network traffic. This Skill automates live browser investigation so you get evidence-backed root causes instead of guesswork. ## Core Features & Use Cases - Automated Reproduction: Navigates to problem pages, clicks elements, fills forms, and captures screenshots at each step via Playwright MCP. - Console & Network Analysis: Captures console errors, failed API requests, CORS issues, and WebSocket problems through Chrome DevTools Protocol. - React/Next.js Specific Diagnosis: Investigates hydration mismatches, server component errors, client boundary issues, and useEffect bugs. - Use Case: A user reports that login is broken. The Skill navigates to the signin page, enters test credentials, clicks login, captures console errors and the failed API response, then reports the root cause with a suggested code fix. ## Quick Start Debug why the login flow on localhost:3001 is failing and report the root cause with screenshots and console errors.

Frequently Asked Questions about debug-browser

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

FAQPage Schema
How do I debug a React app with Playwright?▼

Use Playwright MCP tools to navigate to the page, take screenshots, and run playwright_evaluate to capture console errors. Then reproduce the failing user flow by clicking elements and filling forms while documenting where it breaks.

How to find the root cause of a failing login flow in Next.js?▼

Navigate to the signin page, enter test credentials, click login, and capture screenshots at each step. Check the network tab for failed API responses, verify authentication tokens, and inspect console errors for React exceptions.

Playwright vs Puppeteer for browser debugging?▼

Playwright MCP handles navigation, screenshots, clicks, and form filling, while Puppeteer MCP provides Chrome DevTools Protocol access for console capture, network monitoring, and performance profiling. This Skill uses both together.

Can this debug hydration errors in Next.js?▼

Yes, the workflow includes React/Next.js specific checks for hydration mismatches, server component errors, client component boundary issues, useEffect problems, and state management bugs found via console analysis.

Why does browser debugging fail to connect to localhost?▼

The dev server must be running on localhost:3001 or localhost:3000 before navigation. Verify the server is up and the correct port is used, otherwise playwright_navigate will fail to load the page.

Related Skills

Explore More Software Engineering Skills→
crbnoscrbnos
2.4k

smoke-test

Verifies core Carbon ERP modules render without errors after login.

Official
Intermediate
LonelyHerbivoreLonelyHerbivore
92

trellis-check

Verify code changes against Trellis task artifacts and spec guidelines.

Community
Advanced
sjinkssjinks

security-review-owasp-cookie-theft-mitigation

Detect cookie theft mitigation weaknesses in browser-facing applications.

Community
Advanced
Solace-StephaneSolace-Stephane

e2e-testing-patterns

Provide patterns for reliable end-to-end testing with Playwright and Cypress.

Community
Advanced