What problem does it solve? React components can pass type checks, linting, and visual review while still performing poorly in production due to excessive re-renders, broken memoization, and bloated bundles. This Skill detects those hidden performance issues before they surface in stakeholder demos or release builds. ## Core Features & Use Cases - Render & Re-render Analysis: Detects unnecessary re-renders, inline object/function props that break memoization, overly broad context values, and unstable list keys. - Memoization & Dependency Checks: Reviews useMemo, useCallback, and useEffect dependency arrays for stale closures, missing dependencies, and heavy computations that belong in useMemo. - Bundle Size Auditing: Flags full-library imports, lazy-loadable overlays, and duplicate dependencies, with an enforced bundle-size budget gate via npm run check:bundle-size. - Use Case: Before merging a new design-system component, run the audit to get a prioritized report of render issues, memoization gaps, and bundle impact, classified into engineering fixes (P2E) versus product trade-off decisions (P2H). ## Quick Start Ask the assistant to run a performance audit on a specific component or the whole design system to find re-render and bundle size problems.
