skills.rest
alvis
alvisCOMMUNITY
Explore all skills by this author →
Website𝕏@alvishttangGitHub

next

Diagnose Next.js runtime behavior using Chrome DevTools MCP and the next-browser CLI.

4|1|Updated Jul 31, 2025
Search Tags:#performance#debugging#react#next.js#chrome devtools#ssr#browser diagnosis
One-click install
npx skills add https://github.com/alvis/.agents --skill next-alvis
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next
Source: https://github.com/alvis/.agents/tree/main/plugins/web/skills/next
Command: npx skills add https://github.com/alvis/.agents --skill next-alvis

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve? Debugging Next.js applications requires correlating React component state, SSR behavior, network activity, and browser rendering, which is slow and error-prone when done manually across disconnected tools. ## Core Features & Use Cases - Dual-tool browser diagnosis: Combines Chrome DevTools MCP (DOM, performance traces, Lighthouse, network, device emulation, JS breakpoints) with the next-browser CLI (React component trees, Next.js error overlay parsing, routes, server actions, SSR lock/unlock) over a shared CDP session. - Category-based tool routing: A routing table maps 14 diagnostic categories to primary and fallback tools, with multi-step recipes for slow pages, broken component renders, mobile layout issues, failed API calls, and SSR inspection. - Evidence-backed reporting: Every diagnostic claim must cite tool evidence such as traces, snapshots, logs, requests, or screenshots, and UI-modifying work routes through the design and audit skills. - Use Case: A page renders blank after hydration. The skill opens the page in Chrome DevTools, inspects the React tree with next-browser, parses the Next.js error overlay, compares SSR and hydrated snapshots, and reports the failing component with file paths and proposed fixes. ## Quick Start Debug why the /dashboard route in my Next.js app renders a blank page after hydration and report the failing component with evidence.

Frequently Asked Questions about next

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

FAQPage Schema
How do I debug a Next.js app in the browser with an AI agent?▼

Start the Next.js dev server, open the target URL with Chrome DevTools navigate_page, then connect next-browser over the CDP port. The skill routes each diagnostic category to the appropriate tool and reports findings with cited evidence.

How do I inspect React component props and state in Next.js?▼

Use next-browser tree to list the React component tree and next-browser tree <id> to inspect a specific component's props and state. This capability is exclusive to next-browser; Chrome DevTools has no equivalent.

Chrome DevTools MCP vs next-browser for Next.js debugging?▼

Chrome DevTools handles DOM, performance traces, Lighthouse, network, device emulation, storage, and JS breakpoints. next-browser exclusively covers React trees, Next.js error overlay parsing, routes, server actions, and SSR lock/unlock. The skill uses both over one shared session.

How do I detect SSR hydration mismatches in Next.js?▼

Lock SSR with next-browser ssr lock, capture an accessibility snapshot, unlock with ssr unlock to allow hydration, then capture a second snapshot. Comparing the two snapshots reveals hydration mismatches between server-rendered and client-rendered output.

What prerequisites are required for Next.js browser debugging?▼

You need a Next.js project with a running or startable dev server (npm run dev), Chrome DevTools MCP configured through the plugin's .mcp.json, and the next-browser CLI installed globally or available via npx.

When should I not use this Next.js debugging skill?▼

Do not use it for creating or iterating UI visuals, which belongs to the design skill, independent design QA, which belongs to the audit skill, or Storybook story audits, which belong to the storybook skill. It owns runtime diagnosis only.

Related Skills

Explore More Software Engineering Skills→
hgflimahgflima
1

browser-testing-with-devtools

Automate browser testing with Chrome DevTools MCP for DOM inspection and console analysis.

Community
Advanced
codebytescodebytes

architectural-proposals

Write structured architectural proposals with problem statements, decisions, risks, and scope definitions.

Community
Intermediate
ferdiangunawanferdiangunawan
6

audit-performance

Detect and categorize P0, P1, and P2 performance issues in code.

Community
Advanced
VilnaCRM-OrgVilnaCRM-Org
1

storybook-story-authoring

Writes and validates Storybook stories for React components across three repository shapes.

Official
Intermediate