We’ve all been there. You’re working with an AI coding assistant—maybe it’s in your VS Code, maybe it’s Cursor or Claude—and you ask it to review your code. The feedback is… okay. It's a bit generic. You know you could get a better answer if you just spent ten minutes crafting the perfect, hyper-specific prompt.
But who has time for that? We want our AI tools to be smart out of the box. We want them to have the same deep knowledge that a senior developer has, without us having to spoon-feed it to them every single time.
Well, it looks like the team at Vercel has been thinking about this, too. They just released a new open-source project called agent-skills, and honestly, it’s one of the most practical AI-for-devs ideas I’ve seen in a while.
The simplest way to think about it is this: It’s like npm or Homebrew, but for your AI’s brain. Instead of just having a general-purpose AI, you can now install specific skills and knowledge packs directly into it.
So, What Exactly Are We Installing Here?
Let’s get one thing straight: this isn't some complex, proprietary system. An "Agent Skill" is really just a well-organized folder. It’s an open format designed so that different AI tools can all understand it.
Think of it like giving your AI assistant a set of textbooks for a specific subject. Inside each skill folder, you'll typically find three things:
SKILL.md: This is the main textbook. It’s a Markdown file written in plain English that tells the AI what the skill is, what it does, and how to behave when using it.- A
scriptsfolder: These are like cheat sheets or tools the AI can use. If a skill needs to inspect your project or run a command, the instructions are in here. - A
referencesfolder (optional): This is the extra credit reading—more documentation or examples the AI can refer to if it needs more context.
The beauty of this is its simplicity. It’s just files in a folder. This means we’re not locked into one company’s platform. Anyone can create a skill, and any AI agent can be taught to use them.
The "Starter Pack": Three Killer Skills from Vercel
To kick things off, Vercel has bundled three incredibly useful skills that target the everyday pain points of front-end developers. This isn't just a proof-of-concept; these are tools you'll genuinely want to use.
1. The Senior React Dev in a Box (react-best-practices)
This is the big one, especially if you work with React or Next.js. The Vercel team has basically distilled a decade of performance optimization knowledge into a single skill. We’re talking over 40 specific rules covering everything you can think of:
- Fixing network waterfalls
- Cutting down your bundle size
- Improving server-side performance
- Optimizing data fetching on the client
- Preventing unnecessary re-renders
- And a ton more JavaScript micro-optimizations.
What I love is how structured it is. Each rule has an impact rating, so your AI will flag the critical stuff first. Better yet, every rule comes with concrete code examples showing the wrong way (the anti-pattern) and the right way to do it.
This completely changes AI code reviews. Instead of getting vague advice, your AI can now say, "Hey, I see you're doing this, which violates rule #12 for client-side data fetching. Here’s exactly how to fix it." It's like having a Vercel performance engineer pair-programming with you.
2. Your Automated UI/UX Quality Check (web-design-guidelines)
Let's be honest, we all miss the little things. That missing alt text on an image, a form label that isn't correctly associated with its input, or an animation that doesn’t respect a user's prefers-reduced-motion setting.
This skill acts as your automated quality assurance expert. It contains over 100 rules covering the nitty-gritty of great UI and UX design. This includes:
- Accessibility (ARIA attributes, focus handling)
- Forms and user input
- Animation and motion
- Typography and imagery
- Dark mode and touch interactions
- Internationalization (i18n)
When you ask your AI to review a page for design or accessibility issues, it can now use this massive checklist to catch common problems that are so easy for human reviewers to overlook.
3. From Code to Live Preview in One Command (vercel-deploy-claimable)
This one is just plain cool. How often do you want to quickly share a work-in-progress with a colleague or designer? The vercel-deploy-claimable skill makes this ridiculously easy.
It connects your AI agent directly to Vercel's deployment platform. The agent can package up your project, automatically figure out which framework you're using (it supports over 40!), and spin up a preview deployment.
It then gives you back two URLs. One is the standard preview link you can share. The other is a special "claim URL." This is genius. It allows someone on your team to pull that preview deployment into their own Vercel account without you ever having to share API keys or credentials from your local machine. It’s a simple, secure way to hand off work.
Alright, I'm In. How Do I Get It?
Getting started is surprisingly straightforward and should feel familiar to any developer. It's a two-step process.
First, you need to grab the skills themselves. You can do this with a single command:
npx skills i vercel-labs/agent-skills
This command fetches the whole agent-skills repository and sets it up as a local package.
Next, you need to "install" these skills into your specific AI coding tools. Vercel has created another handy CLI for this. A typical command looks like this:
npx add-skill vercel-labs/agent-skills
When you run this, the add-skill tool smartly scans your computer for known AI agents, like Cursor or Claude Code, by looking for their configuration files. It then copies the skills into the right directory for each tool (like ~/.cursor/skills), so they can discover and use them automatically.
You can even get more specific. For example, if you only wanted to install the React skill for Claude Code, you could run:
npx add-skill vercel-labs/agent-skills --skill react-best-practices -a claude-code
Once that's done, you're all set. There’s no complex configuration. The next time you chat with your AI assistant, it will have these new superpowers.
You can simply ask things like, "Review this component for React performance issues," or "Check this page for accessibility problems." The agent will see your request, recognize that it has a specialized skill for the job, and use that structured knowledge to give you a much, much better answer.
This is a really exciting step forward. It moves us away from the world of finicky prompt engineering and toward a future where our AI tools are more like true colleagues—specialists that we can equip with the exact knowledge they need to help us do our best work.
