skills.rest
velcrafting
velcraftingCOMMUNITY
Explore all skills by this author →
Website𝕏@VelcraftingGitHub

react-best-practices

Apply React and Next.js performance guidelines during component creation and code reviews.

1|Updated Jan 13, 2026
Search Tags:#performance#react#optimization#nextjs#best-practices#bundling#code-review
One-click install
npx skills add https://github.com/velcrafting/codex-skills --skill react-best-practices-velcrafting
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/velcrafting/codex-skills/tree/main/skills/vercel/react-best-practices
Command: npx skills add https://github.com/velcrafting/codex-skills --skill react-best-practices-velcrafting

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

React and Next.js projects often struggle with performance due to scattered, inconsistent patterns. This Skill consolidates 40+ rules across 8 categories to provide a cohesive set of guidelines that drive faster, more reliable UI and improved bundle performance.

Core Features & Use Cases

  • Prioritized performance patterns across 8 categories: Eliminating Waterfalls, Bundle Size Optimization, Server-Side Performance, Client-Side Data Fetching, Re-render Optimization, Rendering Performance, JavaScript Performance, and Advanced Patterns.
  • Use cases include writing new React components or Next.js pages, reviewing code for performance issues, refactoring existing code to reduce re-renders, and optimizing bundle size or load times.
  • Real-world scenario: apply these guidelines during development and code reviews to achieve faster initial paints and better interactivity.

Quick Start

Use these guidelines when starting React/Next.js work to embed performance best practices from the ground up.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
How do I optimize React and Next.js performance during component creation?▼

Optimize React performance by applying over 40 consolidated rules across 8 categories to eliminate render waterfalls, optimize bundle size, and enforce server-side data fetching patterns during component creation.

What are the best practices for reducing re-renders in React applications?▼

Reducing re-renders involves applying prioritized performance patterns for rendering optimization and client-side data deduplication, ensuring faster initial paints and better interactivity without inconsistent scattered code.

How do I eliminate data fetching waterfalls in Next.js pages?▼

Eliminate Next.js data fetching waterfalls by enforcing server-side fetching patterns and client-side deduplication with safe automation, consolidating 40+ rules to drive faster initial paints and reliable UI.

Can I use these React performance guidelines for code reviews?▼

Yes, you can apply these prioritized performance patterns during code reviews to identify waterfall elimination, bundle optimization, and re-render issues across React and Next.js applications.

How do I optimize bundle size for React and Next.js applications?▼

Optimize bundle size by applying specific guidelines from the Bundle Size Optimization category, which form part of 40+ prioritized rules across 8 categories to improve load times and UI responsiveness.

Related Skills

Explore More Software Engineering Skills→
fefogarciafefogarcia
1

vercel-react-best-practices

Optimize React and Next.js applications with performance guidelines.

Community
Intermediate
nangyak4415-sudonangyak4415-sudo

optimize

Identify and fix web performance issues in frontend applications.

Community
Intermediate
baekenoughbaekenough
34

react-best-practices

Apply React/Next.js performance rules to optimize components during code review.

Community
Advanced
pckienuitpckienuit

react-best-practices

Analyze React and Next.js codebases for performance bottlenecks and prioritized fixes.

Community
Advanced