lenserfight: Skill for Claude Code

React / Vite Performance Reviewer

When to activate

Any code touch on:

• apps/web/** — components, routes, hooks, layouts
• libs/* libraries bundled by Vite
• vite.config.ts or vite.config.js — build configuration
• Code split boundaries, dynamic imports, lazy routes
• State management (Zustand, Redux Toolkit, Jotai, Context API)
• Network layers (React Query, SWR, Apollo, tRPC, fetch wrappers)
• Forms (React Hook Form, Formik), tables (TanStack Table), charts
• Animations (Framer Motion, CSS transitions, Web Animations API)
• Third-party library additions or upgrades
• Asset handling (images, fonts, SVGs, CSS)

Review workflow

1. Load references/PERFORMANCE_CHECKLIST.md and apply all sections relevant to the changed files.
2. Inspect the diff for the detection rules below.
3. Produce a severity-ordered finding list using the output format below.
4. Use assets/review-report-template.md for the full structured report.

Severity classification

Severity	Meaning
critical	Causes browser OOM crash, hang, or complete render failure under normal traffic
high	Visible jank or +1s LCP/TTI regression under moderate load (10+ concurrent tabs, slow 4G)
medium	Degrades experience on low-end devices or under high traffic (50+ concurrent users)
low	Minor inefficiency, acceptable now but risky at scale
info	Observation with no current risk

Core detection rules

Rendering

• Flag components that re-render on every parent render when their props haven't changed — check for React.memo absence.
• Flag inline function/object/array props in JSX that produce a new reference each render (onClick={() => …}, style={{ margin: 8 }}).
• Flag useEffect with unstable dependencies (objects/arrays/functions created inside the component without memoization).
• Flag Context providers whose value is a new object on every render — use useMemo for the value or split the context.
• Flag deeply nested context consumers subscribing to a large context object when only one field is needed (use selector pattern or split context).
• Flag key changes on list items that are not actually replaced — causes unnecessary unmount/remount.