skills.rest
zizhenchen47-oss
zizhenchen47-ossCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/zizhenchen47-oss/claude-skills --skill vercel-react-best-practices-zizhenchen47-oss
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
het8802het8802
3

vercel-react-best-practices

Optimize React and Next.js applications with performance guidelines for data fetching and rendering.

Community
Advanced
motormetricsmotormetrics
21

performance

Identify and optimize frontend, backend, and database performance bottlenecks.

Official
Advanced
nanorepublicananorepublica
61

Global Tech Stack

Validate code against centralized global tech stack standards.

Community
Basic
pascallammerspascallammers
1

performance-profiler

Analyzes code performance bottlenecks in JavaScript and Python applications.

Community
Advanced