skills.rest
suhwan
suhwanCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Identify performance bottlenecks in React/Next.js projects and generate an optimization plan.

Updated Feb 1, 2026
Search Tags:#performance#react#optimization#rendering#next.js#bundle-size
One-click install
npx skills add https://github.com/suhwan/claude-registry --skill react-best-practices-suhwan
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/suhwan/claude-registry/tree/main/skills/design-ui/react-best-practices
Command: npx skills add https://github.com/suhwan/claude-registry --skill react-best-practices-suhwan

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill helps engineering teams optimize React/Next.js applications by applying a comprehensive set of performance best practices to reduce waterfalls, trim bundle sizes, and minimize unnecessary re-renders.

Core Features & Use Cases

  • 57 rules organized into eight priority-based categories, with concrete guidance, examples, and refactoring paths.
  • End-to-end guidance for common workflows: audit, refactor, test, and validate performance improvements across both client and server boundaries.
  • Real-world use cases spanning Next.js routing, Server Actions, SSR, and client components to achieve faster initial paint and smoother interactions.

Quick Start

Run the skill to audit your React/Next.js project and generate an actionable optimization plan.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I find React performance bottlenecks in my Next.js project?▼

Identify React performance bottlenecks by auditing your Next.js project against 57 categorized rules covering waterfalls, bundle size, and rendering efficiency to generate an actionable optimization plan.

What's the best way to reduce unnecessary re-renders in React?▼

Reduce unnecessary re-renders by applying targeted rendering efficiency best practices across client components and SSR boundaries, ensuring your application delivers smoother user interactions.

How do I optimize bundle size in a Next.js application?▼

Optimize Next.js bundle size by auditing your project to trim unnecessary dependencies and applying specific best practices that minimize the final JavaScript payload delivered to clients.

Can I use this to improve server-side performance for Server Actions and API routes?▼

Yes, you can improve server-side performance by evaluating JavaScript execution in API routes and Server Actions, applying safety validations to guide automated optimization across SSR contexts.

How do I fix data fetching waterfalls in React?▼

Fix data fetching waterfalls by analyzing client data retrieval patterns and applying structural refactoring guidance to parallelize requests and improve initial paint performance.

Does this cover both SSR and CSR rendering optimization?▼

Yes, it covers both SSR and CSR rendering optimization, providing end-to-end guidance to audit, refactor, and test performance improvements across server and client boundaries.

Related Skills

Explore More Software Engineering Skills→
Andrejr82Andrejr82

nextjs-best-practices

Guide Next.js App Router development with component, data fetching, and routing best practices.

Community
Intermediate
patrickhaahrpatrickhaahr

vercel-react-best-practices

Identify and apply React/Next.js performance best practices for rendering, data fetching, and bundle size.

Community
Basic
Gaku52Gaku52
6

frontend-performance

Optimize React/Next.js frontend performance by reducing Core Web Vitals and bundle sizes.

Community
Advanced
PatternsDevPatternsDev
235

tree-shaking

Eliminate dead code from JavaScript bundles using ES module imports.

Official
Intermediate