react-best-practices

Apply React and Next.js performance rules to components and pages.

27|5|Updated Apr 3, 2026

Search Tags:#performance #refactoring #react #next.js #best-practices #web-vitals #bundle-size

Ready to run

npx skills add https://github.com/Fandry96/k3-agentic-skills --skill react-best-practices-fandry96

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/Fandry96/k3-agentic-skills/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/Fandry96/k3-agentic-skills --skill react-best-practices-fandry96

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Developers struggle to consistently implement high-performance React and Next.js practices across projects, leading to slower apps and maintenance challenges.

Core Features & Use Cases

45 rules across 8 categories to guide refactoring and code reviews.
Prioritized guidance enabling immediate improvements in bundle size, server and client performance, and user-perceived speed.
Use Case: when reviewing a new React component or optimizing a Next.js page, apply the rules to identify bottlenecks and recommended changes.

Quick Start

Analyze a React component or Next.js page and apply the top-priority rules to reduce bundle size and improve rendering performance.

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 development?▼

To optimize React and Next.js performance, you apply 45 prioritized best-practice rules across 8 categories during component development and page rendering to reduce bundle size and improve user-perceived speed.

What is the best way to reduce bundle size in a Next.js application?▼

The best way to reduce bundle size in Next.js is to apply prioritized performance rules that target both client and server contexts, identifying specific bottlenecks and recommending concrete changes for immediate improvements.

Can I use these React performance rules for code reviews and refactoring?▼

Yes, you can use these React performance rules for code reviews and refactoring by applying the prioritized guidance and concrete examples to identify bottlenecks and support automated refactoring aids across your project.

Does this approach cover both server and client performance contexts?▼

Yes, this approach covers both server and client performance contexts, applying targeted best practices across component development, page rendering, and bundle-size optimization to enhance user-perceived speed.

When do I need Web Vitals optimization for my React project?▼

You need Web Vitals optimization for your React project when struggling to consistently implement high-performance practices, which leads to slower apps. Applying structured rules helps resolve maintenance challenges and improves rendering.

What are the limitations of applying generic React best practices for performance?▼

Generic React best practices lack structured prioritization, making it hard to consistently improve performance. This approach overcomes that limitation by encapsulating 45 rules across 8 categories with prioritized guidance for immediate impact.