vercel▌

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

Expert guidance for deploying Next.js applications to Vercel with environment and runtime optimization. \n \n Covers environment variable configuration across dev, preview, and production environments, with emphasis on preventing secrets exposure via NEXT_PUBLIC_ \n Distinguishes between Edge and Serverless function runtimes, helping you choose the right execution model for API routes and functions \n Addresses build optimization strategies to reduce cold starts, bundle size, and deployment time

45 performance optimization rules for React and Next.js, organized by impact and category. \n \n Covers 8 rule categories from eliminating waterfalls and bundle optimization (critical) through JavaScript performance and advanced patterns (low priority) \n Each rule includes explanation, before/after code examples, and context to guide automated refactoring and code generation \n Prioritized by impact: waterfalls and bundle size are critical; server-side performance and re-render optimization are

45 performance rules for React and Next.js, organized by impact from waterfalls and bundle optimization down to advanced patterns. \n \n Covers 8 rule categories prioritized by impact: eliminating waterfalls (Promise.all, Suspense), bundle size (direct imports, dynamic loading), server-side caching, client-side deduplication, re-render optimization, rendering performance, JavaScript efficiency, and advanced patterns \n Each rule includes explanation, incorrect and correct code examples, and cont

React composition patterns for scaling components and avoiding boolean prop proliferation. \n \n Covers four priority categories: component architecture, state management, implementation patterns, and React 19 APIs, each with specific rules and code examples \n Includes 10+ named patterns addressing compound components, context providers, state lifting, and explicit variants \n Designed for refactoring bloated components, building reusable libraries, and reviewing component architecture decision

Composition 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 and manage projects on Vercel using the CLI with token-based authentication, without relying on vercel login.

Headless Chrome browser automation inside ephemeral Vercel Sandbox microVMs for any Vercel-deployed framework. \n \n Spins up isolated Linux VMs on demand to run agent-browser commands, then shuts down automatically; works with Next.js, SvelteKit, Nuxt, Remix, Astro, and other Vercel frameworks \n Supports multi-step workflows with persistent browser sessions across sequential commands (navigation, form filling, screenshots, accessibility snapshots) \n Includes sandbox snapshots for sub-second s

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

Use this skill when: