Vercel Labs Skills for Claude Code: find-skills, agent-browser, React Best Practices, and Web Design Guidelines
Vercel Labs ships four widely used Claude Code skills: find-skills for discovering skills mid-task (2,438,642 installs, skills.sh registry, July 2026, the most-installed skill in the catalog), vercel-react-best-practices for performance rules, web-design-guidelines for UI audits, and agent-browser for real-browser verification. This guide covers what each does, when to use which, and how they compose.
By Skillselion, an Ellelion LLC publication · Updated July 11, 2026 · 4 min read · Stats verified against the live catalog
Vercel Labs publishes four of the most-installed Claude Code skills: find-skills (skill discovery, 2,438,642 installs - the most-installed skill in the entire catalog), vercel-react-best-practices (React/Next.js performance rules, 542,213 installs), web-design-guidelines (UI code audits, 454,396 installs), and agent-browser (browser automation, 533,255 installs), all counts from the skills.sh registry, July 2026. Together they cover a full frontend loop: discover a capability, write performant React, audit the UI code, then verify it in a real browser.
Key takeaways
- Vercel Labs is the single most-installed skill author on the skills leaderboard; its four flagship skills total over 3.9 million installs (skills.sh registry, July 2026).
- find-skills is a meta-skill: it teaches your agent to search the skills ecosystem and install what it needs mid-task.
- vercel-react-best-practices constrains code generation with 70 performance rules; web-design-guidelines audits code you already wrote.
- agent-browser drives a real Chrome/Chromium instance over CDP, so the agent can verify UI changes instead of assuming they work.
- All four install with one
npx skills addcommand each; commands are at the end of this guide.
Who is vercel-labs in the skills ecosystem?
vercel-labs is the experimental open-source GitHub organization of Vercel, the company behind Next.js. In the Claude Code skills ecosystem it matters for two reasons. First, scale: find-skills alone has 2,438,642 installs (skills.sh registry, July 2026), more than any other skill in the catalog. Second, trust: these are official vendor skills backed by repos with 25,774 stars (vercel-labs/skills), 28,917 stars (vercel-labs/agent-skills), and 38,257 stars (vercel-labs/agent-browser), maintained by the team that also builds the Skills CLI (npx skills). When a discovery flow like find-skills applies quality gates, "published by vercel-labs" is itself one of the trust signals.
find-skills
find-skills makes your agent aware that a skills ecosystem exists. With 2,438,642 installs (skills.sh registry, July 2026) it is the most-installed skill in the catalog. When you ask Claude Code how to do something, the skill runs a six-step flow: understand the task, check the skills.sh leaderboard, search with npx skills find, verify install counts and source reputation, present install commands, and optionally install with npx skills add.
Concrete example: you ask "add PDF export to this report page." Without find-skills, Claude improvises a solution from memory. With it, Claude runs npx skills find pdf, finds a proven PDF skill with six figures of installs, shows you the option, and installs it - so you build on a tested workflow instead of a first draft. For a deeper walkthrough, see the dedicated find-skills guide.
vercel-react-best-practices
vercel-react-best-practices embeds 70 React and Next.js performance rules across 8 impact-ranked categories: network waterfalls, bundle size, server-side performance, client fetching, re-renders, rendering, JavaScript hot paths, and advanced patterns. It has 542,213 installs (skills.sh registry, July 2026). Unlike a linter, it shapes code as the agent writes it.
Concrete example: you ask Claude to build a dashboard page that loads three API resources. With the skill active, it fetches them in parallel in a Server Component instead of chaining sequential await calls in a client useEffect - the waterfall rules are the highest-impact category and get applied first.
web-design-guidelines
web-design-guidelines audits existing frontend code against Vercel's Web Interface Guidelines: accessibility, focus states, interaction patterns, and UX consistency. It has 454,396 installs (skills.sh registry, July 2026). On each run it fetches the latest guidelines from the live source, reads the files you scope it to, and reports violations in terse file:line format. It reviews only; it does not generate UI. Pair it with a generation skill like the one in the frontend-design guide.
Concrete example: before merging a PR, you say "audit components/checkout/ against web design guidelines." You get back findings like CheckoutForm.tsx:41 - button lacks visible focus state, which turns subjective design review into a repeatable checklist.
agent-browser
agent-browser is a browser automation CLI packaged as a skill, with 533,255 installs (skills.sh registry, July 2026) and the largest repo of the family at 38,257 stars. It drives Chrome/Chromium over CDP using accessibility-tree snapshots and compact element refs, and also automates Electron apps such as VS Code, Slack, and Figma.
Concrete example: after Claude edits your signup flow, you say "verify the signup form works." The agent opens the page, fills the form, clicks submit, screenshots the result, and reports what actually happened in a real browser instead of declaring victory from the diff.
Which vercel-labs skill do you need?
| Your goal | Skill |
|---|---|
| Discover and install skills for whatever task comes up | find-skills |
| Generate or refactor fast React/Next.js code | vercel-react-best-practices |
| Audit UI code for accessibility and UX issues | web-design-guidelines |
| Verify changes in a real browser, scrape, or automate web tasks | agent-browser |
How do the four skills compose?
They form a pipeline across the development loop: find-skills discovers the right capability for the task, vercel-react-best-practices constrains the code the agent writes, web-design-guidelines audits the result against interface rules, and agent-browser verifies the change in a real browser. A frontend developer can install all four and get discovery, generation quality, review, and verification without leaving Claude Code.
How do you install the vercel-labs skills?
npx skills add https://github.com/vercel-labs/skills --skill find-skills
npx skills add https://github.com/vercel-labs/agent-skills --skill vercel-react-best-practices
npx skills add https://github.com/vercel-labs/agent-skills --skill web-design-guidelines
npx skills add https://github.com/vercel-labs/agent-browser --skill agent-browserEach command copies the skill into your project's skills directory; restart Claude Code and it activates on matching tasks. Browse the rest of the ecosystem in the full skills catalog.
Install counts come from the skills.sh registry via the Skillselion catalog, snapshot July 2026.
Common questions
What is the most-installed Claude Code skill?
find-skills by vercel-labs, with 2,438,642 installs (skills.sh registry, July 2026) - the highest install count of any skill in the catalog. It is a meta-skill that teaches your agent to search the skills ecosystem with npx skills find, check the skills.sh leaderboard, and install proven skills mid-task instead of improvising solutions from memory.
Are the vercel-labs skills official Vercel projects?
Yes. vercel-labs is Vercel's experimental open-source GitHub organization, and all four skills are marked as official vendor skills. The backing repos are substantial: vercel-labs/skills has 25,774 stars, vercel-labs/agent-skills has 28,917 stars, and vercel-labs/agent-browser has 38,257 stars (July 2026). Vercel also maintains the Skills CLI (npx skills) used to install them.
Should I install all four vercel-labs skills?
If you build frontend with React or Next.js, installing all four is reasonable - they cover different steps and do not overlap: find-skills for discovery, vercel-react-best-practices for generation quality, web-design-guidelines for review, agent-browser for browser verification. If you work outside React, start with find-skills and agent-browser, which are stack-agnostic.
What is the difference between vercel-react-best-practices and web-design-guidelines?
vercel-react-best-practices shapes code as it is written: 70 React/Next.js performance rules (waterfalls, bundle size, re-renders) applied during generation and refactoring. web-design-guidelines reviews code that already exists: it fetches Vercel's Web Interface Guidelines and reports accessibility and UX violations in file:line format. One constrains generation, the other audits output; teams commonly run both.
Does agent-browser work with apps other than websites?
Yes. agent-browser drives Chrome/Chromium over the Chrome DevTools Protocol, and it can also automate Electron desktop apps such as VS Code, Slack, and Figma. It uses accessibility-tree snapshots with compact element refs, which makes actions more reliable than raw pixel coordinates for filling forms, clicking buttons, and scraping page data.
Do the vercel-labs skills work outside Next.js projects?
Two of them do. find-skills and agent-browser are stack-agnostic and useful in any project. web-design-guidelines audits any frontend code against Vercel's Web Interface Guidelines, framework aside. Only vercel-react-best-practices is React/Next.js-specific; its 70 rules target components, Server Components, data fetching, and bundle behavior in that stack.
Ranked by Skillselion - an independent directory of AI-coding tools, not affiliated with Anthropic, OpenAI or Cursor. Tool rankings reflect real adoption (installs, then GitHub stars) from the skills.sh registry and GitHub, last updated July 11, 2026.