Vercel 推出 Skills — 內建 React 最佳實踐的「AI 代理的 npm」

Sign up

Sign in

Sign up

Sign in

Vercel Launches Skills — “npm for AI Agents” with React Best Practices Built-in

An easy-to-follow guide to teaching your AI coding assistant (e.g. Claude Code, OpenCode, Cursor, Codex) 40+ performance patterns in one command

--

Listen

Share

Guillermo Rauch announced it this morning: Vercel is introducing skills — a package manager (yep, yet another package manager) for AI coding assistants. One command, and your AI agent knows 10+ years of React and Next.js optimisation patterns.

Here’s how to set it up, what’s actually in the box, and why it matters if you’re building with React.

Quick Start: 3 Steps to Smarter AI Assistance

Step 1: Install the skills

This installs Vercel’s curated skills to your local environment. The CLI auto-detects which AI coding tools you have installed.

Step 2: Choose your scope

The installer asks whether you want skills available globally (all projects) or just the current project:

Step 3: Start coding

That’s it. Your AI assistant now has access to 40+ React performance rules, web design guidelines, and deployment helpers. When you ask it to review a component or write a data-fetching pattern, it draws on these skills automatically.

Works with: Claude Code, Cursor, OpenCode, VS Code (with Copilot), OpenAI Codex CLI, Gemini CLI, and more.

What Just Happened

Guillermo Rauch (Vercel’s CEO) recently tweeted:

“We’re introducing skills — the ‘npm’ of AI skills. Excited to see an open, agent-agnostic ecosystem of skills flourish.”

Within hours, the tweet hit 110,000+ views and 2,300+ likes. The React community noticed. But this isn’t just a Vercel announcement — it’s the public launch of an ecosystem that’s been building quietly across the industry for months.

The repository is vercel-labs/agent-skills, and it contains three skills out of the box:

The React best practices skill alone is substantial. It’s the same content I dissected last week in my article on Vercel’s 40+ rules — but now packaged for machines to consume directly.

The Agent Skills Standard

Here’s what sets this apart from yet another .cursorrules file or AGENTS.md: it's an open standard with cross-tool support.

The Agent Skills format started at Anthropic for Claude Code, then got released as an open spec. A growing list of tools now support it:

How a skill works:

Skills are folders with a SKILL.md file — markdown with YAML frontmatter. Simple on purpose:

Progressive disclosure is the clever bit. When your AI agent boots up, it loads only the name and description of each skill — roughly 100 tokens each. Full instructions load only when the agent decides a skill matches your current task. Keeps context windows lean.

The spec lives at agentskills.io. Governance is shared between Anthropic, Vercel, and community contributors.

Ecosystem Adoption in Hours

Within hours of Rauch’s announcement, other projects started publishing their own skills.

Better Auth — the popular authentication library — shipped immediately:

Beka (Better Auth’s maintainer) quote-tweeted Rauch with the announcement, demonstrating how quickly library authors can package their domain expertise for AI consumption.

Expect this pattern to accelerate. If you maintain a library, you can now publish a skill that teaches AI assistants how to use it properly — the right patterns, the common pitfalls, the security gotchas. It’s documentation that machines actually read.

Just follow this structure on your public repo if you intend to curate your own.

Installing skills from a public GitHub repo:

Installing skills stored somewhere locally:

Installing from a direct URL:

A note on prior art: Some pointed out that the Agent Skills format looks a lot like existing work in the AI agent tooling space. Fair enough — this standard didn’t emerge from nowhere. What’s new is the combination of cross-tool support, Anthropic’s involvement, and Vercel’s distribution reach. Whether you see that as building on prior art or commoditising it depends on where you sit.

What This Means for the Front-End Ecosystem

Vercel has a track record of setting standards the React ecosystem adopts. Next.js patterns become React patterns. Vercel conventions become industry conventions.

This is Vercel’s move to shape how AI assistants understand React — and they’re doing it through an open standard rather than a proprietary format.

Why does that matter?

Cross-tool portability. The same skill works in Claude Code, Cursor, VS Code, OpenCode, and others. No vendor lock-in. Write your patterns once, use them wherever your team works.

Institutional knowledge, packaged. The 45 React rules in react-best-practices represent years of production experience at Vercel. The stuff that usually lives in senior engineers' heads, scattered wikis, or walks out the door when people leave. Now it's version-controlled and machine-readable.

A new documentation layer. Libraries have always shipped READMEs for humans. Now they can ship skills for AI. When an AI assistant helps a junior developer wire up authentication, it can draw on Better Auth’s skill to get the patterns right on the first try.

If you read my piece last week — Inside Vercel’s react-best-practices: 40+ Rules Your AI Copilot Now Knows — this is the follow-through. Those rules are now a single npx command away from every AI coding tool that supports the standard.

A Peek Inside the React Best Practices Skill

The skill organises 45 rules into 8 categories, ranked by impact:

What does the AI agent actually learn? A quick tour:

Eliminating Waterfalls (Critical)

Patterns like deferring await until needed, Promise.all() for independent operations, and strategic Suspense boundaries. Example:

Bundle Size Optimisation (Critical)

Direct imports over barrel files. Dynamic imports for heavy components. Deferring third-party libraries until after hydration. The skill names specific problem libraries — lucide-react, @mui/material, date-fns — and shows the correct import patterns.

Server-Side Performance (High)

React.cache() for per-request deduplication. LRU caching for cross-request scenarios. Minimising serialisation at RSC boundaries. Using Next.js's after() for non-blocking operations.

Every rule includes incorrect and correct code examples, impact explanations, and links to official docs. The AI doesn’t just know what to do — it knows why.

How Skills Flow: From Repo to Your AI Agent

Here’s how it works:

What’s Next

Skill registries are coming. The agentskills.io site already lists supported tools and links to example skills. A more formal registry — npm for skills — feels inevitable.

Enterprise skill libraries. Companies can build internal skills that encode their coding standards, architecture decisions, and domain quirks. New team members get an AI assistant that already knows how things work.

Roll your own. The format is simple enough to write a skill in an afternoon. The spec at agentskills.io covers the schema — frontmatter fields, directory structure, progressive disclosure patterns.

Want to see how a skill is put together? Clone vercel-labs/agent-skills and read through skills/react-best-practices/SKILL.md. It's well-organised and worth the 10 minutes.

The Bottom Line

Vercel just made it dead simple to give your AI coding assistant years of React optimisation knowledge. One command, cross-tool support, open standard.

Whether you see this as Vercel playing kingmaker or shipping genuinely useful infrastructure, the practical upshot is the same: npx add-skill vercel-labs/agent-skills makes your AI assistant better at React. Worth the 30 seconds.

References

--

--

Written by JP Caparas

I write mostly about correct software engineering practices and effective agentic coding patterns. Follow me on Twitter: @zenoware

No responses yet

Help

Status

About

Careers

Press

Blog

Privacy

Rules

Terms

Text to speech