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.
This skill ships only metadata — no inline instructions. See the source repo for details.
Install this skill
One command (all agents)
Runs the npx skills CLI which auto-detects every AI coding agent you have installed (Claude Code, Cursor, Codex, OpenCode, Windsurf, Copilot, and 51 more).
npx skills add https://github.com/vercel-labs/next-browserAlternative: shorthand form
npx skills add vercel-labs/next-browserInstall to a specific agent
Pick the agent you use. The CLI writes the skill to that agent's standard skill directory.
npx skills add vercel-labs/next-browser --agent claude-codenpx skills add vercel-labs/next-browser --agent cursornpx skills add vercel-labs/next-browser --agent codexnpx skills add vercel-labs/next-browser --agent opencodenpx skills add vercel-labs/next-browser --agent github-copilotnpx skills add vercel-labs/next-browser --agent windsurfManual install (no CLI)
Prefer to skip the CLI? Clone the repo and drop the skill folder into your agent's skills directory.
git clone https://github.com/vercel-labs/next-browser.gitcp -r next-browser ~/.claude/skills/ For other agents, replace ~/.claude/skills/ with their skill directory — see the full list.
Use it
Once installed, ask your agent to "use the next-browser skill" or describe what you want (e.g. "CLI that gives agents what humans get from React DevTools and the Next.js dev ov"). Most agents auto-discover the skill from its SKILL.md description — no slash command needed.
npx skills. Skill files are MIT-style permissive by default — check the source repo for the actual license.
SKILL.md source
--- name: next-browser description: 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. ---
Want the ready-to-ship business bundle?
500+ agent skills, $15 one-time, lifetime access. 20 categories spanning content, marketing, sales, finance, legal, ops, SEO & more — finished deliverables, not drafts. Works with Claude Code, Codex, Cursor & every agent runtime.
Related skills 6
vercel-react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
azure-prepare
Prepare Azure apps for deployment (infra Bicep/Terraform, azure.yaml, Dockerfiles). Use for create/modernize or create+deploy; not cross-cloud migration (use azure-cloud-migrate). DO NOT USE FOR: copilot-sdk apps (use azure-hosted-copilot-sdk). WHEN: "create app", "build web app", "create API", "create serverless HTTP API", "create frontend", "create back end", "build a service", "modernize application", "update application", "add authentication", "add caching", "host on Azure", "create and d...
vercel-composition-patterns
React composition patterns that scale. Use when refactoring components with boolean prop proliferation, building flexible component libraries, or designing reusable APIs. Triggers on tasks involving compound components, render props, context providers, or component architecture. Includes React 19 API changes.
impeccable
Use when the user wants to design, redesign, shape, critique, audit, polish, clarify, distill, harden, optimize, adapt, animate, colorize, extract, or otherwise improve a frontend interface. Covers websites, landing pages, dashboards, product UI, app shells, components, forms, settings, onboarding, and empty states. Handles UX review, visual hierarchy, information architecture, cognitive load, accessibility, performance, responsive behavior, theming, anti-patterns, typography, fonts, spacing,...
design-taste-frontend
Senior UI/UX Engineer. Architect digital interfaces overriding default LLM biases. Enforces metric-based rules, strict component architecture, CSS hardware acceleration, and balanced design engineering.
redesign-existing-projects
Upgrades existing websites and apps to premium quality. Audits current design, identifies generic AI patterns, and applies high-end design standards without breaking functionality. Works with any CSS framework or vanilla CSS.