skills.rest
kriangkraiii
kriangkraiiiCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Identifies and remedies performance issues in React and Next.js projects.

2|1|Updated Feb 7, 2026
Search Tags:#performance#react#optimization#nextjs#server-side#waterfall#bundle
One-click install
npx skills add https://github.com/kriangkraiii/Game_E-commerce --skill react-best-practices-kriangkraiii
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/kriangkraiii/Game_E-commerce/tree/main/shopping-cart-spring-boot-main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/kriangkraiii/Game_E-commerce --skill react-best-practices-kriangkraiii

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires better-all, react, next, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications by eliminating waterfalls, reducing bundle sizes, and optimizing server-client workflows, thereby enhancing user experience and load times.

Core Features & Use Cases

  • Waterfall Elimination: Replaces sequential awaits with Promise.all() and Suspense boundaries for faster data fetching.
  • Bundle Optimization: Advises on direct imports, dynamic loading, and avoiding barrel files to decrease initial bundle size.
  • Server & Client Efficiency: Implements caching, parallel data fetching, and non-blocking server-side logic to improve server response times and client responsiveness.
  • Use Case: For a large enterprise app experiencing slow page loads, apply these practices to improve Time to Interactive by removing sequential data calls and optimizing asset imports.

Quick Start

Use this skill to review your React code for any slow data fetching patterns or unnecessary bundle bloat and get targeted recommendations for improvements.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I fix React data fetching waterfalls to improve page load speed?▼

Reduce React bundle size by using direct imports, applying dynamic loading for heavy components, and avoiding barrel files to decrease initial load times.

What's the best way to optimize server-side data fetching in Next.js?▼

Optimize Next.js server-side data fetching by implementing caching strategies, fetching data concurrently, and applying non-blocking server-side logic to improve response times.

How do I stop unnecessary component re-renders in my React application?▼

Stop unnecessary React re-renders by reviewing code structure, managing dependencies efficiently, and applying server/client data handling best practices for scalable web apps.

Does this approach work for optimizing large enterprise Next.js applications?▼

Yes, these React and Next.js optimization practices are designed for large enterprise apps experiencing slow page loads, directly targeting server/client inefficiencies and bundle bloat.

Why does my Next.js app have a large initial bundle size?▼

Your Next.js app may have a large initial bundle size due to barrel file imports and lacking dynamic loading, which can be fixed by optimizing asset imports and code structure.

Related Skills

Explore More Software Engineering Skills→
caterpi11arcaterpi11ar
3

react-doctor

Analyze React codebases for security, performance, and architectural issues.

Community
Intermediate
hiddink-aihiddink-ai
1

optimize-bundle

Analyze build output and apply code splitting and tree-shaking optimizations.

Official
Intermediate
RelicWare-CoRelicWare-Co

shadcn

Manage, customize, and integrate shadcn/ui components in React projects.

Official
Intermediate
mangorocketofficialmangorocketofficial

vercel-react-best-practices

Apply Vercel Engineering performance guidelines to React and Next.js code review and refactoring tasks.

Community
Intermediate