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/phuonghx/aim-cli/nextjs-react-expertnpx skills add phuonghx/aim-cli --skill nextjs-react-expertgit clone --depth 1 https://github.com/phuonghx/aim-cliWhat 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.00078 | $0.01341 |
| Opus 5 | $0.00039 | $0.00671 |
| Sonnet 5 | $0.00016 | $0.00268 |
| Haiku 4.5 | $0.00008 | $0.00134 |
Grade A, and why
nextjs-react-expert 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 yesterday.
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 — 126 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React & Next.js Performance Playbook
The fastest wins almost always come from the same two places: stop fetching data one request at a time, and stop shipping JavaScript the user never runs. Work the list below in roughly that order — structural fixes first, micro-optimizations last.
How to use these notes
The detail lives in the numbered reference files, not here. Open only the file that matches the problem in front of you. Each file is self-contained and groups a set of concrete rules with before/after code.
Reference index
| File | Severity | Reach for it when |
|---|---|---|
1-async-eliminating-waterfalls.md |
Highest | Pages stall on chained awaits; requests run in series |
2-bundle-bundle-size-optimization.md |
Highest | First-load JS is heavy; interactivity arrives late |
3-server-server-side-performance.md |
High | SSR is slow, server actions need hardening, RSC payloads bloat |
4-client-client-side-data-fetching.md |
Medium-high | Duplicate client requests, SWR, storage, listener sharing |
5-rerender-re-render-optimization.md |
Medium | Components render too often; memoization questions |
6-rendering-rendering-performance.md |
Medium | Long lists, hydration flashes, image and SVG cost |
7-js-javascript-performance.md |
Lower | Tight-loop and algorithmic clean-ups in hot code |
8-advanced-advanced-patterns.md |
Situational | One-time init, callback refs, effect-event hooks |
9-cache-components.md |
Next.js 16+ | use cache, cacheLife, cacheTag, PPR |
Picking the right file fast
Symptom Start here
------------------------------ ----------------------------
Long time-to-interactive → Files 1 and 2
First-load bundle too big → File 2 (splitting, deep imports)
Server response is slow → File 3 (parallel RSC, streaming)
UI janks / renders too much → File 5 (render hygiene)
Scrolling / paint is rough → File 6 (virtualization, layout)
Redundant client requests → File 4 (SWR, dedupe)
On Next.js 16 caching → File 9 (Cache Components)
What ships with it
11 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.
- 1-async-eliminating-waterfalls.md 8.1 KB
- 2-bundle-bundle-size-optimization.md 5.9 KB
- 3-server-server-side-performance.md 10 KB
- 4-client-client-side-data-fetching.md 6.1 KB
- 5-rerender-re-render-optimization.md 12 KB
- 6-rendering-rendering-performance.md 8.2 KB
- 7-js-javascript-performance.md 13 KB
- 8-advanced-advanced-patterns.md 3.6 KB
- 9-cache-components.md 3.1 KB
- scripts/convert_rules.py 7.4 KB runs code
- scripts/react_performance_checker.py 11 KB runs code
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.
- yesterday First seen · 126 lines · 78 tokens per session scan A 58629ec12dd0
nextjs-react-expert is a skill published in the GitHub repository phuonghx/aim-cli (1 stars, last pushed 2mo ago), licensed MIT. It adds 78 tokens to every session and 1,341 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-08-31.
Other skills, from other repositories
hs-release
Cut a core Hindsight release (vX.Y.Z) and open the changelog + blog PR. Use when asked to cut/start a release, bump the version, or publish a new Hindsight version.
hindsight-local
Store user preferences, learnings from tasks, and procedure outcomes. Use to remember what works and recall context before new tasks. (user).
research-repository
Build a repository that makes findings findable, reusable, and cumulative across teams. Use when the same research keeps getting redone. For synthesising one study, use affinity-diagram.
design-negotiation
Advocate for design quality, scope, and timeline with partners and leadership using evidence and shared goals. Use in the conversation itself. For the commercial vocabulary behind it, use business-design (ux-strategy).
user-persona
Build research-grounded personas with goals, frustrations, and behavioural patterns. Use when decisions need a consistent user reference. For one session's emotional snapshot use empathy-map; for motivation framing use jobs-to-be-done.
version-control-strategy
Define version control for design files, components, and libraries — branching, naming, and release. Use when file history is chaotic. For design system contribution rules, use design-system-governance (design-systems).