skills.rest
Aradotso
AradotsoOFFICIAL
Explore all skills by this author →
Website𝕏@aradotsoGitHub

next-devtools-mcp-skill

Diagnose Next.js 16+ runtime errors and routes via DevTools.

4|Updated May 16, 2026
Search Tags:#debugging#next.js#mcp#playwright#documentation search#runtime diagnostics#upgrade to nextjs 16
One-click install
npx skills add https://github.com/Aradotso/devtools-skills --skill next-devtools-mcp-skill
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-devtools-mcp-skill
Source: https://github.com/Aradotso/devtools-skills/tree/main/skills/next-devtools-mcp-skill
Command: npx skills add https://github.com/Aradotso/devtools-skills --skill next-devtools-mcp-skill

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you diagnose and fix issues in Next.js applications faster by combining runtime diagnostics, documentation search, and targeted browser verification in one agent workflow.

Core Features & Use Cases

  • Runtime diagnostics for Next.js 16+: Identify errors, routes, logs, configuration, and environment-related issues from a running dev server.
  • Documentation-first guidance: Search and fetch relevant official Next.js documentation to implement fixes correctly and avoid guessing.
  • Browser automation for verification: Use Playwright-driven flows to validate pages visually and catch runtime or UI problems after changes.
  • Upgrade and migration workflows: Use guided prompts to upgrade to Next.js 16 and enable Cache Components with safer, testable steps.

Quick Start

Ask your agent: “Use the init tool to set up Next.js DevTools context, then check nextjs://errors and summarize the root cause.”

Frequently Asked Questions about next-devtools-mcp-skill

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

FAQPage Schema
How do I debug a blank page in a Next.js application?▼

Next.js runtime diagnostics identify errors, routes, and logs from a running dev server to pinpoint the root cause of a blank page. It pairs runtime state extraction with official documentation search to guide the correct fix.

What is the best way to upgrade to Next.js 16 and enable Cache Components?▼

The best way to upgrade to Next.js 16 and enable Cache Components is using guided migration workflows with safer, testable steps. It verifies fixes by validating pages visually using Playwright-driven browser automation flows.

Can I use Playwright to verify Next.js runtime fixes?▼

Yes, you can use Playwright to verify Next.js runtime fixes through browser automation. It executes targeted browser_eval flows to validate pages visually and catch runtime or UI problems after applying changes.

How do I search official Next.js documentation while debugging?▼

You can search official Next.js documentation while debugging by using documentation-first guidance tools. It fetches relevant official docs directly within the agent workflow to implement fixes correctly and avoid guessing.

Does this Next.js debugging workflow require a specific version?▼

Yes, this Next.js debugging workflow applies to Next.js 16+ development tasks. It initializes the Next.js DevTools context to diagnose errors, verify route structure, and resolve upgrade or migration issues.

Related Skills

Explore More Software Engineering Skills→
mynameistitomynameistito

next-browser

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

Community
Advanced
LanternOpsLanternOps
73

feature-testing

Automates UI, API, and agent feature verification using Playwright MCP and diagnostic logs.

Official
Advanced
302ai302ai
2

librarian

Fetch official documentation and API references for libraries and frameworks.

Official
Advanced
intersystems-communityintersystems-community
27

objectscript-debugging

Diagnose IRIS runtime and compile errors using diagnostic packets and source mapping.

Official
Advanced