vercel-react-best-practices

Review React and Next.js code for performance improvements.

Updated Mar 29, 2026

Search Tags:#performance #caching #refactoring #react #optimization #nextjs #bundle-size

Ready to run

npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill vercel-react-best-practices-zizhenchen47-oss

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: vercel-react-best-practices
Source: https://github.com/zizhenchen47-oss/claude-skills/tree/main/react-best-practices
Command: npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill vercel-react-best-practices-zizhenchen47-oss

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill helps engineers identify and fix React and Next.js performance issues that slow down rendering, increase bundle size, and create inefficient data fetching patterns.

Core Features & Use Cases

Performance Review: Evaluate React components and Next.js pages for waterfalls, unnecessary re-renders, and server-side bottlenecks.
Code Refactoring Guidance: Recommend targeted changes for caching, memoization, dynamic imports, and rendering improvements.
Production Optimization: Apply practical best practices when shipping new features, debugging slow interactions, or reducing load times in real applications.

Quick Start

Use this skill to review my React or Next.js code and recommend the highest-impact performance improvements.

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 fix unnecessary re-renders in React components?▼

Fix unnecessary re-renders in React components by applying memoization techniques and optimizing component design. This Skill evaluates rendering behavior and recommends targeted refactoring changes to eliminate redundant render cycles.

What's the best way to reduce bundle size in Next.js applications?▼

The best way to reduce bundle size in Next.js applications is through dynamic imports and JavaScript efficiency patterns. This Skill analyzes your codebase to identify optimization opportunities and applies production-grade best practices to minimize load times.

How do I eliminate data fetching waterfalls in Next.js?▼

Eliminate data fetching waterfalls in Next.js by restructuring server-side data retrieval and applying proper caching strategies. This Skill guides you through resolving server-side bottlenecks and optimizing data fetching patterns during code review.

Can this Skill help refactor existing React code for better performance?▼

Yes, this Skill provides code refactoring guidance for existing React applications by recommending specific improvements for caching, memoization, and rendering. It targets production-grade code changes to optimize slow interactions and reduce load times.

Why does my Next.js application have slow server-side rendering?▼

Slow Next.js server-side rendering often stems from inefficient data fetching patterns and server-side bottlenecks. This Skill evaluates your Next.js pages to identify waterfall issues and recommends targeted changes to improve server rendering performance.