The Vercel Agent Skills ecosystem isn’t just for building complex AI backends. Its biggest immediate value is fixing the daily annoyance of your local IDE agents (Cursor, Claude Code, GitHub Copilot) generating outdated, deprecated, or slightly wrong code. Instead of correcting the bot every time it uses React useEffect when it should use a Server Component, you can simply “teach” it the right way once using community-maintained skills.
Here is the pragmatic guide to actually using the npx skills CLI to make your personal agents drastically smarter.
How do I find and install a skill?
The npx skills CLI acts like a package manager for AI instructions. You don’t need to write the skills yourself; the community is already building them for the most popular frameworks.
- Find a skill: Run
npx skills find nextjsto search the registry. - Add the skill: Navigate to your project root and run
npx skills add vercel/nextjs-v15.
This creates a skills/ directory in your project containing the Markdown instructions.
The Scenario: You’re starting a new project with Next.js 15. The AI models were trained months ago, so they keep trying to use old App Router patterns that trigger warnings. You’re exhausted from manually fixing their output. You run
npx skills add vercel/nextjs-v15. Suddenly, the agent reads the skill and writes perfect, modern Next.js code on the first try. You stop fighting the bot.
How do I connect the skill to Cursor?
Cursor doesn’t automatically know your skills folder exists. You have to point it there using your project’s .cursorrules file.
Open .cursorrules (or create it in your project root) and add a pointer:
# Agent Directives
You must strictly adhere to the guidelines defined in the local skills directory.
Before writing any React or Next.js code, read the instructions here:
- ./skills/vercel-nextjs-v15/SKILL.md
- ./skills/tailwind-best-practices/SKILL.mdCursor’s agent will now read these files into its context window whenever you hit Cmd+I (Composer) or Cmd+L (Chat).
How do I connect the skill to Claude Code?
Claude Code handles this slightly differently via its CLAUDE.md file, which is Anthropic’s version of a persistent context file.
In your CLAUDE.md, you can instruct the CLI agent to reference the skills:
# Project Context
This project uses specific architectural patterns. You must follow the rules defined in the downloaded Vercel Skills:
<reference path="./skills/prisma-optimization/SKILL.md">
<reference path="./skills/react-a11y/SKILL.md">The Scenario: You’re working on a Friday afternoon and just want to finish a database migration. You ask Claude Code to update the Prisma schema. Because you linked the
prisma-optimizationskill inCLAUDE.md, Claude doesn’t just do the migration—it also automatically flags that your new table is missing a vital index, preventing a massive performance bug in production. It knew what to look for because the skill told it.
The “Team Sync” Pattern
The biggest advantage of using the CLI is keeping your whole team on the same page.
Instead of adding the skills/ folder to your .gitignore, commit it to the repository.
Now, when a junior developer clones the repo and opens Cursor, they don’t need to ask you what the styling conventions are. They don’t need to read a stale wiki page. Cursor automatically reads the committed SKILL.md files via .cursorrules and enforces the team’s coding standards for them.
When the lead engineer decides to update a pattern, they just run npx skills update to pull the latest versions from the community, commit the changes, and the entire team’s AI agents instantly learn the new rules.
Next Step: Want to see the cheat codes for your favorite CLI agent? Check out our Claude Code Cheatsheet.
