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

Vercel is released agent-skillsa set of skills that turn best practice playbooks into reusable skills for AI coding agents. This project follows the Agent Skills specification and focuses primarily on React and Next.js functionality, web design reviews, and on-demand implementations in Vercel. Skills are installed with a command like npmthey are then received by the corresponding agents during the normal code flow.

Agent skills format

Agent skills is an open format for packaging skills for AI agents. Ability is a folder that contains instructions and optional documents. The format is designed in such a way that different tools can understand the same structure.

General ability to vercel-labs/agent-skills it has three main parts:

• SKILL.md to get natural language instructions that explain what the skill does and how it should behave
• a scripts a directory of helper commands that the agent can call to test or modify a project
• optional references index with additional texts or examples

react-best-practices and merges its individual rule files into one AGENTS.md file. This file is intended for agents. It compiles the rules into a single document that can be uploaded as a reference during a code review or refactor. This eliminates the need for ad-hoc information engineering for each project.

Key skills to vercel-labs/agent-skills

The repository currently features three main capabilities that guide the most common workflows:

1. react-best-practices

This feature includes the functionality of React and Next.js as a structured library. It contains more than 40 rules grouped into 8 sections. These areas cover areas such as network waterfall elimination, batch size reduction, server-side operations, client-side data fetching, redraw behavior, rendering operations, and JavaScript mini-configuration.

Each rule includes an impact rating. Critical issues are listed first, then low impact changes. The rules are illustrated with physical code examples that show the pattern against the modified version. When a partner agent updates a React component, it can target findings to these rules directly.

2. web-design-guidelines

This skill focuses on the user interface and the quality of the user experience. It includes more than 100 rules including accessibility, focus management, form behavior, animation, typing, graphics, performance, navigation, dark mode, touch interaction, and internationalization.

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

3. vercel-deploy-claimable

This capability connects the agent update loop to the implementation. It can package the current project into a tarball, automatically finding a supported framework package.jsonand create an application in Vercel. The script can see more than 40 frames and also supports static HTML sites.

The ability returns two URLs. Alternate site preview URL used. Another claim URL. A claim URL allows a user or team to paste a post into their Vercel account without sharing the information from the original site.

Installation and integration flow

Capabilities can be installed from the command line. The implementation declaration highlights a simple method:

npx skills i vercel-labs/agent-skills

This command downloads the file agent-skills repository and prepare it as a skills package.

Vercel and the surrounding ecosystem also provide add-skill A CLI designed to integrate capabilities into specific agents. A typical flow looks like this:

npx add-skill vercel-labs/agent-skills

add-skill scans installed encryption agents by looking in their configuration directory. For example, Claude Code uses a .claude of documents, and Cursor uses .cursor and directories under the home folder. The CLI then installs the selected capabilities in the correct skills folders for each tool.

You can call add-skill in non-participatory mode to control what is included. For example, you can only include React’s Claude Code capability at the global level:

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

You can also list available skills before installing them:

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

After installation, the capabilities reside in the agent-specific scripts such as ~/.claude/skills or .cursor/skills. The agent acquires these skills, learns them SKILL.mdthen it can route the appropriate user requests to the appropriate capability.

After deployment, the user interacts in natural language. For example, ‘Update this component for React performance issues’ or ‘Check this page for accessibility issues’. The agent checks the installed capabilities and usage react-best-practices or web-design-guidelines when appropriate.

Key Takeaways

• vercel-labs/agent-skills uses the Agent Capabilities specification, packaging each capability as a folder by itself SKILL.mdoptional scriptsagain referencesagents of different AI codes can use the same skill structure.
• The repository currently ships with 3 skills, react-best-practices with React and Next.js functionality, web-design-guidelines UI and UX reviews, and vercel-deploy-claimable by creating a proper shipment to Vercel.
• react-best-practices it includes more than 40 rules in 8 sections, organized by impact, and provides examples of practical code, allowing agents to conduct systematic performance reviews rather than assessments based on ad hoc information.
• web-design-guidelines provides more than 100 rules across accessibility, focus management, forms, animations, typing, graphics, functionality, navigation, dark mode, touch interaction, and internationalization, enabling systematic UI quality testing by agents.
• Abilities are entered with commands such as npx skills i vercel-labs/agent-skills again npx add-skill vercel-labs/agent-skillsand then received from a certain agent skills directory, which transforms best-of-breed libraries into reusable, version-controlled AI coding workflows.

Check it out GitHub Repo. Also, feel free to follow us Twitter and don’t forget to join our 100k+ ML SubReddit and Subscribe to Our newspaper. Wait! are you on telegram? now you can join us on telegram too.