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.
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.
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
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)
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)
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 agent
scripts/ - Helper scripts for automation (optional)
