next-devtools-mcp-skill

Official

Debug Next.js with DevTools MCP and AI

AuthorAradotso
Version1.0.0
Installs0

System Documentation

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.”

Dependency Matrix

Required Modules

None required

Components

Standard package

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: next-devtools-mcp-skill
Download link: https://github.com/Aradotso/devtools-skills/archive/main.zip#next-devtools-mcp-skill

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 471,000+ vetted skills library on demand.