vercel-labsOfficial·9 Agent Skills Included

agent-skills

Optimize, review, and deploy React and Vercel projects with AI

Audits React, Next.js, and React Native code against 100+ performance rules and deploys apps to Vercel directly from chat. Eliminates manual code reviews, slow page loads, bloated bundles, and confusing Vercel billing with metric-backed recommendations. Guides your AI agent through UI accessibility checks, writing reviews, view transition animations, and one-command deployments.

30,694|2,733

↗

npx skills add vercel-labs/agent-skills --all -g -y

Available:

Tells AI coding agents how the skills in this repository are structured, when to load each skill, and how to write scripts and SKILL.md files that stay context-efficient.

All Skills in This Repository (9)

Pure Emerald Level Indicators

📦 In Repo

vercel-labs

deploy-to-vercel

Deploy projects to Vercel with preview deployments and git linking.

web-design-guidelines

Validate UI code against the latest Web Interface Guidelines.

vercel-cli-with-tokens

Authenticate to the Vercel CLI using tokens for deployments and environment management.

vercel-composition-patterns

Replace boolean props with composition in React component APIs.

vercel-react-best-practices

Apply React and Next.js performance guidelines to optimize code paths and reduce bundle size.

vercel-react-view-transitions

Apply View Transition API state and route transitions in React.

vercel-react-native-skills

Standardize React Native development with performance-focused guidelines for RN and Expo projects.

writing-guidelines

Review documentation and prose files against the Vercel writing handbook rules.

vercel-optimize

Audits deployed Vercel projects for cost and performance using observability metrics and deterministic gates.

Official

Advanced

Frequently Asked Questions

FAQPage Schema

How to install agent-skills?▼

Run `npx skills add vercel-labs/agent-skills --all -g -y` in your terminal to install every skill in this suite globally.

How to deploy my app to Vercel with AI?▼

Just ask your agent to deploy your app. The deploy-to-vercel skill auto-detects your framework, packages the project, and returns a live preview URL plus a claim link.

How to reduce my Vercel bill with AI?▼

The vercel-optimize skill pulls your real Vercel metrics first, then investigates only the slow or expensive routes and produces a ranked cost and performance report.

Can AI review my React code for performance issues?▼

Yes. The react-best-practices skill checks your components against 40+ Vercel Engineering rules covering waterfalls, bundle size, re-renders, and server-side performance.

Does agent-skills work with Claude Code and Cursor?▼

Yes. All skills follow the open Agent Skills format and run in Claude Code, Cursor, Codex, and other compatible agents.