skills.rest
salmanparacha
salmanparachaCOMMUNITY
Explore all skills by this author →
GitHub

nextjs-devtools

Debug Next.js applications via MCP by listing routes, components, build info, and config.

Updated Jan 6, 2026
Search Tags:#debugging#routing#components#mcp#devtools#nextjs#build-info
One-click install
npx skills add https://github.com/salmanparacha/speckitplus-calculator --skill nextjs-devtools-salmanparacha
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nextjs-devtools
Source: https://github.com/salmanparacha/speckitplus-calculator/tree/main/.claude/skills-nocontext/nextjs-devtools
Command: npx skills add https://github.com/salmanparacha/speckitplus-calculator --skill nextjs-devtools-salmanparacha

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

Enable debugging of Next.js applications via MCP.

Core Features & Use Cases

  • List app routes with list-routes
  • Inspect React components with list-components
  • Retrieve build information with get-build-info
  • Verify configuration via get-config
  • Use case: Quickly diagnose routing or build issues in a Next.js project

Quick Start

Start the MCP server with the included script and then query the server to list routes and components.

Frequently Asked Questions about nextjs-devtools

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

FAQPage Schema
How do I debug Next.js routing issues in my project?▼

Debug Next.js routing issues by starting the MCP server and using the list-routes tool to inspect app routes, which helps quickly diagnose misconfigured paths in your project.

Can I inspect React components in a Next.js app via MCP?▼

Yes, you can inspect React components in a Next.js app via MCP by running the list-components tool, which retrieves component details to help diagnose build or rendering problems.

What is the best way to retrieve build information for a Next.js application?▼

Retrieve build information for a Next.js application by querying the MCP server with the get-build-info tool, which provides build details to verify compilation outputs and dependencies.

How do I verify next.config.js settings during Next.js debugging?▼

Verify next.config.js settings during Next.js debugging by executing the get-config tool on the MCP server, which reads and returns your current configuration for validation.

Do I need any dependencies to use MCP for Next.js debugging?▼

No dependencies are required to use MCP for Next.js debugging, as the Skill operates using included scripts and implements the initialize/notifications protocol to expose its debugging tools.

Related Skills

Explore More Software Engineering Skills→
rhayalcantararhayalcantara

mcp-troubleshooting

Diagnose MCP server connection failures in Claude Desktop.

Community
Advanced
lpjhelderlpjhelder

build-fix

Fix build failures and TypeScript compilation errors with minimal code changes.

Community
Intermediate
NoobyGainsNoobyGains
78

quality-enforcement

Enforce code quality standards across pre-commit, pre-merge, and CI pipeline stages.

Community
Advanced
luizvergennesluizvergennes
1

next-browser

Expose Next.js component trees, props, hooks, and runtime data as shell commands.

Community
Advanced