Development
Plugin
vercel-nextjs-flow
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format.
Install
$ npx -y skills add vercel-labs/agent-skills --agent claude-code
Stats
31,571
Stars
2,764
Forks
Active
Maintenance
JavaScript
Language
29d ago
Last commit
9mo ago
Created
3mo ago
Added
Repo: vercel-labs/agent-skills
What's inside
Skill(9 skills)
/composition-patternsComposition patterns for building flexible, maintainable React components. Avoid boolean prop proliferation by using compound components, lifting state, and composing internals. These patterns make codebases easier for both humans and AI agents to work with as they scale./deploy-to-vercelDeploy applications and websites to Vercel. Use when the user requests deployment actions like "deploy my app", "deploy and give me the link", "push this live", or "create a preview deployment"./react-best-practicesReact 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,
README
Agent Skills
A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities.
Skills follow the Agent Skills format.
Available Skills
vercel-optimize
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:
- Optimizing a deployed Vercel project
- Reducing Vercel costs or function usage
- Investigating slow or expensive routes
- Finding caching, ISR, middleware, image, or build-minute issues
- Producing a ranked cost and performance report
react-best-practices
React and Next.js performance optimization guidelines from Vercel Engineering. Contains 40+ rules across 8 categories, prioritized by impact.
Use when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Optimizing bundle size or load times
Categories covered:
- Eliminating waterfalls (Critical)
- Bundle size optimization (Critical)
- Server-side performance (High)
- Client-side data fetching (Medium-High)
- Re-render optimization (Medium)
- Rendering performance (Medium)
- JavaScript micro-optimizations (Low-Medium)
web-design-guidelines
Review UI code for compliance with web interface best practices. Audits your code for 100+ rules covering accessibility, performance, and UX.
Use when:
- "Review my UI"
- "Check accessibility"
- "Audit design"
- "Review UX"
- "Check my site against best practices"
Categories covered:
- Accessibility (aria-labels, semantic HTML, keyboard handlers)
- Focus States (visible focus, focus-visible patterns)
- Forms (autocomplete, validation, error handling)
- Animation (prefers-reduced-motion, compositor-friendly transforms)
- Typography (curly quotes, ellipsis, tabular-nums)
- Images (dimensions, lazy loading, alt text)
- Performance (virtualization, layout thrashing, preconnect)
- Navigation & State (URL reflects state, deep-linking)
- Dark Mode & Theming (color-scheme, theme-color meta)
- Touch & Interaction (touch-action, tap-highlight)
- Locale & i18n (Intl.DateTimeFormat, Intl.NumberFormat)
writing-guidelines
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:
- "Review my docs"
- "Check writing style"
- "Audit prose"
- "Review docs voice and tone"
- "Check this page against the writing handbook"
Categories covered:
- Planning (content plan, content type, user-shaped titles)
- Voice & tone (active voice, direct address, banned words like
easy/simple/quick) - Tone by content type (tutorial, how-to, reference, conceptual, troubleshooting)
- Headings & structure (sentence case, descriptive subheadings, TL;DR opens)
- Lists (when to use, bold/description format)
- Code (language tags, TypeScript first,
<Steps/>, 80-col / 25-line limits) - Placeholders, units, & numbers (
snake_casetext, count-up numbers,64 KB/200 ms) - Typography (no em dashes as punctuation, curly quotes, ellipsis character, non-breaking spaces)
- Source formatting (no hard-wrap, no
---rules, blank line discipline) - Pricing & money pages (tables, uncompromising detail)
- AI workflow (accountability, enterprise models, plan first, disclose AI use)
- Review (PR description discipline, author accountability)
react-native-guidelines
React Native best practices optimized for AI agents. Contains 16 rules across 7 sections covering performance, architecture, and platform-specific patterns.
Use when:
- Building React Native or Expo apps
- Optimizing mobile performance
- Implementing animations or gestures
- Working with native modules or platform APIs
Categories covered:
- Performance (Critical) - FlashList, memoization, heavy computation
- Layout (High) - flex patterns, safe areas, keyboard handling
- Animation (High) - Reanimated, gesture handling
- Images (Medium) - expo-image, caching, lazy loading
- State Management (Medium) - Zustand patterns, React Compiler
- Architecture (Medium) - monorepo structure, imports
- Platform (Medium) - iOS/Android specific patterns
react-view-transitions
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:
- Adding page transitions or route animations
- Animating enter/exit of components
- Creating shared element transitions (list-to-detail morphing)
- Implementing directional (forward/back) navigation animations
- Integrating view transitions in Next.js App Router
- Animating list reorder or Suspense fallback reveals
Topics covered:
<ViewTransition>component (enter, exit, update, share triggers)addTransitionTypefor directional/context-specific animations- View Transition Classes and CSS pseudo-elements
- Shared element transitions with the
nameprop - JavaScript animations via Web Animations API
- Next.js
transitionTypesprop onnext/link - Ready-to-use CSS animation recipes (fade, slide, scale, flip)
- Accessibility (
prefers-reduced-motion)
composition-patterns
React composition patterns that scale. Helps avoid boolean prop proliferation through compound components, state lifting, and internal composition.
Use when:
- Refactoring components with many boolean props
- Building reusable component libraries
- Designing flexible APIs
- Reviewing component architecture
Patterns covered:
- Extracting compound components
- Lifting state to reduce props
- Composing internals for flexibility
- Avoiding prop drilling
vercel-deploy-claimable
Deploy applications and websites to Vercel instantly. Designed for use with claude.ai and Claude Desktop to enable deployments directly from conversations. Deployments are "claimable" - users can transfer ownership to their own Vercel account.
Use when:
- "Deploy my app"
- "Deploy this to production"
- "Push this live"
- "Deploy and give me the link"
Features:
- Auto-detects 40+ frameworks from
package.json - Returns preview URL (live site) and claim URL (transfer ownership)
- Handles static HTML projects automatically
- Excludes
node_modulesand.gitfrom uploads
How it works:
- Packages your project into a tarball
- Detects framework (Next.js, Vite, Astro, etc.)
- Uploads to deployment service
- Returns preview URL and claim URL
Output:
Deployment successful!
Preview URL: https://skill-deploy-abc123.vercel.app
Claim URL: https://vercel.com/claim-deployment?code=...
Installation
npx skills add vercel-labs/agent-skills
Usage
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
Discovery index
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
Skill Structure
Each skill contains:
SKILL.md- Instructions for the agentscripts/- Helper scripts for automation (optional)references/- Supporting documentation (optional)
License
MIT
File tree
The FLOW.md
Read what you run.
This file reads your intent and auto-invokes the right skill at the right moment. You just prompt.
flow.vercel-nextjs-flow.FLOW.md
# 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.
FAQ
vercel-nextjs-flow is a Claude Code plugin with 9 hand-picked skills for development work, indexed on Flowy. Install 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. Request auto-invocation to have Flowy route them as you prompt. Free and open source.
- What is vercel-nextjs-flow?
- A collection of skills for AI coding agents. Skills are packaged instructions and scripts that extend agent capabilities. Skills follow the Agent Skills format.
- How do I install vercel-nextjs-flow?
- Run these in Claude Code: npx -y skills add vercel-labs/agent-skills --agent claude-code. Then prompt normally.
- Does vercel-nextjs-flow auto-invoke its skills?
- Not yet. It is indexed on Flowy as a plain plugin. Request auto-invocation on its page and Flowy will route its skills for you as you prompt.
- Is vercel-nextjs-flow free?
- Yes. Flowy is free and open source, with nothing gated. You can read every skill in full before you install.
Is this plugin yours?
Claim it with GitHubSubmit a pluginPromote it