skills.rest
achmf
achmfCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Optimizes React and Next.js apps by fixing data fetching, bundle size, and rendering issues.

Updated Jun 4, 2026
Search Tags:#performance#frontend#react#optimization#nextjs#web-vitals
One-click install
npx skills add https://github.com/achmf/KostaHub --skill react-best-practices-achmf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/achmf/KostaHub/tree/main/.agent/skills/nextjs-react-expert
Command: npx skills add https://github.com/achmf/KostaHub --skill react-best-practices-achmf

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) components.

What problem does it solve?

This Skill addresses performance bottlenecks in React and Next.js applications, specifically targeting slow page loads, excessive bundle sizes, and inefficient rendering patterns.

Core Features & Use Cases

  • Waterfall Elimination: Provides actionable rules to identify and resolve sequential data fetching issues that delay page interactivity.
  • Bundle Optimization: Offers strategies for tree-shaking, dynamic imports, and avoiding heavy barrel file imports.
  • Rendering Efficiency: Includes guidance on memoization, virtualization, and preventing unnecessary re-renders to ensure a smooth user experience.

Quick Start

Use the react-best-practices skill to audit my current codebase for performance bottlenecks and suggest specific optimizations based on the Vercel engineering guidelines.

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 data fetching waterfalls in Next.js?▼

Data fetching waterfalls in Next.js are resolved by identifying sequential request issues and applying client-side data deduplication alongside advanced component-level caching strategies to restore page interactivity.

What is the best way to reduce React bundle size bloat?▼

The best way to reduce React bundle size bloat involves applying tree-shaking, utilizing dynamic imports, and avoiding heavy barrel file imports to strip unnecessary code from your production build.

How do I prevent unnecessary React re-renders and improve rendering efficiency?▼

Preventing unnecessary React re-renders is achieved by applying memoization techniques, implementing list virtualization, and optimizing rendering cycles to ensure a consistently smooth user experience.

Can I use this approach to improve Core Web Vitals for full-stack web development?▼

Yes, you can improve Core Web Vitals for full-stack web development by applying server-side rendering rules and client-side data deduplication to satisfy technical requirements for high-performance metrics.

Why does my Next.js page load slowly despite using server-side rendering?▼

Next.js page loads remain slow despite server-side rendering when sequential data fetching waterfalls delay page interactivity, requiring advanced caching strategies and bundle size optimization to resolve.

Related Skills

Explore More Software Engineering Skills→
dtsongdtsong
1

Performance Audit

Identify bottlenecks across rendering, network, bundle size, database queries, and infrastructure.

Community
Advanced
phuonghxphuonghx
1

nextjs-react-expert

Optimize Next.js and React applications for data fetching, bundle size, and rendering performance.

Community
Advanced
r1cA18r1cA18
4

vercel-react-best-practices

Optimize React and Next.js applications with prioritized performance rules.

Community
Advanced
vudovnvudovn
8.1k

react-best-practices

Diagnose React and Next.js performance bottlenecks and propose optimizations.

Community
Advanced