Borrowing it
Nothing to install: this file belongs to mxyhi/token_proxy. Take a copy, put it at the same path in your own repository, and replace the rules that are about this project with yours.
curl -O https://raw.githubusercontent.com/mxyhi/token_proxy/main/.agents/skills/react-best-practices/SKILL.mdgit clone --depth 1 https://github.com/mxyhi/token_proxyWrote 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/mxyhi/token_proxy/react-best-practices)<a href="https://agentmods.dev/skills/mxyhi/token_proxy/react-best-practices"><img src="https://agentmods.dev/badge/skills/mxyhi/token_proxy/react-best-practices/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/mxyhi/token_proxy/react-best-practices"><img src="https://agentmods.dev/badge/skills/mxyhi/token_proxy/react-best-practices.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
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.00054 | $0.00777 |
| Opus 5.5 | $0.00022 | $0.00311 |
| Sonnet 5.5 | $0.00011 | $0.00155 |
| Haiku 4.5 | $0.00005 | $0.00078 |
Grade A, and why
react-best-practices 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 1mo 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 — 60 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Best Practices
Use this skill to apply Vercel Engineering's React and Next.js performance rules without loading the full 70-rule guide up front.
For this repository, treat React 19 + Vite + Tauri as the default app context. Next.js, RSC, and server-action rules apply only when editing Next.js code or reference projects.
Workflow
- Classify the task by performance surface.
- Read only the matching rule files under
references/rules. - Apply the smallest code change that matches the rule and the local code style.
- Verify with the nearest test, typecheck, build, or browser check.
Do not apply rules mechanically. Prefer evidence from the current component, data flow, and user interaction path.
Rule Groups
Read references/rules/_sections.md when you need the category index.
| Priority | Group | Read When |
|---|---|---|
| 1 | async-* |
Removing async waterfalls, parallelizing independent work, delaying awaits until needed |
| 2 | bundle-* |
Reducing client bundle cost, dynamic imports, direct imports, third-party loading |
| 3 | server-* |
Next.js server code, RSC serialization, server caching, server fetch parallelism |
| 4 | client-* |
Client data fetching, SWR-style dedupe, browser storage, global event listeners |
| 5 | rerender-* |
Hooks, props, memoization, derived state, callback stability, frequent updates |
| 6 | rendering-* |
DOM/rendering cost, hydration behavior, content visibility, script/resource hints |
| 7 | js-* |
Hot JavaScript paths, repeated lookups, loops, storage reads, layout thrashing |
| 8 | advanced-* |
Effect events, latest refs, app initialization, stable callback refs |
High-Signal Defaults
- Start with
async-*andbundle-*when performance problems are broad or user-visible. - For React component changes, check
rerender-derived-state-no-effect.md,rerender-move-effect-to-event.md, andrerender-no-inline-components.mdearly. - Use event handlers for user actions. Use
useEffectonly to synchronize with external systems. - Avoid adding
useMemoormemofor cheap primitive calculations. Readrerender-simple-expression-in-memo.mdfirst. - For lists and repeated lookups, check
js-index-maps.md,js-set-map-lookups.md, andrendering-content-visibility.md. - For this Tauri/Vite app, skip Next.js-only fixes unless the edited file is in a Next.js reference or the user asks for Next.js guidance.
What ships with it
60 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.
- agents/openai.yaml 202 B
- references/rules/_sections.md 1.5 KB
- references/rules/advanced-effect-event-deps.md 1.8 KB
- references/rules/advanced-event-handler-refs.md 1.4 KB
- references/rules/advanced-init-once.md 958 B
- references/rules/advanced-use-latest.md 1.0 KB
- references/rules/async-api-routes.md 1.1 KB
- references/rules/async-cheap-condition-before-await.md 1.2 KB
- references/rules/async-defer-await.md 2.1 KB
- references/rules/async-dependencies.md 1.3 KB
- references/rules/async-parallel.md 654 B
- references/rules/async-suspense-boundaries.md 2.4 KB
- references/rules/bundle-analyzable-paths.md 2.3 KB
- references/rules/bundle-barrel-imports.md 2.7 KB
- references/rules/bundle-conditional.md 949 B
- references/rules/bundle-defer-third-party.md 920 B
- references/rules/bundle-dynamic-imports.md 791 B
- references/rules/bundle-preload.md 1.1 KB
- references/rules/client-event-listeners.md 1.9 KB
- references/rules/client-localstorage-schema.md 1.9 KB
- references/rules/client-passive-event-listeners.md 1.6 KB
- references/rules/client-swr-dedup.md 1.1 KB
- references/rules/js-batch-dom-css.md 3.2 KB
- references/rules/js-cache-function-results.md 1.9 KB
- references/rules/js-cache-property-access.md 532 B
- references/rules/js-cache-storage.md 1.6 KB
- references/rules/js-combine-iterations.md 753 B
- references/rules/js-early-exit.md 1.1 KB
- references/rules/js-flatmap-filter.md 1.4 KB
- references/rules/js-hoist-regexp.md 1.0 KB
- references/rules/js-index-maps.md 837 B
- references/rules/js-length-check-first.md 1.7 KB
- references/rules/js-min-max-loop.md 2.2 KB
- references/rules/js-request-idle-callback.md 2.6 KB
- references/rules/js-set-map-lookups.md 532 B
- references/rules/js-tosorted-immutable.md 1.7 KB
- references/rules/rendering-activity.md 564 B
- references/rules/rendering-animate-svg-wrapper.md 1.2 KB
- references/rules/rendering-conditional-render.md 980 B
- references/rules/rendering-content-visibility.md 815 B
- references/rules/rendering-hoist-jsx.md 1.0 KB
- references/rules/rendering-hydration-no-flicker.md 2.2 KB
- references/rules/rendering-hydration-suppress-warning.md 872 B
- references/rules/rendering-resource-hints.md 2.5 KB
- references/rules/rendering-script-defer-async.md 1.8 KB
- references/rules/rendering-svg-precision.md 588 B
- references/rules/rendering-usetransition-loading.md 2.0 KB
- references/rules/rerender-defer-reads.md 973 B
- references/rules/rerender-dependencies.md 824 B
- references/rules/rerender-derived-state-no-effect.md 1.2 KB
- references/rules/rerender-derived-state.md 728 B
- references/rules/rerender-functional-setstate.md 2.9 KB
- references/rules/rerender-lazy-state-init.md 2.0 KB
- references/rules/rerender-memo-with-default-value.md 1.1 KB
- references/rules/rerender-memo.md 1.1 KB
- references/rules/rerender-move-effect-to-event.md 1.2 KB
- references/rules/rerender-no-inline-components.md 2.1 KB
- references/rules/rerender-simple-expression-in-memo.md 1018 B
- references/rules/rerender-split-combined-hooks.md 1.8 KB
- references/rules/rerender-transitions.md 1.0 KB
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.
- 1mo ago First seen · 60 lines · 54 tokens per session scan A 6e30e0bbde47
react-best-practices is a skill published in the GitHub repository mxyhi/token_proxy (94 stars, last pushed yesterday), licensed Apache-2.0. It adds 54 tokens to every session and 777 once invoked, about $0.0002 per session on Opus 5.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-30.
Other skills, from other repositories
bootstrap-realtime-eval
Bootstrap a new realtime eval folder inside this cookbook repo by choosing the right harness from examples/evals/realtimeevals, scaffolding prompt/tools/data files, generating a useful README, and validating it with smoke, full eval, and test runs. Use when a user wants to start a new crawl, walk, or run realtime eval…
expense-review-policy
Review invoices and contracts against accounts-payable policy before human approval.
ax-rust-signature
Use when writing Rust code with axllm for string signatures, field descriptors, JSON schema output, validation, and typed tool argument shapes.
horizon-browser
Control, inspect, or audit Horizon browser panels through public browser MCP tools.
ax-rust-llm
Use when writing Rust code with axllm for using the generated Ax package, factory functions, package docs, examples, and API reference.
horizon-device
Manage Horizon native VNC Device panels and drive isolated local desktops for simulators and native application tests through devicepanel and the horizon-device CLI/MCP. Device panels work on every platform; driving an isolated desktop works on Linux with X11 only. Browser pages use horizon-browser.