skills.rest
leexb-wp21-prog
leexb-wp21-progCOMMUNITY
Explore all skills by this author →
GitHub

vercel-react-best-practices

Review React and Next.js code for performance anti-patterns.

Updated Apr 28, 2026
Search Tags:#code review#react#data fetching#bundle size#next.js#performance optimization#re-render
One-click install
npx skills add https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk --skill vercel-react-best-practices-leexb-wp21-prog
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk/tree/main/.cursor/skills/skills-main/skills-main/skills/react-best-practices
Command: npx skills add https://github.com/leexb-wp21-prog/Azure-Ticket-Helpdesk --skill vercel-react-best-practices-leexb-wp21-prog

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It addresses slow React and Next.js performance caused by inefficient data fetching, waterfall requests, bloated bundles, and unnecessary re-renders.

Core Features & Use Cases

  • Performance-first rules across 8 impact areas: covers eliminating waterfalls, bundle size optimization, server-side performance, client-side data fetching, re-render optimization, rendering performance, JavaScript performance, and advanced patterns.
  • Code review and refactor guidance: use the rules to review existing components and pages or to guide automated refactoring and performance improvements.
  • Real-world scenarios: improves performance when building Next.js pages that fetch data, optimizing load time and routing, or reducing JavaScript shipped to the browser.

Quick Start

Apply the vercel-react-best-practices skill to your React or Next.js codebase to identify likely performance bottlenecks and rewrite them using the prioritized Vercel rules.

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 by eliminating data fetching waterfalls?▼

To optimize React data fetching performance, apply the vercel-react-best-practices rules to identify waterfall requests and rewrite them using prioritized Vercel patterns for faster load times and better responsiveness.

What causes unnecessary re-renders in React components and how can I fix them?▼

Unnecessary re-renders in React components are caused by inefficient data fetching and rendering patterns. Use the vercel-react-best-practices skill to review existing pages and rewrite them using prioritized Vercel rules.

How do I reduce JavaScript bundle size when building Next.js pages?▼

To reduce JavaScript bundle size in Next.js, apply the vercel-react-best-practices skill to identify bloated bundle anti-patterns and refactor them using Vercel's bundle size optimization rules.

Does this approach work for both client-side data fetching and server-side performance in Next.js?▼

Yes, the approach works for both client-side data fetching and server-side performance in Next.js. It provides targeted performance-first rules across eight impact areas, covering both server and client data loading.

What is the best way to review existing React code for performance anti-patterns?▼

The best way to review React code for performance anti-patterns is applying the vercel-react-best-practices skill, which identifies likely bottlenecks in rendering and bundle delivery and guides refactoring using a priority schema.

When should I refactor my React application for performance optimization?▼

You should refactor your React application for performance optimization when experiencing slow load times caused by inefficient data fetching, waterfall requests, bloated bundles, and unnecessary re-renders.

Related Skills

Explore More Software Engineering Skills→
dmmulroydmmulroy
232

vercel-react-best-practices

Apply React and Next.js performance guidelines to optimize components and data fetching.

Community
Advanced
idchain-worldidchain-world
16

vercel-react-best-practices

Apply performance best practices to React and Next.js components and pages.

Official
Advanced
xianmingyaoxianmingyao
1

react-best-practices

Review React and Next.js code for performance bottlenecks across server and client.

Community
Advanced
EdgeHuntEdgeHunt

ck:react-best-practices

Detect and fix React/Next.js performance anti-patterns using Vercel best practices.

Official
Advanced