Vercel React Best Practices

This is Vercel's internal performance playbook translated into a Claude skill. It covers 45 rules across eight categories, from eliminating request waterfalls and optimizing bundle size to managing re-renders and server-side caching patterns. The rules are prioritized by impact, so Claude knows to flag barrel imports and missing Promise.all before nitpicking loop optimizations. Use it when writing or reviewing React and Next.js code where performance actually matters. The specificity is the selling point here: instead of vague advice about memoization, you get concrete patterns like using React.cache for per-request deduplication or next/dynamic for code splitting heavy components.

skills.sh installs: 178
GitHub stars: 1.4K
last updated: Jun 9, 2026

View on GitHub

Install

$ npx -y skills add cloudai-x/claude-workflow-v2 --skill vercel-react-best-practices --agent claude-code

Installs into .claude/skills of the current project.

Files

Vercel React Best Practices

When to Load

Trigger: React or Next.js development, component writing, data fetching patterns, bundle optimization
Skip: Project does not use React or Next.js

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