skills.rest
mkurman
mkurmanCOMMUNITY
Explore all skills by this author →
𝕏@mkurman88GitHub

react-best-practices

Apply React and Next.js performance patterns for server components, data fetching, and bundle optimization.

321|26|Updated Mar 10, 2026
Search Tags:#performance#react#nextjs#guidelines#server-components#bundle-size#client-components
One-click install
npx skills add https://github.com/mkurman/tamux --skill react-best-practices-mkurman
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/mkurman/tamux/tree/main/skills/gsd-2/skills/react-best-practices
Command: npx skills add https://github.com/mkurman/tamux --skill react-best-practices-mkurman

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects commonly suffer from performance regressions due to suboptimal patterns. This skill consolidates engineering guidance from Vercel to help you write, review, and refactor code with speed in mind, covering rendering, data fetching, and bundle optimization.

Core Features & Use Cases

  • Centralized, actionable performance rules for React components, server components, data fetching, and bundling.
  • Real-world scenarios and decision guidance to improve Time To Interactive and perceived performance.
  • Step-by-step checks that you can apply during code reviews or automated refactors.

Quick Start

Analyze a React project to apply the top-priority performance rules from this guide.

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 for better load times?▼

Optimize React and Next.js performance by applying consolidated engineering rules for server components, data fetching, and bundle size reduction to improve Time To Interactive and perceived UX across your codebase.

What are the best practices for using React server components versus client components?▼

React server components versus client components best practices involve applying centralized performance rules and decision guidance during code reviews to ensure correct rendering boundaries, optimal data fetching, and minimal bundle impact.

How do I reduce bundle size in a Next.js project?▼

Reduce bundle size in a Next.js project by applying bundle optimization rules and step-by-step checks during automated refactors to minimize code weight while ensuring correct guards, validation, and minimal risk.

How do I review React code for performance regressions?▼

Review React code for performance regressions by applying step-by-step checks and actionable performance rules covering rendering, data fetching, and bundling to identify suboptimal patterns and safely guide refactoring.

Can I use these Next.js performance patterns for automated refactoring?▼

You can use these Next.js performance patterns for automated refactoring by applying the step-by-step checks and rules to ensure changes are implemented with correct guards, validation, minimal risk, and proper documentation.

Related Skills

Explore More Software Engineering Skills→
AngelP17AngelP17
1

vercel-react-best-practices

Apply React and Next.js performance best practices during code review.

Community
Intermediate
bnadlerjrbnadlerjr
5

practicing-tdd

Enforce a RED-GREEN-REFACTOR cycle with failing tests before code changes.

Community
Intermediate
msichtermanmsichterman

vercel-react-best-practices

Enforce React and Next.js performance best practices for components, data fetching, routing, and bundling.

Community
Advanced
Colten-CovingtonColten-Covington

performance-profiling

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

Community
Advanced