ui

ui is a skill for Claude Code, Codex from v0idOS/performance-deity. It costs 36 tokens per session (375 once invoked), scanned A, original, MIT.

A user-interface performance skill improves how web interfaces render and animate. It targets React, Vue, and plain JavaScript code, including repeated renders, layout work, animations, and long lists.

In plain words
What is it for?
Use it to audit React re-renders, move animations to compositor-friendly CSS properties, and add virtualization when lists are large.
Why use it?
It helps prevent sluggish interactions caused by unnecessary updates, browser layout recalculation, or rendering too many list items at once.

Skill for Claude CodeCodex

Part of the performance-deity plugin — 17 skills shipped together

Install

Getting it into your agent

One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.

agentmods
npx agentmods add skills/v0idos/performance-deity/ui
Any agent
npx skills add v0idOS/performance-deity --skill ui
Clone the repo
git clone --depth 1 https://github.com/v0idOS/performance-deity

Made for: Claude Code, Codex.

Or install performance-deity, the plugin that ships this one along with the rest of its 17 skills.

Wrote this? Show the measurements

A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.

agentmods badge for ui

README.md
[![agentmods](https://agentmods.dev/badge/skills/v0idos/performance-deity/ui.svg)](https://agentmods.dev/skills/v0idos/performance-deity/ui)
Your own site
<a href="https://agentmods.dev/skills/v0idos/performance-deity/ui"><img src="https://agentmods.dev/badge/skills/v0idos/performance-deity/ui.svg" alt="Measured on agentmods" height="20"></a>
Per session 36 Skills are progressive disclosure: only the name and description are preloaded; the body loads when the skill is used.
When invoked 375 The whole file, excluding the scripts and references it only reads on demand.
Security scan A 0 findings. Scan, not verified.
Origin original No closer match found in the catalogue.
Token cost

What it costs to keep this loaded

Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.

ModelPer sessionOnce invoked
Fable 5 $0.00036 $0.00375
Opus 5 $0.00018 $0.00187
Sonnet 5 $0.00007 $0.00075
Haiku 4.5 $0.00004 $0.00038

Measured 3d ago against content hash 4c225f6d7285, method: parsed. Prices are Anthropic first-party input rates as of 2026-08-30, from the pricing page.

Security

Grade A, and why

ui scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 3d ago.

A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.

Nothing flagged

None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.

skills/ui/SKILL.md · 37 lines

What it actually says

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.

Changes

What this file has done since we first saw it

Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.

  1. 3d ago First seen · 37 lines · 36 tokens per session scan A 4c225f6d7285

Subscribe to this mod's changes

ui is a skill published in the GitHub repository v0idOS/performance-deity (2 stars, last pushed 4mo ago), licensed MIT. It adds 36 tokens to every session and 375 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.

Related

Other skills, from other repositories

sheet-music-publisher

Converts mastered audio to sheet music and creates printable songbooks. Use after mastering when the user wants sheet music or a songbook for their album.

bitwize-music-studio/claude-ai-music-skills · 36 tokens

genre-creator

Create new genre documentation files for the bitwize-music genre library. Use when the user wants to add a genre, says "/genre-creator", "neues Genre erstellen", "Genre hinzufuegen", "add genre", or asks to create genre documentation. Takes a genre name as argument.

bitwize-music-studio/claude-ai-music-skills · 66 tokens

import-art

Places album art files in the correct audio and content directory locations. Use when the user has generated or downloaded album artwork that needs to be saved.

bitwize-music-studio/claude-ai-music-skills · 32 tokens

capcut-edit

Edit CapCut / JianYing video projects — read and write subtitles, timing, speed, volume, templates, animations (fade/ken-burns), and cut long-form to shorts. Use when the user mentions capcut, jianying, subtitles, video editing, draftcontent.json, draftinfo.json, or cutting videos.

renezander030/capcut-cli · 72 tokens

aceternity-ui

100+ animated React components (Aceternity UI) for Next.js with Tailwind. Use for hero sections, parallax, 3D effects, or encountering animation, shadcn CLI integration errors.

secondsky/claude-skills · 48 tokens

video-perception

Use when the user mentions a video file (.mp4, .mov, .avi, .mkv, .webm), a YouTube URL, asks to watch/analyze/review a video, or references video content in conversation.

jordanrendric/claude-video-vision · 51 tokens