skills.rest
mynameistito
mynameistitoCOMMUNITY
Explore all skills by this author →
Website𝕏@mynameistitoGitHub

next-browser

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

Updated Feb 12, 2026
Search Tags:#debugging#react#next.js#devtools#ai-agents#ppr#component-tree
One-click install
npx skills add https://github.com/mynameistito/opencode-config --skill next-browser-mynameistito
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-browser
Source: https://github.com/mynameistito/opencode-config/tree/main/skills/next-browser
Command: npx skills add https://github.com/mynameistito/opencode-config --skill next-browser-mynameistito

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

AI agents lack the ability to read visual debugging interfaces like React DevTools or the Next.js dev overlay, yet they need detailed component trees, props, hooks, PPR shell states, build errors, and network traffic to effectively debug Next.js applications. This Skill converts every interactive panel a developer would click through into structured text output that an LLM can parse, reason about, and act upon in a loop.

Core Features & Use Cases

  • React Component Tree Inspection: Retrieve the full component hierarchy using the tree command, then drill into any node to see props, hooks, state, and source-mapped file locations.
  • PPR Shell Analysis: Use ppr lock and ppr unlock to freeze and analyze Partial Prerendering shells, identifying which Suspense boundaries create dynamic holes and what blocks them.
  • Error and Network Diagnostics: View build errors, runtime exceptions, dev server logs, and full network request details including headers and response bodies.
  • Visual and Runtime Inspection: Capture screenshots, control viewport size, evaluate JavaScript in page context, and read the Next.js error overlay from shadow DOM.

Quick Start

Use the next-browser skill to open your Next.js dev server and inspect the React component tree to find rendering bottlenecks.

Frequently Asked Questions about next-browser

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

FAQPage Schema
How do I inspect the React component tree in a Next.js application using an AI agent?▼

You can inspect the React component tree by running the tree command to retrieve the full hierarchy, then drill into any node to view props, hooks, state, and source-mapped file locations.

Can I analyze Partial Prerendering (PPR) shells and Suspense boundaries in Next.js programmatically?▼

Yes, you can analyze PPR shells by using ppr lock and ppr unlock commands to freeze and identify which Suspense boundaries create dynamic holes and what blocks them.

How do I capture Next.js build errors, runtime exceptions, and network traffic for automated debugging?▼

You can capture Next.js build errors, runtime exceptions, dev server logs, and full network request details including headers and response bodies by converting interactive dev panels into structured text output.

Does next-browser require Playwright and a Chromium browser to debug Next.js applications?▼

Yes, next-browser requires Playwright, a Chromium browser with React DevTools hook injection, and access to the Next.js dev server MCP endpoints to function properly.

Can I evaluate JavaScript in page context and capture screenshots of my Next.js app during debugging?▼

Yes, you can evaluate JavaScript directly in the page context, capture screenshots, control viewport size, and read the Next.js error overlay from shadow DOM during debugging workflows.

Related Skills

Explore More Software Engineering Skills→
mrgooniemrgoonie
2.2k

cloudflare-browser-rendering

Automate headless browsers via Cloudflare's Browser Rendering API for screenshots and PDFs.

Community
Advanced
aegnticaegntic
11

performance-analysis

Detect and resolve performance bottlenecks in Claude Flow swarms.

Community
Advanced
aurorascharffaurorascharff
1

next-browser

Inspect Next.js component trees, props, hooks, and network traces via CLI.

Community
Advanced
hasanjafrihasanjafri

next-browser

Inspect and control a Next.js dev server via React DevTools-like data.

Community
Advanced