# Ui

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

- **Type:** Skill
- **Install:** `agentstack add skill-v0idos-performance-deity-ui`
- **Verified:** Yes — security-reviewed for prompt injection and unsafe behavior
- **Seller:** [v0idOS](https://agentstack.voostack.com/s/v0idos)
- **Installs:** 0
- **Category:** [Agent Skills](https://agentstack.voostack.com/c/agent-skills)
- **Latest version:** 0.1.0
- **License:** MIT
- **Upstream author:** [v0idOS](https://github.com/v0idOS)
- **Source:** https://github.com/v0idOS/performance-deity/tree/main/skills/ui
- **Website:** https://v0idos.github.io/performance-deity/

## Install

```sh
agentstack add skill-v0idos-performance-deity-ui
```

Requires the [AgentStack CLI](https://agentstack.voostack.com/docs/cli). Works with Claude Code, Cursor, and any MCP-compatible agent.

## About

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.

## Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

- **Author:** [v0idOS](https://github.com/v0idOS)
- **Source:** [v0idOS/performance-deity](https://github.com/v0idOS/performance-deity)
- **License:** MIT
- **Homepage:** https://v0idos.github.io/performance-deity/

Install and usage instructions live in the source repository linked above.

## Pricing

- **Free** — Free

## Security capabilities

Automated source analysis of v0.1.0 — what this tool can access:

- **Network access:** no
- **Filesystem access:** no
- **Shell / process execution:** no
- **Environment & secrets:** no
- **Dynamic code execution:** no

*"Yes" means the capability is present in the source — more access means more to trust, not that it is unsafe.*


## Versions

- **0.1.0** — security scan: passed — Imported from the upstream source.

## Links

- Listing page: https://agentstack.voostack.com/l/skill-v0idos-performance-deity-ui
- Seller: https://agentstack.voostack.com/s/v0idos
- Browse the marketplace: https://agentstack.voostack.com/browse

---
Listed on AgentStack — the marketplace for AI agent skills and MCP servers. Every listing is security-reviewed. Creators keep 70%.