Agent skill · affaan-m
react-performance
React and Next.js performance optimization patterns adapted from Vercel Engineering's React Best Practices (https://github.com/vercel-labs/agent-skills). Organizes 70+ rules across 8 priority categories — waterfalls, bundle size, server-side, client fetching, re-render, rendering, JS micro-perf, advanced. Use when writing, reviewing, or refactoring React/Next.js code for performance.
What it needs
About 10k tokens when loaded.
What this skill does
React Performance Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs 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 7 — LOW-MEDIUM JavaScript Performance js- Hot loops, frequent allocations 8 — LOW Advanced Patterns advanced- Effect-event integration, stable refs 1. Eliminating Waterfalls (CRITICAL) "Waterfalls are the #1 performance killer" — every sequential await adds full network latency. Cheap conditions before await Check sync conditions (props, env, hardcoded flags) before awaiting remote data. Defer awaits until used Move await into the branch that uses it. Promise.all for independent work Partial dependencies — start early, await late Suspense for streaming Push <Suspense> boundaries close to the data so the page paints what it can while slower sub-trees stream in. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/react-performance--ca4d1c