Official Skills for Next.js, React, and Vercel Deployments

Official Skills for Next.js, React, and Vercel Deployments is Vercel's official collection of agent skills — packaged, on-demand instructions that teach AI coding agents how to build, optimize, and ship modern web apps the way Vercel's own engineers do. Instead of relying on stale or generic training data, your agent follows Vercel Engineering's current guidance for Next.js, React, React Native, accessibility, and deployment.

What is it?

These are Agent Skills published by vercel-labs and used by tens of thousands of developers (27k+ GitHub stars). Each skill is a focused set of rules and scripts your AI agent loads only when a relevant task appears — so when you ask it to "deploy this to Vercel" or "review my UI for accessibility," it applies the right, official playbook instead of guessing.

What's included

The collection bundles eight production-grade skills:

• deploy-to-vercel — Ship an app to Vercel correctly, from project setup to a live deployment.
• vercel-cli-with-tokens — Drive the Vercel CLI with access tokens for CI, automation, and headless/agent deploys.
• vercel-optimize — Audit a deployed Vercel project for cost, performance, reliability, caching, function usage, and billing — it collects real Vercel metrics first, then investigates only the routes those metrics flag and produces a ranked report.
• react-best-practices — React and Next.js performance guidelines from Vercel Engineering: 40+ rules across eight categories, including eliminating request waterfalls, bundle-size optimization, server-side performance, client-side data fetching, and re-render optimization.
• web-design-guidelines — Review UI code against 100+ rules covering accessibility, focus states, forms, animation, typography, images, performance, navigation and state, dark mode, touch interaction, and i18n.
• react-native-skills — React Native and Expo best practices: 16 rules across performance, layout, animation, images, state management, architecture, and iOS/Android-specific patterns.
• react-view-transitions — Implement smooth, native-feeling animations with React's View Transition API and the <ViewTransition> component, including Next.js App Router integration via the transitionTypes prop on next/link.
• composition-patterns — React composition patterns that scale — compound components, state lifting, and internal composition to avoid boolean-prop proliferation.

How it works

The skills follow the open Agent Skills format and install with a single command:

npx skills add vercel-labs/agent-skills

Once installed, they are available automatically — your agent detects the relevant task (a deploy, a performance review, a UI audit) and applies the matching skill. They work across Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and 40+ other agents.

Who it's for

Front-end and full-stack developers building with Next.js, React, React Native, or Expo who use an AI coding agent and want output that matches Vercel's official best practices — not guesses from outdated tutorials.

What you can do

• Deploy a Next.js or React app to Vercel and wire up CI with the Vercel CLI.
• Get a ranked cost-and-performance report for a live Vercel project and fix the routes that actually matter.
• Catch React and Next.js performance issues — request waterfalls, oversized bundles, needless re-renders — before they ship.
• Audit any UI for accessibility, focus, forms, and UX against 100+ checks.
• Add polished page and shared-element transitions with the View Transition API.
• Build faster, more idiomatic React Native and Expo apps.

Why it matters

Most language models were trained on years of mixed-quality web tutorials, deprecated Next.js patterns, and accessibility myths. These skills replace that noise with Vercel Engineering's authoritative, current rules — so your agent ships apps that are fast, accessible, and deploy cleanly on the first try.

Install the skills

Add the whole collection to your AI coding agent with one command:

npx skills add vercel-labs/agent-skills

This works with Claude Code, Cursor, Codex, Windsurf, GitHub Copilot, and 40+ other agents.

Use them

The skills load automatically when relevant. Just ask, for example:

Deploy this app to Vercel
Review my UI for accessibility
Optimize my Vercel project's cost and performance