vercel-react-best-practices
Vercel React Best Practices
Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 57 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.
When to Apply
Reference these guidelines when:
- Writing new React components or Next.js pages
- Implementing data fetching (client or server-side)
- Reviewing code for performance issues
- Refactoring existing React/Next.js code
- Optimizing bundle size or load times
Rule Categories by Priority
| Priority | Category | Impact | Prefix |
|---|---|---|---|
| 1 | Eliminating Waterfalls | CRITICAL | async- |
| 2 | Bundle Size Optimization | CRITICAL | bundle- |
More from 0xkynz/codekit
uiux-design-expert
UI/UX design expert specializing in modern design systems, visual styles, accessibility patterns, and CSS implementation. Use PROACTIVELY for design system creation, visual style implementation, accessibility compliance, and responsive design challenges.
16react-native-expo
React Native + Expo development expert for managed workflow, Expo Router, TypeScript, and mobile best practices. Use PROACTIVELY for Expo projects and rapid mobile development.
12data-visualization
Create charts, graphs, and visualizations from data. Use when the user needs to visualize data, create charts, or generate reports with graphics.
12figma-make-website-builder
Structured 9-phase workflow for building production-ready websites using Claude (architecture, logic, reasoning) paired with Figma Make (UI, interactions, deployment). Use when planning, designing, or building a website with Figma Make.
11git-expert
Git workflow expert for merge conflicts, branching strategies, history rewriting, repository recovery, and collaboration patterns. Use PROACTIVELY for complex git issues.
7pdf-processing
Extract text and tables from PDF files, fill forms, merge documents. Use when working with PDF files or when the user mentions PDFs, forms, or document extraction.
7