@bilalmk/nextjs-devtools

Todo Evolution Hackathon - Spec-Driven Development with SpecKit Plus

View in AI SkillSafe app
3 scan findings
8165 downloads
0 stars
0 demos
SKILL.md
namenextjs-devtools
description|

Next.js DevTools

Inspect and debug Next.js applications via MCP server.

Quick Start

# Start server (spawns on-demand)
bash scripts/start-server.sh

# Or use directly via mcp-client
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

Available Tools

Tool Description
list-routes Get all app routes
get-route-info Details for specific route
list-components React components in app
get-build-info Build configuration
get-config next.config.js settings

Workflow Patterns

Pattern 1: Route Inspection

# List all routes
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-routes

# Get specific route details
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-route-info \
  -p '{"route": "/api/auth"}'

Pattern 2: Debug Build Issues

# Check build config
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-build-info

# Check next.config.js
python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t get-config

Pattern 3: Component Discovery

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t list-components

Scripts

start-server.sh

For persistent server (multiple calls):

bash scripts/start-server.sh
# Server runs on default port
# Use mcp-client.py with -u flag instead of -s

On-Demand (Recommended)

For single calls, use -s flag which spawns server per-call:

python3 scripts/mcp-client.py call \
  -s "npx next-devtools-mcp@latest" \
  -t <tool-name>

Troubleshooting

Issue Solution
Server not starting Check npx next-devtools-mcp@latest works manually
No routes found Ensure running from Next.js project root
Build info empty Run next build first

Embed badges

Add these to your README to show the skill's verification status.

SkillSafe verified badge
Verified badge
[![SkillSafe verified badge](https://api.skillsafe.ai/v1/badge/@bilalmk/nextjs-devtools/verified)](https://skillsafe.ai/skill/@bilalmk/nextjs-devtools/)
Installs badge
Installs badge
[![Installs badge](https://api.skillsafe.ai/v1/badge/@bilalmk/nextjs-devtools/installs)](https://skillsafe.ai/skill/@bilalmk/nextjs-devtools/)
Scan badge
Scan badge
[![Scan badge](https://api.skillsafe.ai/v1/badge/@bilalmk/nextjs-devtools/scan)](https://skillsafe.ai/skill/@bilalmk/nextjs-devtools/)
Eval pass rate badge
Eval pass rate
[![Eval pass rate badge](https://api.skillsafe.ai/v1/badge/@bilalmk/nextjs-devtools/eval)](https://skillsafe.ai/skill/@bilalmk/nextjs-devtools/)