Helps you build and ship Next.js and React pages with better performance and cleaner component structure, and can deploy them to Vercel. Covers React Native and Expo apps too.
Claude Code
$ npx -y skills add vercel-labs/agent-skills --agent claude-code
Codex
$ npx skills add vercel-labs/agent-skills -a codex
Cursor
$ npx skills add vercel-labs/agent-skills -a cursor
Gemini CLI
$ npx skills add vercel-labs/agent-skills -a gemini-cli
GitHub Copilot
$ npx skills add vercel-labs/agent-skills -a github-copilot
OpenCode
$ npx skills add vercel-labs/agent-skills -a opencode
Windsurf
$ npx skills add vercel-labs/agent-skills -a windsurf
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.
Skills follow the Agent Skills format.
Audits a Vercel project for cost, performance, reliability, caching, function usage, and billing opportunities. It collects Vercel metrics first, then investigates only the routes and files those metrics point to.
Use when:
React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.
Use when:
Categories covered:
Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.
Use when:
Categories covered:
Review docs and prose for compliance with the Vercel writing handbook. Audits your pages for 80+ rules covering voice, structure, content types, code samples, typography, and AI workflow.
Use when:
Categories covered:
easy/simple/quick)<Steps/>, 80-col / 25-line limits)snake_case text, count-up numbers, 64 KB/200 ms)--- rules, blank line discipline)React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.
Use when:
Categories covered:
Implement smooth, native-feeling animations using React's View Transition API. Covers the <ViewTransition> component, addTransitionType, transition types, and Next.js integration including the transitionTypes prop on next/link.
Use when:
Topics covered:
<ViewTransition> component (enter, exit, update, share triggers)addTransitionType for directional/context-specific animationsname proptransitionTypes prop on next/linkprefers-reduced-motion)React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.
Use when:
Patterns covered:
Deploy applications and websites to Vercel. Prefers git-push deploys on a linked project, falls back to the Vercel CLI, and uses vercel deploy --temporary when no login is available. Temporary deployments return a claim URL so users can keep them.
Use when:
npx skills add vercel-labs/agent-skills
Skills are automatically available once installed. The agent will use them when relevant tasks are detected.
Examples:
Deploy my app
Review this React component for performance issues
Help me optimize this Next.js page
Every change to a skill on main publishes an immutable GitHub release with
an Agent Skills discovery index and one artifact per skill. Build the same
artifacts locally with:
npm ci --ignore-scripts
node scripts/build-discovery-index.mjs https://example.com/skills
Each skill contains:
SKILL.md - Instructions for the agentscripts/ - Helper scripts for automation (optional)references/ - Supporting documentation (optional)MIT
Stars on GitHub
The FLOW.md
This file reads your intent and auto-invokes the right skill at the right moment. You just prompt.
# FLOW.md: Next.js Production Quality > Take a Next.js UI task from first keystroke to a fast, accessible, deployed page, firing the right Vercel skill at each phase. > Skills vendored from Vercel (MIT). See ATTRIBUTION.md. Routing by Flowy. ## Phases 1. **Build**. Entry: writing or refactoring React/Next.js UI. Gate: code follows the performance and composition rules (named rule files cited). 2. **Review**. Entry: a buildable UI surface exists. Gate: Web Interface Guidelines findings list produced (file:line) and addressed. 3. **Optimize**. Entry: about to call the work done. Gate: signals.json collected and a ranked, metric-backed recommendation report exists. 4. **Deploy**. Entry: optimize gate passed and a ship is requested. Gate: a live Vercel URL is returned. ## Routing ``` USER MESSAGE │ ├─ INTAKE: first read the task, classify intent, pick the phase below ────────── │ │ │ ├─ new request mixes goals? -> split into build / review / optimize / deploy, route each │ └─ unsure which phase? -> ask one clarifying question, do not guess │ ├─ BUILD: writing, generating, or refactoring React/Next.js code ─────────────── │ │ │ ├─ component / page / data-fetch / bundle / re-render work? │ │ -> invoke react-best-practices │ │ Gate: changed code cites the rule files it satisfies (e.g. async-parallel, bundle-barrel-imports). │ └─ boolean-prop sprawl, compound components, or reusable API design? │ -> invoke composition-patterns │ Gate: components compose via children/context, not boolean modes (rule file named). │ ├─ REVIEW: a buildable UI surface exists, check design + accessibility ────────── │ │ │ └─ audit UI, UX, or accessibility before shipping? │ -> invoke web-design-guidelines │ Gate: a file:line findings list against the Web Interface Guidelines, each item resolved or waived. │ ├─ DONE-CHECK: about to claim the UI is done / ready to ship ──────────────────── │ │ │ └─ verify performance + cost before declaring complete? │ -> invoke vercel-optimize │ Gate: signals.json exists and a ranked recommendation report (Core Web Vitals + cost) is produced. │ ├─ DEPLOY: optimize gate passed and a ship is requested ───────────────────────── │ │ │ ├─ ship a preview or push live? │ │ -> invoke deploy-to-vercel │ │ Gate: a live Vercel URL is returned (preview by default, production only if asked). │ └─ deploy needs token-based / non-interactive auth? -> note it, deploy-to-vercel still owns the ship. Gate: live URL returned. │ ├─ ADVISE-ONLY: user is asking a question, not requesting work ────────────────── │ └─ answer from the relevant skill's rules; do not edit files. Gate: none (no artifact produced). │ ├─ SCOPE CHANGE: the brief changed mid-flow ───────────────────────────────────── │ └─ re-enter the earliest affected phase; prior downstream gates are void until re-passed. │ ├─ BLOCKED: waiting on an external dependency (token, deploy access, review sign-off) │ └─ park the task, record the resume trigger, surface the blocker; do not fake the gate. │ ├─ REVIEW-LOOP: review or optimize feedback came back ─────────────────────────── │ └─ re-verify the failing gate only, then re-run its skill; do not skip ahead. │ └─ DEFAULT: nothing above fits ───────────────────────────────────────────────── └─ Routing: none. State why no branch matched and ask for the missing detail. ``` ## Priority on collision 1. Blocked (a parked dependency wins over any forward motion). 2. Scope changed (re-enter the earliest affected phase before continuing). 3. Done-check (verify before any claim of complete or deploy). 4. Lifecycle order (build, then review, then optimize, then deploy). 5. Advisory (answer-only beats picking a work branch when the user only asked). 6. Default (no match). ## You are rationalizing if you think… - "It is a small component, the perf rules are overkill." A render waterfall or a barrel import is a small component's most common bug. Invoke `react-best-practices` and name the rule. - "The design looks fine, skip the a11y review." Looks-fine is not keyboard-navigable or contrast-checked. Run `web-design-guidelines` and produce the file:line list before shipping. - "I will eyeball performance, no need to collect metrics." `vercel-optimize` is observability-first: without signals.json you are guessing, and guesses are what blew the bill. Collect first. - "Just deploy to production to test it." Default is a preview deploy. Production only on explicit request; ship preview, get the URL, then verify. ## Additional skills (also available) The full upstream set is vendored in this Flow. The routing above sequences the core lifecycle; these additional skills are available and fire when their trigger matches. See ATTRIBUTION.md for the complete list and license. ### general - `react-native-skills` - `react-view-transitions`: Guide for implementing smooth, native-feeling animations using React's View Transition API (`<ViewTransition>` component, `addTransitionType`, and CSS view transition pseudo-elements). Use this skill whenever the user wants to add page transitions, animate route changes, create shared element animations, animate enter/exit of components, animate list reorder, implement directional (forward/back) navigation animations, or integrate view transitions in Next.js. Also use when the user mentions view transitions, `startViewTransition`, `ViewTransition`, transition types, or asks about animating between UI states in React without third-party animation libraries. - `vercel-cli-with-tokens`: Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login, e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel". - `writing-guidelines`: Review docs/prose for Writing Guidelines compliance. Use when asked to "review my docs", "check writing style", "audit prose", "review docs voice and tone", or "check this page against the writing handbook". ## Attribution - `react-best-practices` by **Vercel** (https://github.com/vercel-labs/agent-skills), MIT. - `composition-patterns` by **Vercel** (https://github.com/vercel-labs/agent-skills), MIT. - `web-design-guidelines` by **Vercel** (https://github.com/vercel-labs/agent-skills), MIT. - `vercel-optimize` by **Vercel** (https://github.com/vercel-labs/agent-skills), MIT. - `deploy-to-vercel` by **Vercel** (https://github.com/vercel-labs/agent-skills), MIT.
See 12 vercel-nextjs-flow alternatives
A development methodology for coding agents that makes the agent brainstorm before building, follow plans, run parallel work and finish branches in a disciplined way. You get fewer skipped steps and more consistent results from your coding assistant.
@obraHelps you take a change from a rough idea or bug report through to a tested, reviewed result, with each step handled by a focused skill. Its skills cover pinning down domain terms, designing module interfaces, diagnosing hard bugs, and reviewing changes against your repo's coding standards.
@mattpocockGives your coding agent a planning, testing and review routine to follow on every task. It plans before building, checks changes with tests, has a fresh reviewer look for regressions, and saves repeated wins as reusable skills.
@affaan-mDeveloper tools for working on the React codebase itself. Provides skills for extracting error messages, managing and debugging feature flags across release channels, running Flow type checks, and fixing lint and formatting issues before committing.
@facebookInstall it with the command on its page. It includes composition-patterns, deploy-to-vercel, react-best-practices. Its skills do not fire on their own yet. Free and open source.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it