Runtime Debug

The runtime-debug skill enables AI agents to inspect and troubleshoot Next.js applications directly within the browser environment. It provides access to real-time execution data, allowing agents to analyze runtime behavior without needing a local development setup.

When to use it

• Diagnosing complex client-side errors that occur only in production or staging environments.
• Investigating performance bottlenecks by examining actual render times and network requests.
• Verifying how dynamic routes and middleware behave under specific user interactions.
• Debugging issues related to server actions or data fetching strategies in Next.js apps.

Key capabilities

• Access to the Next.js runtime context for deep inspection.
• Real-time monitoring of application state during execution.
• Integration with Vercel's ecosystem for seamless debugging workflows.
• Support for analyzing both client and server-side rendering behaviors.

Example prompts

• "Use runtime-debug to trace why the homepage fails to load on mobile devices in our Next.js app."
• "Inspect the runtime logs to identify latency spikes during the checkout process."
• "Debug a hydration mismatch error by examining the component execution flow using runtime-debug."

Tips & gotchas

Ensure your AI agent has appropriate permissions to access production or staging environments where the debugging session will run. This skill is specific to Next.js applications, so it cannot be used for generic web frameworks like React SPA without a Next.js adapter.