react-best-practices

Name: react-best-practices
Availability: InStock
Author: Michel

Review React code for performance improvements per Vercel guidelines.

1|Updated Mar 16, 2026

Search Tags:#code review #best practices #performance #frontend #react #optimization

Ready to run

npx skills add https://github.com/michelve/hugin-cowork --skill react-best-practices-michelve

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: react-best-practices
Source: https://github.com/michelve/hugin-cowork/tree/main/skills/react-best-practices
Command: npx skills add https://github.com/michelve/hugin-cowork --skill react-best-practices-michelve

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill addresses common performance bottlenecks and maintainability issues in React applications, ensuring code is efficient, scalable, and easier to manage.

Core Features & Use Cases

Performance Optimization: Provides guidelines to eliminate waterfalls, reduce bundle size, and optimize rendering.
Code Quality: Enforces best practices for data fetching, re-renders, and JavaScript execution.
Use Case: When refactoring a slow-loading React component, consult this Skill for specific rules on how to improve its performance, such as using React.lazy for dynamic imports or optimizing effect dependencies.

Quick Start

Apply the react-best-practices skill to review the provided React code for performance improvements.

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 performance for slow-loading components?▼

Optimize React performance by eliminating data fetching waterfalls, reducing bundle size with dynamic imports like React.lazy, and minimizing unnecessary re-renders to improve component rendering efficiency and overall application scalability.

What are the best practices for React data fetching and reducing bundle size?▼

React data fetching and bundle size reduction best practices include eliminating request waterfalls, enforcing efficient JavaScript execution, and applying Vercel Engineering guidelines for Vite single-page applications to ensure optimal loading speeds.

How do I review React code for performance bottlenecks and maintainability issues?▼

Review React code for performance bottlenecks by checking component optimization patterns, validating effect dependencies, and ensuring efficient JavaScript execution to resolve maintainability issues and scalability limitations.

Does this React optimization approach work with Vite single-page applications?▼

Yes, this React optimization approach works with Vite single-page applications by adhering to Vercel Engineering guidelines, but it specifically excludes server-side rendering specifics to focus entirely on frontend client-side execution efficiency.

When should I not use React.lazy for dynamic imports during refactoring?▼

You should carefully evaluate React.lazy for dynamic imports when refactoring components that require immediate synchronous loading or when dealing with critical rendering paths, as improper usage might introduce unwanted loading suspenses.