← ClaudeAtlas

react-perf-ruleslisted

Provides prioritized P0/P1/P2 criteria for auditing React and Next.js branch diffs across waterfalls, bundle bloat, server execution, and client re-renders.
smicolon/ai-kit · ★ 6 · Web & Frontend · score 76
Install: claude install-skill smicolon/ai-kit
# React & Next.js Performance Review Rules Prioritized review rules to audit branches for performance regressions. ## Severity Classification ### P0 (Critical — Must Fix Before Merge) - **Sequential Waterfalls**: Unnecessary chained `await` statements in server components or route handlers that could be parallelized with `Promise.all()`. - **Accidental De-opt of Server Components**: Adding `'use client'` to layout roots or high-level containers instead of leaf nodes. - **Unbounded Client-Side Lists**: Rendering dynamic lists with 100+ items without virtualization or pagination. - **Missing Memoization on Expensive Render Trees**: Passing new inline functions/objects as props to expensive or memoized child subtrees. ### P1 (High Impact — Strong Recommendation) - **Massive Barrel Imports**: Importing icons or utilities from index barrel files that bypass bundler tree-shaking. - **Synchronous Heavy Operations in Route Handlers**: Missing `after()` for non-critical side effects (audit logging, telemetry) in Next.js 15. - **Uncached Cacheable Fetches in Next.js 15**: Relying on legacy Next.js 14 caching assumptions without explicit `revalidate` or `cache: 'force-cache'`. - **Derived State Synced via `useEffect`**: Storing computed values in `useState` and setting them in `useEffect` instead of calculating inline during render. ### P2 (Medium / Polish) - **Missing `next/image` dimensions / priority**: Hero images missing `priority` causing LCP delay. - **Unoptimized Third-Part