Nextjs Diagnostics Agent
Monitors a running Next.js application for compilation errors, runtime errors, hydration mismatches, and API failures using Next.js DevTools MCP — runs in parallel with ui-test-agent. Use when testing a Next.js project and need server-side error visibility. Trigger with "monitor Next.js errors", "run Next.js diagnostics".
- Type
- Subagent
- Repository
- jeremylongshore/tons-of-skills-marketplace
- GitHub stars
- 2.8k
- License
- MIT
- Repo last updated
- Sep 27, 2026
- Model
- sonnet
- Version
- 1.0.0
- Author
- Jeremy Longshore <[email protected]>
What Nextjs Diagnostics Agent is
Nextjs Diagnostics Agent is a subagent published in the jeremylongshore/tons-of-skills-marketplace repository on GitHub, which has about 2.8k stars. The repository describes itself as: “Model-agnostic agent-skills platform with a harness-free canonical layer, verified adapters, and the ccpi package manager. Explore at tonsofskills.com.”
A subagent is a specialist assistant that Claude can hand part of a task to. It is a markdown file whose frontmatter sets a name, a description that tells Claude when to delegate, and optionally the tools and model it may use; the body becomes the subagent's own system prompt.
Because a subagent works in its own context, it keeps the main conversation focused: Claude can send a narrow job, such as a review or a specialised analysis, to Nextjs Diagnostics Agent and get back a compact result.
How to install Nextjs Diagnostics Agent
Claude Code
- Download nextjs-diagnostics-agent.md from the repository.
- Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control.
- Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.
Claude Cowork
- Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent.
- Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.
New to extending Cowork? Our plugins guide and Customize guide explain how skills, plugins, and connectors fit together.
Inside the source file
An excerpt from plugins/community/sprint/agents/nextjs-diagnostics-agent.md, shared under the repository's MIT license. Read the full file on GitHub.
You are the Next.js Diagnostics Agent. You monitor a running Next.js application for errors during UI testing.
Note: This agent is OPTIONAL and only spawned for Next.js projects. The orchestrator detects Next.js and spawns this agent automatically when applicable.
You work in parallel with the ui-test-agent. While that agent performs browser-based tests, you monitor the Next.js runtime for errors.
You NEVER:
- spawn other agents
- modify .claude/sprint/[index]/status.md
- modify .claude/project-map.md
- use Chrome browser MCP tools (the ui-test-agent handles that)
- reference sprints in reports (sprints are ephemeral internal workflow)
You ONLY:
- use Next.js DevTools MCP tools to monitor errors
- return a single structured DIAGNOSTICS REPORT in your reply
MCP Tools - Next.js DevTools ONLY
You MUST use only the mcpnext-devtools* tools:
- mcpnext-devtoolsnextjs_index - Discover running Next.js dev servers (LOCAL processes only - does NOT work for Docker)
- mcpnext-devtoolsnextjs_call - Call specific diagnostic tools
- mcpnext-devtoolsnextjs_docs - Reference documentation if needed
Available Tool Names (snake_case - IMPORTANT!)
The tool names passed to nextjs_call are snake_case, not camelCase:
- get_errors - Get compilation and runtime errors
- get_routes - Get available routes
- get_project_metadata - Get project info
- get_page_metadata - Get page-specific metadata
- get_logs - Get server logs
Do NOT use Chrome browser MCP tools (mcpclaude-in-chrome*) - the ui-test-agent handles browser automation.
Docker vs Local Deployments
Local Development (Next.js running directly on host)
Use nextjs_index to discover the running server automatically.
Docker Deployment (Next.js running in container)
nextjs_index will NOT detect Docker containers because it scans local processes.
If the prompt mentions Docker or a specific port (e.g., 8001), skip nextjs_index and call nextjs_call directly:
mcp__next-devtools__nextjs_call
- port: "8001" (or whatever port is specified)
- toolName: "get_errors"The MCP endpoint is exposed at http://localhost:[PORT]/_next/mcp and works through Docker port mapping.
Monitoring Modes
The orchestrator will specify one of two modes:
Mode: AUTOMATED (default)
- Poll for errors at regular intervals during the test session
- Session ends after reasonable duration or when orchestrator signals completion
- Return final diagnostics report
Mode: MANUAL
- Continuously monitor for errors while user interacts with the app
- Session ends when the orchestrator signals completion (ui-test-agent detects tab close)
- Capture all errors observed during the manual session
Standard Workflow
- Determine the port
If Docker deployment (mentioned in prompt or port 8001):
- Skip discovery, use the specified port directly (usually 8001)
If local development:
Call: mcp__next-devtools__nextjs_index- Identify the running dev server (typically port 3000)
- Note available diagnostic tools
- Initial diagnostics
Call: mcp__next-devtools__nextjs_call
- port: "[PORT]" (as string, e.g., "8001" or "3000")
- toolName: "get_errors"- Check for any pre-existing compilation or runtime errors
- Monitoring loop
- Poll for errors every few seconds using get_errors
- Capture:
- Compilation errors
- Runtime errors
- Hydration mismatches
- Server-side rendering errors
- API route errors
- CHECK FOR STOP SIGNAL (see below)
- Gather route information
Call: mcp__next-devtools__nextjs_call
- port: "[PORT]"
- toolName: "get_routes"- Document available routes for context
- Return DIAGNOSTICS REPORT
Session Duration
You run in parallel with ui-test-agent. The orchestrator manages session timing.
- In AUTOMATED mode: Monitor for a reasonable duration (e.g., poll 5-10 times over 30-60 seconds)
- In MANUAL mode: Continue monitoring until the orchestrator signals completion (longer session, up to ~5 minutes)
Do NOT poll forever. Use reasonable timeouts and iteration limits.
Mandatory DIAGNOSTICS REPORT Format
Your final reply MUST be a single report with exactly this structure:
Before you install
- Read the whole file first. Skills, commands, and subagents are instructions Claude will follow, so make sure they match what you want.
- Check which tools, scripts, or MCP servers it uses. Local servers and scripts run with your permissions.
- Try it in a test project or a copy of your files before pointing it at real work.
- Pin the version you tested, and review changes before updating.
- Watch for instructions that fetch web content or run shell commands; those are where prompt injection risks start. See our prompt injection guide.
FAQ
What is Nextjs Diagnostics Agent?
Nextjs Diagnostics Agent is a subagent for Claude Code and Claude Cowork from the jeremylongshore/tons-of-skills-marketplace repository on GitHub. Monitors a running Next.js application for compilation errors, runtime errors, hydration mismatches, and API failures using Next.js DevTools MCP — runs in parallel with ui-test-agent. Use when testing a Next.js project and need server-side error visibility. Trigger with "monitor Next.js errors", "run Next.js diagnostics".
How do I install Nextjs Diagnostics Agent in Claude Code?
Download nextjs-diagnostics-agent.md from the repository. Save it to ~/.claude/agents/ to use it in every project, or to .claude/agents/ inside one project to share it through version control. Claude Code watches these folders, so the subagent is usually available right away. Ask Claude to use it by name, or @-mention it to make sure it runs.
Can I use Nextjs Diagnostics Agent in Claude Cowork?
Cowork loads subagents through plugins. If the repository is packaged as a plugin marketplace, add it under Customize → Plugins → Add marketplace and install the plugin that contains this subagent. Otherwise, bundle the file into your own plugin's agents/ folder and upload it from Customize → Plugins.
Is Nextjs Diagnostics Agent safe to install?
It is a third-party community resource, not reviewed by Anthropic or this site. Read the source file first, check which tools and connectors it uses, and install only from sources you trust.
Similar resources
- Sprint Run the autonomous multi-agent sprint workflow with spec-driven development Slash Command · jeremylongshore/tons-of-skills-marketplace
- Spine Designs and implements backend systems contract-first — REST/gRPC/GraphQL APIs, distributed architecture, caching, auth, and rate limiting using boring technology that ships and stays simple. Use when designing a new API or fixing backend performance. Trigger with \"design this backend API\", \"build this service\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Sql Query Builder Generate optimized SQL queries from natural language descriptions Slash Command · jeremylongshore/tons-of-skills-marketplace
- Sql Query Optimizer Analyze and optimize SQL queries for better performance, suggesting indexes, query rewrites, and execution plan improvements Plugin · jeremylongshore/tons-of-skills-marketplace
- Nosql Agent Design efficient NoSQL data models for MongoDB, DynamoDB, and Cassandra — applying embed-vs-reference, access-pattern-first, sharding key, and index strategies. Use when architecting a document or key-value schema or migrating from a relational model. Trigger with \"design NoSQL schema\", \"model for MongoDB\". Subagent · jeremylongshore/tons-of-skills-marketplace
- Nextjs Dev Implements Next.js 16 frontend features (App Router, Server/Client Components, TypeScript, TailwindCSS v4, i18n) strictly from sprint API contract and frontend specs, returning a structured FRONTEND IMPLEMENTATION REPORT. Use when building or updating Next.js pages and components in a sprint. Trigger with "implement frontend sprint", "build Next.js feature". Subagent · jeremylongshore/tons-of-skills-marketplace
- Onboard Designs developer onboarding experiences that get engineers to their first successful API call in under 5 minutes — quickstarts, TTFC audits, and friction analysis. Use when launching a new API, improving signup-to-activation drop-off, or auditing the current quickstart. Trigger with \"improve our developer onboarding\", \"write the quickstart\". Subagent · jeremylongshore/tons-of-skills-marketplace
- N8n Expert Design n8n automation workflows with node configs, JavaScript code nodes, error handling, and full importable JSON exports. Use when building complex automations or self-hosted integrations. Trigger with "design an n8n workflow", "build an n8n automation". Subagent · jeremylongshore/tons-of-skills-marketplace