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/junmystery/agent-guidance-python/react-performancenpx skills add JunMystery/Agent-Guidance-Python --skill react-performancegit clone --depth 1 https://github.com/JunMystery/Agent-Guidance-PythonWrote 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.
[](https://agentmods.dev/skills/junmystery/agent-guidance-python/react-performance)<a href="https://agentmods.dev/skills/junmystery/agent-guidance-python/react-performance"><img src="https://agentmods.dev/badge/skills/junmystery/agent-guidance-python/react-performance.svg" alt="Measured on agentmods" height="20"></a>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.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00086 | $0.04471 |
| Opus 5 | $0.00043 | $0.02235 |
| Sonnet 5 | $0.00017 | $0.00894 |
| Haiku 4.5 | $0.00009 | $0.00447 |
Grade A, and why
react-performance 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 2d 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 — 576 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Performance
Performance optimization patterns for React 18/19 and Next.js, adapted from Vercel Labs react-best-practices (MIT, v1.0.0). This skill organizes rules by priority and provides decision-tree guidance for active code review and refactoring.
When to Activate
- Writing or reviewing React/Next.js code for performance
- Diagnosing slow page loads, slow interactions, or high CPU on the client
- Auditing bundle size or Lighthouse Core Web Vitals regressions
- Removing waterfalls in Server Components / API routes
- Reducing client-side re-renders
- Optimizing long lists, animations, or hydration
- Auditing optimization choices in PRs touching
app/,pages/,components/, or data layers
Priority Index
| Priority | Category | Prefix | When it matters |
|---|---|---|---|
| 1 — CRITICAL | Eliminating Waterfalls | async- |
Anytime await is followed by independent await |
| 2 — CRITICAL | Bundle Size Optimization | bundle- |
First-load JS, route-level imports, third-party libs |
| 3 — HIGH | Server-Side Performance | server- |
RSC, Server Actions, API routes, SSR |
| 4 — MEDIUM-HIGH | Client-Side Data Fetching | client- |
SWR / TanStack Query / raw fetch in hooks |
| 5 — MEDIUM | Re-render Optimization | rerender- |
High-frequency state updates, parent-child fan-out |
| 6 — MEDIUM | Rendering Performance | rendering- |
Long lists, animations, hydration |
| 7 — LOW-MEDIUM | JavaScript Performance | js- |
Hot loops, frequent allocations |
| 8 — LOW | Advanced Patterns | advanced- |
Effect-event integration, stable refs |
1. Eliminating Waterfalls (CRITICAL)
"Waterfalls are the #1 performance killer" — every sequential
awaitadds full network latency.
Cheap conditions before await
Check sync conditions (props, env, hardcoded flags) before awaiting remote data.
// INCORRECT
async function Page({ id }: { id: string }) {
const flag = await getFlag("show-page");
if (!flag || !id) return null;
const data = await getData(id);
// ...
}
// CORRECT — short-circuit on cheap sync condition first
async function Page({ id }: { id: string }) {
if (!id) return null;
const flag = await getFlag("show-page");
if (!flag) return null;
const data = await getData(id);
}
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.
- 2d ago First seen · 576 lines · 86 tokens per session scan A ac76e8694d4f
react-performance is a skill published in the GitHub repository JunMystery/Agent-Guidance-Python (2 stars, last pushed 1mo ago), licensed MIT. It adds 86 tokens to every session and 4,471 once invoked, about $0.0004 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-09-03.
Other skills, from other repositories
portable-text-serialization
Render and serialize Portable Text to React, Svelte, Vue, Astro, HTML, Markdown, and plain text. Use when implementing Portable Text rendering in any frontend framework, building custom serializers for non-standard block types, converting Portable Text to HTML strings server-side, converting Portable Text to Markdown…
frontmcp-auth-ui
Use when customizing, branding, or replacing the built-in FrontMCP OAuth pages (the login, consent, federated-select, incremental-authorization, and error pages) with your own React components. Covers the auth.ui slot-to-file map and auth.extras name-to-handler map on the auth config (no decorator, no class); the…
react-ui-patterns
Modern React UI patterns for loading states, error handling, and data fetching. Use when building UI components, handling async data, or managing UI states.
artifacts-builder
Suite of tools for creating elaborate, multi-component AI artifacts viewer HTML artifacts using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - not for simple single-file HTML/JSX artifacts.
web-artifacts-builder
Suite of tools for creating elaborate, multi-component HTML applications using modern frontend web technologies (React, Tailwind CSS, shadcn/ui). Use for complex artifacts requiring state management, routing, or shadcn/ui components - Bundles into a single HTML file for preview.
tanstack-router-patterns
Canonical patterns for the web app's TanStack Router + TanStack Query setup — file-based routing, the generated route tree, data fetching, and API client wiring. Use when adding routes, pages, or data fetching in apps/web.