vercel-labs/agent-skills

A structured repository for creating and maintaining React Best Practices optimized for agents and LLMs.

Summary

vercel-labs/agent-skills is a collection of packaged instructions and helper scripts that extend AI coding agents with Vercel-specific capabilities. Skills follow the open Agent Skills format and cover areas like Vercel cost optimization, React and Next.js performance, UI design review, writing guidelines, and one-click deployments. The repository is published under the MIT license.

What it is useful for

The bundle is useful when an engineer wants an AI agent to perform structured, opinionated reviews and tasks tied to the Vercel ecosystem. Concrete examples documented in the README include:

• vercel-optimize: pulls Vercel metrics, then investigates only the routes and files those metrics point to, producing a ranked cost and performance report.
• react-best-practices: applies 40+ rules across categories like eliminating waterfalls, bundle size, and server-side performance when writing or reviewing components.
• web-design-guidelines: audits UI code against 100+ rules covering accessibility, focus states, forms, animation (including prefers-reduced-motion), images, and locale handling.
• writing-guidelines: checks docs against 80+ rules for voice, structure, code samples, typography, and a banned-words list such as easy, simple, and quick.
• react-native-guidelines: 16 rules for performance (e.g., FlashList, memoization), layout, animation with Reanimated, and platform-specific patterns.
• react-view-transitions: guidance for the React <ViewTransition> component, addTransitionType, shared element transitions, and the transitionTypes prop on next/link.
• composition-patterns: refactoring advice for components overloaded with boolean props, using compound components and state lifting.
• vercel-deploy-claimable: packages a project into a tarball, auto-detects 40+ frameworks from package.json, and returns a preview URL plus a claim URL for transferring ownership to a Vercel account.

How engineers can use it

The README documents one install command:

npx skills add vercel-labs/agent-skills

After installation, the skills are automatically available; the agent invokes a skill when it detects a matching task. Trigger phrases shown in the README include "Deploy my app", "Review this React component for performance issues", and "Help me optimize this Next.js page". Each skill ships as a SKILL.md file, with optional scripts/ and references/ folders; engineers who maintain agents can browse the repo to see the exact rules and scripts the agent will follow.

For local development of the discovery index, the README documents:

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

Documented limitations: the bundle is Vercel-centric. vercel-optimize requires a deployed Vercel project to gather metrics, and vercel-deploy-claimable produces a claimable deployment that must be transferred to a personal Vercel account before it is considered owned. Setup beyond the npx command and the discovery-index build is not described in the README, so users should consult that file for agent-specific configuration.