frontend-react-best-practices

SKILL.md

33 React performance and composition rules across bundle optimization, re-rendering, rendering, hooks, and component patterns.

Covers 6 rule categories: bundle size optimization (barrel imports, conditional loading, preloading), re-render prevention (functional setState, derived state, memoization), rendering performance (content-visibility, hydration, transitions), client patterns (passive listeners, localStorage versioning), hooks best practices (limiting useEffect, named functions), and composition patterns (compound components, explicit variants, avoiding boolean props)

Includes 33 specific rules with code examples showing anti-patterns and recommended approaches for each guideline

Addresses common React pitfalls: stale closures, unnecessary effects, hydration flicker, boolean prop explosion, and over-abstraction

Designed for reference during component writing, code review, refactoring, and bundle optimization tasks

React Best Practices

Performance optimization and composition patterns for React components. Contains 33 rules across 6 categories focused on reducing re-renders, optimizing bundles, component composition, and avoiding common React pitfalls.

When to Apply

Reference these guidelines when:

Writing new React components

Reviewing code for performance issues

Refactoring existing React code

Optimizing bundle size

Working with hooks and state

Rules Summary

Bundle Size Optimization (CRITICAL)

bundle-barrel-imports - @rules/bundle-barrel-imports.md