react-performancelisted

# React Performance Performance optimization patterns for React 18/19 and Next.js, adapted from [Vercel Labs `react-best-practices`](https://github.com/vercel-labs/agent-skills/tree/main/skills/react-best-practices) (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring. ## When to Activate - Writing or reviewing React/Next.js code for performance - Diagnosing slow page loads, slow interactions, or high CPU on the client - Auditing bundle size or Lighthouse Core Web Vitals regressions - Removing waterfalls in Server Components / API routes - Reducing client-side re-renders - Optimizing long lists, animations, or hydration - Auditing optimization choices in PRs touching `app/`, `pages/`, `components/`, or data layers ## Priority Index | Priority | Category | Prefix | When it matters | |---|---|---|---| | 1 — CRITICAL | Eliminating Waterfalls | `async-` | Anytime `await` is followed by independent `await` | | 2 — CRITICAL | Bundle Size Optimization | `bundle-` | First-load JS, route-level imports, third-party libs | | 3 — HIGH | Server-Side Performance | `server-` | RSC, Server Actions, API routes, SSR | | 4 — MEDIUM-HIGH | Client-Side Data Fetching | `client-` | SWR / TanStack Query / raw `fetch` in hooks | | 5 — MEDIUM | Re-render Optimization | `rerender-` | High-frequency state updates, parent-child fan-out | | 6 — MEDIUM | Rendering Performance | `rendering-` | Long lists, animations, hydration