# agent-skills

> Installable skills that teach coding agents Vercel's React, UI and deploy practices

- Repository: https://github.com/vercel-labs/agent-skills
- Category: Agent skills & plugins
- Stars: 32,840 · Forks: 2,872 · Language: JavaScript · License: not stated
- Experience: Beginner friendly
- Page: https://ir.adyog.com/repos/vercel-labs/agent-skills/

AI coding agents often write working code that ignores framework-specific performance and design habits. This repo packages that knowledge as skills: folders holding a SKILL.md with instructions, plus optional scripts and reference docs. They follow the open Agent Skills format.

Once installed, the agent picks a skill when your task matches it. Ask it to review a React component and it can apply the React best-practices rules. Ask it to deploy and it can package your project and upload it to Vercel. The README lists eight skills, including vercel-optimize, react-best-practices, web-design-guidelines, writing-guidelines, react-native-guidelines, react-view-transitions, composition-patterns and vercel-deploy-claimable.

Unlike a general style guide, the rules are ranked by impact in places, such as critical for removing request waterfalls and cutting bundle size. The vercel-optimize skill collects Vercel metrics first, then looks only at the routes and files those metrics point to.

## What it does

- **React and Next.js performance rules**: 40+ rules in 8 categories, ranked by impact. They cover waterfalls, bundle size, server-side performance, re-renders and rendering.
- **UI and writing audits**: web-design-guidelines checks code against 100+ rules on accessibility, forms, animation and more. writing-guidelines checks docs against 80+ rules from the Vercel writing handbook.
- **Vercel project audit**: vercel-optimize looks at cost, caching, function usage and build minutes, then produces a ranked cost and performance report.
- **Claimable deploys**: vercel-deploy-claimable detects 40+ frameworks, uploads your project, and returns a preview URL and a claim URL to transfer ownership to your own Vercel account.
- **React Native and view transitions**: react-native-guidelines has 16 rules on performance, layout and animation. react-view-transitions covers React's ViewTransition component and Next.js integration.

## What you could build

- Review a React component for performance problems before merging it.
- Audit a UI for accessibility, focus states and form handling issues.
- Find caching and function-usage costs in a deployed Vercel project.
- Add page or list-to-detail transitions to a Next.js App Router app.
- Deploy a project from a conversation and hand over a claim link.

## Who it's for

Developers who use an AI coding agent on React, Next.js or Vercel projects; you should know how your agent loads skills.

## Get started

Run the install command in your project, then ask your agent for a matching task, such as reviewing a React component or deploying your app. The agent uses a skill when it detects a relevant task.

```
npx skills add vercel-labs/agent-skills
```

Tags: agent-skills, react, nextjs, vercel, coding-agents