next-browser

Inspect React component trees and profile Next.js performance via CLI commands.

Updated Aug 23, 2026

Search Tags:#performance #debugging #react #cli #devtools #nextjs #ppr

Ready to run

npx skills add https://github.com/re-sohail/e-commerce --skill next-browser

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-browser
Source: https://github.com/re-sohail/e-commerce/tree/main/.agents/skills/next-browser
Command: npx skills add https://github.com/re-sohail/e-commerce --skill next-browser

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill bridges the gap for AI agents unable to visually interact with browser DevTools, providing structured CLI commands to inspect React components, analyze Next.js performance, and debug PPR shells just like a human developer.

Core Features & Use Cases

Component Inspection: Traverse React trees, inspect props/hooks/state, and source-map locations via tree and tree <id> commands.
Performance & PPR Analysis: Profile loads with perf, lock/unlock PPR shells for static/dynamic hole detection, and track re-renders.
Use Case: Debugging a slow dashboard—open the page, run renders start, interact to reproduce lag, then renders stop to identify wasteful re-renders, followed by code fixes.

Quick Start

Invoke the next-browser skill to launch a browser at your local Next.js dev server URL and generate a full React component tree snapshot.

Frequently Asked Questions about next-browser

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

FAQPage Schema

How do I inspect React component state and props using an AI agent?▼

AI agents inspect React component state and props using CLI commands like `tree` and `tree <id>` to traverse the React tree and retrieve structured text output without visual DevTools.

How do I profile Next.js performance and debug slow dashboard loads?▼

Profile Next.js performance and debug slow dashboard loads by running the `perf` command to analyze page loads, and use `renders start` and `renders stop` to identify wasteful re-renders during interaction.

Can I debug Next.js PPR shells for static and dynamic holes?▼

You can debug Next.js PPR shells by locking and unlocking PPR shells through CLI commands to detect static and dynamic holes within your React and Next.js applications.

Does React DevTools inspection require a visual browser to work?▼

React DevTools inspection does not require a visual browser; it uses Playwright Chromium with a pre-loaded DevTools extension to maintain a persistent browser session for repeated CLI inspections.

What is the best way to track React re-renders in a local dev server?▼

The best way to track React re-renders in a local dev server is to launch a persistent browser session at your local URL, run `renders start`, interact to reproduce lag, then run `renders stop` to identify wasteful re-renders.