skills.rest
YeomanYe
YeomanYeCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Apply 69 React/Next.js performance rules across 8 categories.

Updated May 12, 2026
Search Tags:#automation#performance#react#next.js#best-practices#web-vitals#code-refactor
One-click install
npx skills add https://github.com/YeomanYe/skills --skill vercel-react-best-practices-yeomanye
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/YeomanYe/skills/tree/main/vercel-react-best-practices
Command: npx skills add https://github.com/YeomanYe/skills --skill vercel-react-best-practices-yeomanye

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

The skill captures and enforces a curated set of React and Next.js performance guidelines developed by Vercel Engineering to help teams write faster, more reliable UI code and avoid common bottlenecks.

Core Features & Use Cases

It provides a comprehensive catalog of rules (69 total) across 8 categories, each with practical explanations, examples, and actionable patterns to guide automated refactoring, code generation, and code reviews. The skill is intended for engineers who are designing, auditing, or optimizing React/Next.js codebases, including components, pages, data fetching, and bundle optimization scenarios.

Quick Start

Review a React/Next.js project and apply the 69 rules across 8 categories to optimize performance.

Frequently Asked Questions about vercel-react-best-practices

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the best practices for optimizing React and Next.js bundle size and web vitals?▼

Optimizing React and Next.js performance involves applying a curated catalog of 69 rules across 8 categories, targeting bundle size reduction, data fetching efficiency, and web vitals improvements to eliminate common UI bottlenecks.

How do I refactor React components to improve Next.js page performance?▼

Refactoring React components for Next.js performance requires applying structured guidelines during code generation and reviews, utilizing actionable patterns to resolve data fetching inefficiencies and optimize page rendering.

Does this React performance optimization approach work with existing Next.js codebases?▼

Yes, this approach is designed for engineers auditing or optimizing existing React and Next.js codebases, providing structured frontmatter rules to guide automated refactoring of components, pages, and bundle configurations.

What's the best way to automate React code reviews for performance anti-patterns?▼

Automating React code reviews for performance anti-patterns is best achieved by enforcing a comprehensive set of Vercel Engineering guidelines, using a structured catalog of rules to identify and resolve bottlenecks during development.

When do I need to apply Next.js data fetching and bundle optimization rules?▼

You need to apply Next.js data fetching and bundle optimization rules when designing, auditing, or optimizing UI code, specifically to prevent performance bottlenecks in components, pages, and data fetching processes.

Why does my React application suffer from poor web vitals and how can I fix it?▼

Poor web vitals in React applications often stem from unoptimized data fetching and bundle bloat, which you can fix by systematically applying 69 structured performance rules across 8 categories to refactor your codebase.

Related Skills

Explore More Software Engineering Skills→
jota-batutajota-batuta

performance-testing

Establish performance baselines and budgets for APIs and web applications.

Community
Advanced
FEMADOXFEMADOX
4

vercel-react-best-practices

Enforce 69 React/Next.js performance rules across 8 categories.

Community
Advanced
lildibbblildibbb

performance-optimization

Analyze web application performance with Lighthouse and Web Vitals.

Community
Advanced
thesammykinsthesammykins

vercel-react-best-practices

Identify performance bottlenecks in React/Next.js projects across rendering, data fetching, and bundle size.

Community
Advanced