Vercel Agent Skills

Install

npx skills add vercel-labs/agent-skills

This is third-party code. Review the repository files before installing.

What it does

A skill collection from Vercel. react-best-practices holds React and Next.js performance rules ranked by impact: request waterfalls, bundle size, server rendering and re-renders. web-design-guidelines audits UI against 100+ rules on accessibility, forms, animation and typography, and writing-guidelines reviews docs prose. There are also skills for React Native, View Transitions, composition patterns, auditing a Vercel project and claimable deploys.

Who it is for. Frontend developers on React, Next.js and React Native, including teams deploying to Vercel.

Example request

Check this Next.js page for request waterfalls and bundle bloat

Limitations

The deploy skill packages the project into a tarball and uploads it to a deployment service, excluding node_modules and .git. vercel-optimize relies on your project's Vercel metrics. The remaining skills are rule sets and do not replace profiling.

How to disable. Remove unneeded skill folders from your agent's skills directory.

Security check

• The deploy skill uploads project code to an external service
• Some skills include helper scripts

README in short

The repository contains Vercel's skills in Agent Skills format. For each skill the README explains its purpose, when to use it and the rule categories covered. Install with npx skills add, after which the agent uses skills automatically for matching tasks. Every change publishes a release with a discovery index. MIT licensed.

SKILL.md

---
name: vercel-react-best-practices
description: React and Next.js performance optimization guidelines from Vercel Engineering. This skill should be used when writing, reviewing, or refactoring React/Next.js code to ensure optimal performance patterns. Triggers on tasks involving React components, Next.js pages, data fetching, bundle optimization, or performance improvements.
license: MIT
metadata:
  author: vercel
  version: "1.0.0"
---

# Vercel React Best Practices

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 70 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

## When to Apply

Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Eliminating Waterfalls | CRITICAL | `async-` |
| 2 | Bundle Size Optimization | CRITICAL | `bundle-` |
| 3 | Server-Side Performance | HIGH | `server-` |
| 4 | Client-Side Data Fetching | MEDIUM-HIGH | `client-` |
| 5 | Re-render Optimization | MEDIUM | `rerender-` |
| 6 | Rendering Performance | MEDIUM | `rendering-` |
| 7 | JavaScript Performance | LOW-MEDIUM | `js-` |
| 8 | Advanced Patterns | LOW | `advanced-` |

## Quick Reference

### 1. Eliminating Waterfalls (CRITICAL)

- `async-cheap-condition-before-await` - Check cheap sync conditions before awaiting flags or remote values
- `async-defer-await` - Move await into branches where actually used
- `async-parallel` - Use Promise.all() for independent operations
- `async-dependencies` - Use better-all for partial dependencies
- `async-api-routes` - Start promises early, await late in API routes
- `async-suspense-boundaries` - Use Suspense to stream content

### 2. Bundle Size Optimization (CRITICAL)

- `bundle-barrel-imports` - Import directly, avoid barrel files
- `bundle-analyzable-paths` - Prefer statically analyzable import and file-system paths to avoid broad bundles and traces
- `bundle-dynamic-imports` - Use next/dynamic for heavy components
- `bundle-defer-third-party` - Load analytics/logging after hydration
- `bundle-conditional` - Load modules only when feature is activated
- `bundle-preload` - Preload on hover/focus for perceived speed

### 3. Server-Side Performance (HIGH)

- `server-auth-actions` - Authenticate server actions like API routes
- `server-cache-react` - Use React.cache() for per-request deduplication
- `server-cache-lru` - Use LRU cache for cross-request caching

Related