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 gaia-react/gaia --skill react-codegit clone --depth 1 https://github.com/gaia-react/gaiaWrote 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/gaia-react/gaia/react-code)<a href="https://agentmods.dev/skills/gaia-react/gaia/react-code"><img src="https://agentmods.dev/badge/skills/gaia-react/gaia/react-code/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/gaia-react/gaia/react-code"><img src="https://agentmods.dev/badge/skills/gaia-react/gaia/react-code.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector warn
SkillSpector: 1 finding, up to medium
These are SkillSpector’s own severities. On a checked sample its high-severity flags on skills were ~96% false positives — a documented command, a public API, a “never do X” rule — so we show them as a caution to read, not a verdict. Why →
- medium Prompt Injection · line 134 Large whitespace padding was detected (a block of blank lines or a long run of spaces). This can push injected instructions below or to the right of the visible area so a human reviewer never sees them while the agent still reads them. Manual review of the hidden content is recommended.Fix: Remove the large whitespace padding (blank-line blocks or long space runs) and review any content hidden below or to the right of it. Keep skill files compact and reviewable so no instructions can be
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.00110 | $0.04099 |
| Opus 5.5 | $0.00044 | $0.01640 |
| Sonnet 5.5 | $0.00022 | $0.00820 |
| Haiku 4.5 | $0.00011 | $0.00410 |
Grade A, and why
react-code 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 today.
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 — 210 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Code
Write and edit React components, pages, routes, hooks, and forms following project conventions.
Contents: Reach for the Platform First; Pre-Flight Gates; Memoization: compiler-first; Component Structure; Data Loading; Route-Page Architecture; References.
Reach for the Platform First
Before installing a package or hand-rolling a primitive, walk this ladder and stop at the first hit:
- Existing project code, a component, hook, or util already covers it (form inputs → Gate 2).
- Web platform, a browser API or native element does the job:
Intl(dates, numbers, lists, plurals),URL/URLSearchParams,crypto.randomUUID(),structuredClone(),AbortController, nativeArray/Objectmethods,<dialog>, modern CSS (:has(), container queries). - Already-installed dependency, check
package.jsonbefore adding a sibling that does the same job. For component/hook traps Claude often hand-rolls (client-only/useHydrated, sse, debounce-fetcher), see the remix-utils decision map atwiki/dependencies/remix-utils.mdbefore reinventing. - New dependency, only when 1-3 genuinely fall short; the added weight has to earn its place.
- Custom code, last resort, kept minimal.
The largest real savings come from Intl over date/number-formatting libraries and native collection methods over lodash/underscore (already enforced by you-dont-need-lodash-underscore). Reaching for the platform replaces a needless dependency or bespoke widget; it never overrides accessibility, input validation, or an existing project component (a wrapper exists for a reason).
Pre-Flight Gates
Most hook bugs come from misidentifying the type of problem being solved. Before writing or editing hooks, run through these gate, it only applies when the relevant pattern is present in your changes.
Gate 1: Hook Check
Before writing useEffect: decide whether it should be an Effect at all. Lint (react-you-might-not-need-an-effect) reports the ones that should not: state derived from props or state, user-event logic, chained updates, notifying a parent, and resetting state on a prop change. An Effect is right when it synchronizes with an external system (browser API, third-party widget, network). Add cleanup; for a fetch, pass an AbortController signal and abort it in the cleanup (@eslint-react/web-api-no-leaked-fetch requires it). An async client with no way to cancel guards its setter with an ignore flag instead.
What ships with it
3 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.
- today Changed 6e993cd58b46
- yesterday Changed · +2 lines 76428718e894
- 2d ago Changed · -23 lines 5aa4cdcb561b
- 8d ago Changed · -77 tokens per session 8a7c9882d569
- 10d ago Changed · +13 lines 4ad98f1306a8
- 11d ago Changed · +16 lines · +11 tokens per session d8797b827fe4
- 12d ago Changed · +2 lines 6d9c860d023d
- 13d ago Changed d5787180fc63
- 16d ago Changed 7ce8f3d20f2f
- 1mo ago First seen · 200 lines · 176 tokens per session scan A 39a541032450
react-code is a skill published in the GitHub repository gaia-react/gaia (23 stars, last pushed yesterday), licensed MIT. It adds 110 tokens to every session and 4,099 once invoked, about $0.0004 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
mcp-server
A troubleshooting and specification-checking guide for MCP servers. MCP is a protocol that lets an AI client discover and call tools, read resources, and use prompts from a server.
devtools-react
React adapter for the json-render devtools inspector. Use whenever the user wants to add, configure, or troubleshoot @json-render/devtools-react in a React json-render app, including spec inspection, state editing, action and stream timelines, catalog browsing, or DOM picking.
migrate-oxlint
Guide for migrating a project from ESLint to Oxlint. Use when asked to migrate, convert, or switch a JavaScript/TypeScript project's linter from ESLint to Oxlint.
inspector-workbench
Runs Inspector UI work on the standalone Threads state lab so the agent can see the overlay. Use when a CopilotKit employee asks an agent to fix, polish, add, or debug Inspector UI, chrome, panes, overlay actions, launcher, Home, Threads, Playground, Memory, or any visual behavior in @copilotkit/web-inspector. Don't…
react-doctor
Use when finishing a feature, fixing a bug, before committing React code, or when the user types /doctor, asks to scan, triage, or clean up React diagnostics. Covers lint, accessibility, bundle size, architecture. Includes a regression check and a full local-triage workflow that fetches the canonical playbook.
react-doctor
Diagnose and fix React codebase health issues. Use when reviewing React code, fixing performance problems, auditing security, or improving code quality.