skills.rest
Mercurykz
MercurykzCOMMUNITY
Explore all skills by this author →
GitHub

react-best-practices

Identify and apply React/Next.js performance best practices for runtime efficiency.

Updated Apr 3, 2026
Search Tags:#performance#react#optimization#next.js#best-practices#code-review
One-click install
npx skills add https://github.com/Mercurykz/Barretao- --skill react-best-practices-mercurykz
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Mercurykz/Barretao-/tree/main/.cursor/skills/react-best-practices
Command: npx skills add https://github.com/Mercurykz/Barretao- --skill react-best-practices-mercurykz

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

React and Next.js projects frequently suffer from subtle performance pitfalls in rendering, data fetching, and bundling. This Skill consolidates proven patterns and guidelines to help teams consistently write faster, more maintainable UI code.

Core Features & Use Cases

  • Provides a structured set of performance patterns for React components, server components, data fetching, and bundle optimization.
  • Serves as a reference during code reviews, onboarding, and automated tooling to enforce performance-conscious decisions.
  • Applicable to new feature development, refactoring, and audit tasks where performance is a priority.

Quick Start

Review the guide while designing components and fetch patterns, then apply the recommended patterns to refactor code for improved throughput and user experience.

Frequently Asked Questions about react-best-practices

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

FAQPage Schema
What are the best practices for React performance optimization?▼

React performance optimization involves applying proven patterns for component rendering, data fetching, server/client boundaries, and bundle optimization to improve runtime efficiency. The Skill enforces safe, scalable patterns with validation and guardrails adapted to project constraints.

How do I fix React component rendering and data fetching bottlenecks?▼

Fix React component rendering and data fetching bottlenecks by identifying and applying structured performance patterns that enforce safe, scalable decisions. Optimize server/client boundaries and data fetching strategies during development and code reviews.

Can I use these React optimization patterns for Next.js server components?▼

Yes, you can use these React optimization patterns for Next.js server components. The guidelines specifically cover server/client boundaries and data fetching patterns, ensuring performance-conscious decisions across both React and Next.js projects.

What is the best way to review React bundle optimization in code reviews?▼

The best way to review React bundle optimization is to use a structured set of performance patterns as a reference during code reviews. This enforces performance-conscious decisions for bundle optimization and component rendering, ensuring maintainable UI code.

When should I not use automated performance patterns for React?▼

Exercise caution with automated performance patterns when project constraints require custom handling, though the Skill adapts its guardrails to your context. It targets development, code reviews, and automated tooling, so manual overrides may be needed for specialized architectures.

Related Skills

Explore More Software Engineering Skills→
wredziowredzio

tailwind-v4-shadcn

Configure Tailwind v4 theming with shadcn/ui in React + Vite projects.

Community
Advanced
ag47-ptag47-pt
1

performance-profiling

Profile web applications to identify performance bottlenecks and optimization opportunities.

Community
Intermediate
eniosales08-AIeniosales08-AI

vercel-react-best-practices

Apply React and Next.js performance best practices to codebases.

Community
Advanced
oren-arguoren-argu

vercel-react-best-practices

Audits React/Next.js components and pages for prioritized performance improvements.

Community
Advanced