Back to Skills

next-browser

CLI that gives agents what humans get from React DevTools and the Next.js dev overlay — component trees, props, hooks, PPR shells, errors, network — as shell commands that return structured text.

181stars10forksUpdated 5/8/2026

Security Assessment

Safe(100/100)
Security Score100/100

About next-browser

next-browser is a reusable AI skill focused on a specific workflow. CLI that gives agents what humans get from React DevTools and the Next.js

The skill packages instructions, conventions, and task-specific guidance so an agent can execute the job more consistently. dev overlay — component trees, props, hooks, PPR shells, errors, network — as shell commands that return structured text. If `next-browser` is not already on PATH, install `@vercel/next-browser`

In practice, this skill is best suited for users who need repeatable execution with fewer setup steps and less ambiguity. globally with the user's package manager, then `playwright install chromium`. If `next-browser` is already installed, it may be outdated. Run `next-browser --version` and compare against the latest on npm (`npm view @vercel/next-browser version`). If the installed version is

FAQ

What does next-browser help with?

next-browser helps agents follow a focused workflow described in the source documentation, reducing ambiguity and keeping execution aligned with the intended task.

When should this skill be used?

Use it when the task matches the workflow, domain, or operating rules described in the skill documentation, especially when consistent execution matters.

What are the main limitations?

The skill is constrained by the quality and scope of its source instructions. If the underlying documentation is incomplete, the agent may still need extra context or manual validation.

Install next-browser

Download and extract the skill files to your .claude/skills/ directory.

Quick Setup:

  1. Copy the skill folder to .claude/skills/
  2. Claude will automatically detect and use the skill