Vercel Releases Agent Skills: A Package Manager for AI Coding Agents with 10 Years of React and Next.js Customization Rules

Versal has released agent-skillsA collection of skills that turn best practice playbooks into reusable skills for AI coding agents. The project is as follows agent skills Exclusive and first-of-its-kind focus on React and Next.js performance, web design review, and scalable deployment on Vercel. Skills are installed with a command that sounds similar to npmAnd then are discovered by compatible agents during the normal coding flow.

Agent Skills Format

Agent Skills is an open format for packaging capabilities for AI agents. A skill is a folder that contains instructions and optional scripts. The format is designed so that different devices can understand the same layout.

a specific skill in vercel-labs/agent-skills It has three main components:

• SKILL.md For natural language instructions that explain what the skill does and how it should behave
• A scripts Directory for helper commands that the agent can call to inspect or modify the project
• an alternative references Directory with additional documentation or examples

react-best-practices Also compiles your individual rule files into one AGENTS.md file. This file is optimized for agents. It collects rules into one document that can be loaded as a knowledge source during a code review or refactor. This eliminates the need for ad-hoc rapid engineering per project.

Main skills in vercel-labs/agent-skills

The repository currently offers three main skills that target common front end workflows:

1. react-best-practices

This skill encodes React and Next.js performance guidance as a structured rules library. It contains more than 40 rules grouped into 8 categories. These include areas such as eliminating network cascades, bundle size reduction, server side performance, retrieving client side data, reproducing behavior, rendering performance, and JavaScript micro optimizations.

Each rule includes an impact rating. Critical issues are listed first, then changes with less impact are listed. The rules are expressed with concrete code examples that show an anti-pattern and a correct version. When a compliant agent reviews a React component, it can map the findings directly to these rules.

2. web-design-guidelines

This skill focuses on user interface and user experience quality. It includes over 100 rules that span accessibility, focus handling, form behavior, animation, typography, images, display, navigation, dark mode, touch interactions, and internationalization.

During review, an agent can use these rules to detect missing ARIA attributes, incorrect label associations for form controls, misuse of animation when the user requests reduced speed, missing alt text or lazy loading on images, and other issues that are easy to miss during manual review.

3. vercel-deploy-claimable

This skill connects the agent review loop to deployment. It can package an existing project into a tarball, automatically detecting frameworks based on it package.jsonAnd create a deployment on Vercel. The script can recognize over 40 frameworks and also supports static HTML sites.

The skill returns two URLs. is a preview URL for a deployed site. The second claim is the URL. Claim URLs allow a user or team to attach a deployment to their Vercel account without sharing credentials from the original environment.

Installation and integration flow

Skills can be installed from the command line. The launch announcement highlights a simple path forward:

npx skills i vercel-labs/agent-skills

it brings order agent-skills repository and prepares it as a skill package.

Versailles and the surrounding ecosystem also provide a add-skill CLI that is designed to add skills to specific agents. A typical flow looks like this:

npx add-skill vercel-labs/agent-skills

add-skill Scans installed coding agents by checking their configuration directories. For example, cloud code uses .claude Directory, and uses cursors .cursor And a directory under the home folder. The CLI then installs the chosen skill into the correct skills Folders for each device.

you can call add-skill In non-interactive mode to control what is actually installed. For example, you can install just the React skill for Cloud Code globally:

npx add-skill vercel-labs/agent-skills --skill react-best-practices -g -a claude-code -y

You can also list the skills available before setting them:

npx add-skill vercel-labs/agent-skills --list

After installation, skill agents reside in specific directories e.g. ~/.claude/skills Or .cursor/skills. The agent searches for these skills, reads SKILL.mdAnd then is able to route relevant user requests to the right skill.

After deployment, the user interacts through natural language. For example, ‘Review this component for React performance issues’ or ‘Check this page for accessibility issues’. Agent observes established skills and usage react-best-practices Or web-design-guidelines When appropriate.

key takeaways

• vercel-labs/agent-skills Implements the agent skill specification, packaging each capability as a folder SKILL.mdoptional scriptsAnd referencesSo different AI coding agents can consume the same skill layout.
• The repository currently ships 3 skills, react-best-practices For React and Next.js performance, web-design-guidelines For UI and UX review, and vercel-deploy-claimable To create a claimable deployment on Vercel.
• react-best-practices Encodes over 40 rules in 8 categories based on impact, and provides concrete code examples, which lets agents run structured performance reviews instead of ad-hoc signal-based checks.
• web-design-guidelines Provides over 100 rules across accessibility, focus handling, forms, animation, typography, images, display, navigation, dark mode, touch interaction, and internationalization, enabling systematic UI quality checks by agents.
• Skills are established through commands such as npx skills i vercel-labs/agent-skills And npx add-skill vercel-labs/agent-skillsThen searched from agent specific skills Directories that turn best practice libraries into reusable, version controlled building blocks for AI coding workflows.

check it out GitHub repo. Also, feel free to follow us Twitter And don’t forget to join us 100k+ ml subreddit and subscribe our newsletter. wait! Are you on Telegram? Now you can also connect with us on Telegram.

Michael Sutter is a data science professional and holds a Master of Science in Data Science from the University of Padova. With a solid foundation in statistical analysis, machine learning, and data engineering, Michael excels in transforming complex datasets into actionable insights.