skills.rest
JohnMarkCapones
JohnMarkCaponesCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Optimize React and Next.js performance with 40 rules for bundle size and rendering.

3|Updated Jan 28, 2026
Search Tags:#performance#react#optimization#bundle size#rendering#next.js
One-click install
npx skills add https://github.com/JohnMarkCapones/Aralify --skill react-best-practices-johnmarkcapones
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/JohnMarkCapones/Aralify/tree/main/.cursor/skills/react-best-practices
Command: npx skills add https://github.com/JohnMarkCapones/Aralify --skill react-best-practices-johnmarkcapones

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, ensuring faster load times, smoother rendering, and reduced bundle sizes.

Core Features & Use Cases

  • Performance Optimization: Provides over 40 rules for improving React/Next.js app performance.
  • Bundle Size Reduction: Offers strategies to minimize JavaScript payload.
  • Rendering Efficiency: Guides on optimizing component re-renders and browser rendering.
  • Use Case: A developer notices their Next.js app has a slow Time To Interactive (TTI). They use this Skill to identify and fix issues related to large bundle sizes and inefficient data fetching.

Quick Start

Apply the react-best-practices skill to optimize the performance of the current React codebase.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
What's the best way to reduce bundle size and improve rendering in a Next.js app?▼

Reducing bundle size and improving rendering in Next.js requires applying targeted performance rules to minimize JavaScript payload and eliminate data fetching waterfalls. This Skill provides over 40 optimization rules with code examples and impact analysis to guide these fixes.

How do I fix slow Time To Interactive in my React application?▼

Fixing slow Time To Interactive in a React application involves identifying performance bottlenecks like large bundle sizes and inefficient data fetching. This Skill offers strategies to optimize component re-renders and browser rendering efficiency to improve load times.

How does eliminating waterfalls improve React and Next.js performance?▼

Eliminating waterfalls improves React and Next.js performance by preventing sequential data fetching delays that block rendering. This Skill provides rules to restructure data fetching patterns, ensuring faster load times and smoother user experiences.

Can I apply these React performance optimizations to an existing codebase?▼

You can apply these React performance optimizations to an existing codebase by running the Skill to analyze your current setup. It guides developers in identifying and fixing rendering inefficiencies and bundle size issues within their established React and Next.js projects.

When do I need to optimize component re-renders in React?▼

Optimizing component re-renders in React is needed when inefficient rendering causes performance bottlenecks and sluggish user interactions. This Skill helps identify unnecessary re-renders and provides rules to improve browser rendering efficiency.

Related Skills

Explore More Software Engineering Skills→
Arupbiswas09Arupbiswas09

nextjs-react-best-practices

Analyze Next.js and React components for performance bottlenecks using predefined rules.

Community
Intermediate
wilfriedagowilfriedago
2

angular-performance

Optimize Angular performance with NgOptimizedImage, @defer lazy loading, and SSR hydration.

Community
Intermediate
MClaudioMClaudio

vercel-react-best-practices

Enforce React and Next.js performance best practices across codebases.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

Profiles React component rendering and bundle sizes to resolve web performance bottlenecks.

Community
Advanced