skills.rest
Kevin-Liu-01
Kevin-Liu-01COMMUNITY
Explore all skills by this author →
Website𝕏@kevskgsGitHub

vercel-react-best-practices

Apply 69 prioritized rules to optimize React and Next.js performance.

16|3|Updated May 5, 2026
Search Tags:#performance#react#optimization#next.js#code-review#web-vitals#bundle-size
One-click install
npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill vercel-react-best-practices-kevin-liu-01
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/Kevin-Liu-01/Agent-Machines/tree/main/knowledge/skills/vercel-react-best-practices
Command: npx skills add https://github.com/Kevin-Liu-01/Agent-Machines --skill vercel-react-best-practices-kevin-liu-01

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This knowledge base codifies a prioritized set of rules to improve the performance of React and Next.js applications, helping teams reduce load times, improve user experience, and optimize bundle size.

Core Features & Use Cases

  • 69 rules across 8 categories provide a comprehensive checklist for writing and refactoring high-performance React components and pages.
  • Use during new component/page development, code reviews, performance audits, and bundle-size optimization to guide decisions and measure impact.
  • Example: apply rules to a Next.js page to reduce client rendering time and improve First Contentful Paint.

Quick Start

Apply the vercel-react-best-practices guide to begin optimizing a React/Next.js app's performance

Frequently Asked Questions about vercel-react-best-practices

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

FAQPage Schema
How do I optimize React and Next.js performance during a code review?▼

To optimize React and Next.js performance during a code review, apply a prioritized catalog of 69 rules across eight categories targeting bundles, rendering, and data fetching to improve load times and web vitals.

What are the best practices for reducing bundle size in Next.js applications?▼

Best practices for reducing Next.js bundle size involve applying rule-based optimizations during development and audits to minimize client rendering, which measurably improves First Contentful Paint and Time to Interactive.

How can I improve Core Web Vitals like CLS and TTI for my existing React codebase?▼

Improve Core Web Vitals like CLS and TTI by running performance audits on your existing React codebase using a structured rule catalog to identify and resolve server-side workload and rendering inefficiencies.

Does this React performance optimization approach work for both new and existing codebases?▼

Yes, this React performance optimization approach works for both new and existing codebases, applying its 69 rules seamlessly during new component development, refactoring, and comprehensive performance audits.

What is the most effective way to reduce client rendering time in Next.js?▼

The most effective way to reduce Next.js client rendering time is applying targeted rules to pages that optimize data fetching and server-side workloads, directly improving First Contentful Paint and bundle size.

Related Skills

Explore More Software Engineering Skills→
MisonLMisonL
8

performance-profiling

Collect Core Web Vitals and Lighthouse scores to measure web performance.

Community
Intermediate
billh93billh93

optimize

Diagnose and fix UI performance issues across loading, rendering, and animations.

Community
Advanced
achmfachmf

performance-profiling

Run Lighthouse audits to analyze Core Web Vitals and rendering bottlenecks.

Community
Intermediate
ihj04982ihj04982

prevent-hydration-mismatch-without-flickering

Inject a synchronous script to update the DOM before React hydration.

Community
Basic