vercel-labs/agent-skills: Vercel's rule sets for React, UI, docs and deploys, packaged as Agent Skills

Skills load automatically and the agent decides when they apply

A skill here is a package of instructions and scripts that follows the Agent Skills format published at agentskills.io. The whole collection installs with one command:

npx skills add vercel-labs/agent-skills

There is no separate activation step. Once installed, the skills are available to the agent, which picks them up when it detects a relevant task. The example prompts are plain requests such as Deploy my app, Review this React component for performance issues, and Help me optimize this Next.js page. The consequence of that design is that you do not call a skill by name the way you call a CLI command; whether the React rules are applied to a given change depends on the agent recognising the task. Each skill carries a list of trigger phrases, for example Review my UI or Check accessibility, which is the closest thing to a manual switch.

vercel-optimize reads Vercel metrics before it opens a single file

vercel-optimize audits a Vercel project for cost, performance, reliability, caching, function usage and billing opportunities. Its order of work is the distinctive part: it collects Vercel metrics first and then investigates only the routes and files those metrics point to, ending in a ranked cost and performance report. It is aimed at slow or expensive routes and at caching, ISR, middleware, image and build-minute issues. The limit is built into that approach. A project that is not deployed on Vercel produces no metrics for it to read, so the skill has nothing to start from, and files that the metrics do not point to are left out of the investigation. Teams self-hosting Next.js get no use from this skill.

react-best-practices ranks 40+ rules, with waterfalls and bundle size marked Critical

react-best-practices packages React and Next.js performance guidelines from Vercel Engineering as more than 40 rules in 8 categories, prioritised by impact. Eliminating waterfalls and bundle size optimization are rated Critical, server-side performance High, client-side data fetching Medium-High, re-render optimization and rendering performance Medium, and JavaScript micro-optimizations Low-Medium. The ranking matters for how an agent spends its effort: a review guided by this skill should flag a request waterfall before it worries about a micro-optimization. The skill is meant for writing new components or Next.js pages, implementing client or server-side data fetching, reviewing code for performance problems and cutting bundle size or load times. Every one of its categories is about performance, so it is not a substitute for a correctness or security review.

Two audit skills enforce Vercel's own design and writing rules

web-design-guidelines checks UI code against more than 100 rules covering accessibility, performance and UX. Its categories run from aria-labels, semantic HTML and keyboard handlers through visible focus states, form autocomplete and validation, prefers-reduced-motion, curly quotes and tabular-nums, image dimensions and lazy loading, virtualization and preconnect, URL-reflected state, color-scheme and theme-color meta, touch-action, and Intl.DateTimeFormat and Intl.NumberFormat. writing-guidelines audits docs and prose against the Vercel writing handbook with more than 80 rules: active voice and direct address, banned words such as easy, simple and quick, sentence-case headings, TypeScript-first code samples within 80-column and 25-line limits, no em dashes as punctuation, no hard-wrapped source, and AI workflow rules about disclosing AI use. These are Vercel's house conventions. A team with a different style guide will get findings that conflict with its own rules, for example on banned words or the em dash ban.

React Native, view transitions and composition each get a narrower rule set

react-native-guidelines is smaller than the web skills: 16 rules across 7 sections. Performance is rated Critical and covers FlashList, memoization and heavy computation; layout and animation are High, with safe areas, keyboard handling, Reanimated and gesture handling; images, state management, architecture and platform patterns are Medium, naming expo-image, Zustand, React Compiler and monorepo structure. react-view-transitions covers React's View Transition API: the ViewTransition component with enter, exit, update and share triggers, addTransitionType for directional animations, shared element transitions through the name prop, the Web Animations API, the transitionTypes prop on next/link, CSS recipes for fade, slide, scale and flip, and prefers-reduced-motion. composition-patterns targets components with many boolean props, steering toward compound components, lifted state and composed internals to avoid prop drilling.

deploy-to-vercel falls back to a temporary deployment when no login exists

deploy-to-vercel deploys applications and websites to Vercel in a fixed order of preference. On a linked project it prefers a git-push deploy. If that is not available it falls back to the Vercel CLI, and when no login is available at all it runs vercel deploy --temporary. A temporary deployment returns a claim URL so the user can keep it. This is convenient for a quick preview from a machine with no credentials, but it has a consequence worth knowing before you hand the skill to an agent: a request like Push this live can end in a deployment that belongs to nobody until it is claimed through that URL. The skill only targets Vercel; it offers nothing for other hosts.

Every change on main becomes an immutable release named by a commit hash

Each change to a skill on main publishes an immutable GitHub release containing an Agent Skills discovery index and one artifact per skill. Releases are named by commit hash rather than by version number, for example agent-skills-6ec269328bc400712ee225a173a14b6b29128df7 and agent-skills-1a2c79d4e6c4a2283dc2c614b6538cbe1ed5ca62, both from 2026-10-27; the last push was on 2026-10-28. Without semantic versions there is no signal of whether a release changed a rule or added a whole skill, so pinning means recording a hash and reading the diff yourself. The same artifacts can be built locally for self-hosting the index:

npm ci --ignore-scripts
node scripts/build-discovery-index.mjs https://example.com/skills

The repository root package, @vercel-labs/agent-skills, is private and depends only on yaml 2.9.0. GitHub detects no license for the repository, so reuse and redistribution terms have to be confirmed with Vercel before copying skills into another collection.

Editorial conclusion

agent-skills is a good fit for teams writing React, Next.js or React Native and deploying on Vercel who want their coding agent to apply Vercel Engineering's rule sets and handle deploys and cost audits. It is less useful off Vercel, where vercel-optimize and deploy-to-vercel have nothing to work with, and for teams whose writing or design conventions differ from Vercel's handbook. Before adopting it, check that your agent supports the Agent Skills format, decide whether temporary unauthenticated deployments are acceptable in your environment, and confirm licensing terms with Vercel, since GitHub detects no license for the repository.

Frequently asked questions

Official sources

1. Issues
2. Project website
3. README
4. Releases
5. vercel-labs/agent-skills on GitHub