ui— agent skill

Execute all three phases in order.

Phase 1 — Render Audit

React:

• Find components re-rendering when no props changed → wrap with React.memo.
• Find inline function or object literals in JSX props (new reference on every render) → extract with useCallback or useMemo.
• Find Context providers causing full subtree re-renders → split into separate contexts by update frequency.

Vanilla JS / Vue:

• Find DOM reads (offsetHeight, getBoundingClientRect, scrollTop) inside loops. These force synchronous layout. Batch all reads before any writes.

Phase 2 — GPU Acceleration

Find animations driven by:

• JavaScript timers changing top, left, or margin
• CSS transitions on width, height, margin, or padding

Rewrite to use:

• transform: translate3d(x, y, 0) — handled by the GPU compositor, triggers zero reflow.
• opacity — also compositor-only.
• will-change: transform on elements that animate on a known trigger.

Phase 3 — Virtualization

If a component renders more than 50 list items, replace it with a virtualized list:

• React: react-window (FixedSizeList / VariableSizeList) or @tanstack/react-virtual.
• Vanilla / Vue: IntersectionObserver to mount items only when they enter the viewport.

Only visible DOM nodes exist in the document. All others are unmounted.

Target: 60 FPS measured in DevTools Performance panel with zero dropped frames during scroll.