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.
npx agentmods add skills/tonyghiani/ai-essentials/react-perfnpx skills add tonyghiani/ai-essentials --skill react-perfgit clone --depth 1 https://github.com/tonyghiani/ai-essentialsWhat 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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5 | $0.00066 | $0.00757 |
| Opus 5 | $0.00033 | $0.00378 |
| Sonnet 5 | $0.00013 | $0.00151 |
| Haiku 4.5 | $0.00007 | $0.00076 |
Grade A, and why
react-perf 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.
How it starts
The opening of the file, as written. The whole thing — 56 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React render perf audit
Most React perf advice is cargo cult. This skill only reports things with a plausible mechanism and a way to confirm.
Order of operations
Do not skip to memoisation. Work down this list; the earlier items are where real wins live.
1. Are you rendering too much data? A 5,000-row table with no virtualisation dwarfs every other cause. Look for unbounded .map() over server data, missing pagination, and lists without windowing.
2. Is the work in the wrong place? Expensive computation in a component body that runs on every parent render, when it could be computed once at the data layer, on the server, or in the query's select.
3. Is state too high in the tree? State in a common ancestor forces siblings to re-render. Moving it down, or splitting a context, removes the render instead of memoising it. Prefer this over memo.
4. Is a context value unstable? A provider whose value is a fresh object every render re-renders every consumer, and memo on consumers won't help. useMemo the value; that's referential stability, a real reason.
5. Are effects causing extra render passes? State set in an effect means render → commit → set → render again. react-patterns covers this; derived-in-render removes the second pass entirely.
6. Only now: memoisation. And only with an answer to "what re-render does this prevent, and why does that render cost enough to matter?"
Reporting rules
For each finding, give:
file:line- The mechanism: what triggers the render, what re-renders as a result
- Estimated impact: how many components, how often
- The fix, in the house style
- How to confirm it: React DevTools Profiler flame chart,
<Profiler>onRendertimings, or a Performance panel recording
If you can't name the mechanism, don't report it. "This could be memoised" is not a finding.
Severity:
- Critical: unbounded render work, or a render loop
- Important: an unstable context or provider value, state too high causing wide re-renders
- Minor: a genuinely expensive computation that could be memoised
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.
- 3d ago First seen · 56 lines · 66 tokens per session scan A e3bded5c584e
react-perf is a skill published in the GitHub repository tonyghiani/ai-essentials (6 stars, last pushed 25d ago), licensed MIT. It adds 66 tokens to every session and 757 once invoked, about $0.0003 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.
Other skills, from other repositories
chakra-ui-builder
Build responsive, accessible UI components and layouts using Chakra UI v3, install or configure Chakra UI in new and existing projects, and design scalable themes using tokens, semantic tokens, recipes, and slot recipes. Use this skill whenever a user asks to build, create, or generate any UI component, page, form…
row-selection
Maintain rowSelection ID state with stable getRowId, single, multi, subrow, and Shift-range rules, selected row models, handler anchors, and manual-pagination semantics. Load when implementing getToggleSelectedHandler, enableRowRangeSelection, selectChildren, deselectParents, or selected IDs that outlive loaded Row…
material-ui-tailwind
Integrates Material UI with Tailwind CSS v4 using cascade layers (enableCssLayer, @layer order) and documents Tailwind v3 interoperability (preflight, important, injectFirst, portals). Use when combining MUI with Tailwind utilities, slotProps className, or theme token bridges.
r3f-best-practices
React Three Fiber (R3F) and Poimandres ecosystem best practices. Use when writing, reviewing, or optimizing R3F code. Triggers on tasks involving @react-three/fiber, @react-three/drei, zustand, @react-three/postprocessing, @react-three/rapier, or leva.
wrdn-effect-promise-exit
Replace React/effect-atom mutation handlers that use promise-mode plus try/catch with promiseExit and explicit Exit handling. Use when lint or review flags try/catch around useAtomSet mutation calls, especially UI handlers that set error/busy state after a failed mutation.
assistant-ui-primitives
Guide for assistant-ui UI primitives - ThreadPrimitive, ComposerPrimitive, MessagePrimitive. Use when customizing chat UI components.