菜单
Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects.
默认使用会先检查来源的 Prompt；你也可以切换为直接命令，或下载本地副本。
决定是否安装前，请先阅读 SKILL.md，以及 SkillsMP 当前展示的配套文件。
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/bilalmk/todo_correct --skill nextjs-devtools命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Comprehensive UI/UX design skill for building modern, responsive web applications with Tailwind CSS, shadcn/ui, Material UI, Chakra UI, Ant Design, and Mantine. Use when users need to - (1) Choose a design system for their project, (2) Build responsive layouts and components, (3) Implement forms with validation, (4) Create accessible user interfaces, (5) Design task management UIs (todo apps, dashboards), (6) Apply responsive design patterns, (7) Implement dark mode, or (8) Build component libraries. Triggers include requests like 'design a todo app', 'create responsive layout', 'which UI library should I use', 'implement dark mode', 'build a form with validation', or 'make this mobile-friendly'.
Token-efficient library documentation fetcher using Context7 MCP with 86.8% token savings through intelligent shell pipeline filtering. Fetches code examples, API references, and best practices for JavaScript, Python, Go, Rust, and other libraries. Use when users ask about library documentation, need code examples, want API usage patterns, are learning a new framework, need syntax reference, or troubleshooting with library-specific information. Triggers include questions like "Show me React hooks", "How do I use Prisma", "What's the Next.js routing syntax", or any request for library/framework documentation.
Guide for creating effective skills. This skill should be used when users want to create a new skill (or update an existing skill) that extends Claude's capabilities with specialized knowledge, workflows, or tool integrations.
正在显示 SKILL.md
基于 SOC 职业分类
| name | nextjs-devtools |
| description | Next.js development tooling via MCP. Inspect routes, components, build info, and debug Next.js apps. Use when working on Next.js applications, debugging routing, or inspecting app structure. NOT for general React or non-Next.js projects. |
Inspect and debug Next.js applications via MCP server.
# 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
| 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 |
# 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"}'
# 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
python3 scripts/mcp-client.py call \
-s "npx next-devtools-mcp@latest" \
-t list-components
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
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>
| 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 |