frontend-react-best-practices
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
More from sergiodxa/agent-skills
frontend-testing-best-practices
Testing best practices for the frontend. Emphasizes E2E tests over unit tests, minimal mocking, and testing behavior over implementation details. Use when writing tests or reviewing test code.
1.6Kowasp-security-check
Security audit guidelines for web applications and REST APIs based on OWASP Top 10 and web security best practices. Use when checking code for vulnerabilities, reviewing auth/authz, auditing APIs, or before production deployment.
818frontend-accessibility-best-practices
Accessibility (a11y) best practices for React components. Use when creating UI components, forms, interactive elements, or reviewing code for accessibility compliance.
351frontend-tailwind-best-practices
Tailwind CSS patterns and conventions for frontend apps. Use when writing component styles, layouts, or working with CSS classes.
331frontend-react-router-best-practices
React Router performance and architecture patterns. Use when writing loaders, actions, forms, routes, or working with React Router data fetching. Triggers on tasks involving React Router routes, data loading, form handling, or route organization.
263frontend-js-best-practices
JavaScript performance optimization guidelines. Use when writing, reviewing, or refactoring JavaScript/TypeScript code to ensure optimal performance patterns. Triggers on tasks involving loops, data structures, DOM manipulation, or general JS optimization.
180