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 skills add jeremylongworth-source/AgentSkills --skill react-next-performance-optimizationgit clone --depth 1 https://github.com/jeremylongworth-source/AgentSkillsWrote 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/jeremylongworth-source/agentskills/react-next-performance-optimization)<a href="https://agentmods.dev/skills/jeremylongworth-source/agentskills/react-next-performance-optimization"><img src="https://agentmods.dev/badge/skills/jeremylongworth-source/agentskills/react-next-performance-optimization/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/jeremylongworth-source/agentskills/react-next-performance-optimization"><img src="https://agentmods.dev/badge/skills/jeremylongworth-source/agentskills/react-next-performance-optimization.svg" alt="Reviewed on agentmods" width="80" 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.00076 | $0.00553 |
| Opus 5 | $0.00038 | $0.00277 |
| Sonnet 5 | $0.00015 | $0.00111 |
| Haiku 4.5 | $0.00008 | $0.00055 |
Grade A, and why
react-next-performance-optimization 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 7d 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 — 45 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Next Performance Optimization
Core Workflow
- Identify framework version, router mode, rendering strategy, deployment target, slow user flow, and target metric.
- Measure before changing: build output, bundle analyzer, browser performance traces, React Profiler, Lighthouse/Web Vitals, server logs, or user-reported reproduction.
- Classify bottlenecks by layer: network, server/rendering, data fetching/cache, JavaScript bundle, hydration, re-rendering, layout/paint, images/fonts/scripts, third-party code, or backend.
- Fix highest-impact verified issues first. Avoid speculative memoization and broad rewrites.
- Re-measure after each meaningful change and record the before/after evidence.
- Leave a prevention note: what pattern caused the issue, how to avoid it, and what metric/test should catch recurrence.
Optimization Priorities
- Next.js: prefer Server Components by default, keep
"use client"boundaries narrow, use framework image/font/script/lazy-loading tools, and understand caching/revalidation before changing data flow. - React: reduce unnecessary state lifting, unstable props, expensive renders, effect loops, and avoidable context churn; use
memo,useMemo, anduseCallbackonly when they solve a measured problem or preserve stable references intentionally. - Bundles: inspect large dependencies, duplicate packages, client-only imports, heavy charts/editors/maps, and dynamic imports.
- Runtime: inspect long tasks, hydration cost, layout shifts, input delay, memory churn, and repeated network work.
- Core Web Vitals: optimize LCP, INP, and CLS with user-flow evidence, not only lab scores.
Freshness Rule
Verify current official React, Next.js, and web.dev guidance before making version-sensitive recommendations about React Compiler, Server Components, caching APIs, Turbopack, bundle analysis, or Web Vitals thresholds.
Deliverable Shape
For performance work, provide:
- Baseline evidence collected or missing
- Bottleneck classification
- Prioritized findings
- Recommended changes with expected impact
- Changes made, if editing
- Before/after verification
- Prevention notes and remaining risks
What ships with it
2 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
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.
- 7d ago First seen · 45 lines · 76 tokens per session scan A ad6653fc9260
react-next-performance-optimization is a skill published in the GitHub repository jeremylongworth-source/AgentSkills (1 stars, last pushed 8d ago), licensed MIT. It adds 76 tokens to every session and 553 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
open-design-homepage
A pixel-faithful, self-contained mirror of the live open-design.ai homepage — an interactive React Three Fiber / Next.js hero with a real-time 3D wordmark, sticker collage, variable fonts, and scroll-driven motion. First-party showcase of the visual ceiling for interactive web marketing surfaces.
remotion-video
Create motion graphics and videos using Remotion (React) with audio sync, web fonts, and TailwindCSS. Triggers on: "create a Remotion video", "React video", "motion graphics", "branded video", "product demo video", "video with voiceover". NOT for math animations, use concept-to-video.
react-best-practices
ORGII-specific React 19 performance review and implementation guidance, adapted from Vercel Engineering. Use for React performance, re-render, async waterfall, bundle, heavy dependency, virtualization, high-frequency event, Context/provider, or store-subscription work. Do not trigger for styling, copy changes, or…
modern-site-engineering
Integrate systems after frontend direction.
motion-react-microinteractions
Design tactile interaction feedback and timing.
nextjs-site-architecture
Coordinate the Next.js foundation and ownership.