Ui

Skill v0idOS/performance-deity/skills/ui

A ruthlessly strict algorithmic optimization methodology for AI coding agents. Forces your agent to profile, benchmark, and mathematically prove performance gains before writing code.

Install

npx -y skills add v0idOS/performance-deity --skill ui

Assembled from the repository path, not quoted from the project. Check it against their README if it does not work.

One thing to look at

2 stars2 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.

What its author says it does

Copied from the file, not written here

Fix UI rendering performance issues. Audits React re-renders, migrates animations to GPU-composited CSS properties, and virtualizes long lists. Target is 60 FPS.

SKILL.md

1.6 KB, as published. Nobody here has run it

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.