Getting it into your agent
It runs from inside its repository, so the clone comes first — what it calls does not travel with the file alone.
git clone --depth 1 https://github.com/ericrisco/rsc-harnessnpx agentmods add skills/ericrisco/rsc-harness/reactWrote 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/ericrisco/rsc-harness/react)<a href="https://agentmods.dev/skills/ericrisco/rsc-harness/react"><img src="https://agentmods.dev/badge/skills/ericrisco/rsc-harness/react.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.00070 | $0.03018 |
| Opus 5 | $0.00035 | $0.01509 |
| Sonnet 5 | $0.00014 | $0.00604 |
| Haiku 4.5 | $0.00007 | $0.00302 |
Grade A, and why
react 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 3d 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 — 183 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React + Vite SPA — Components, State, Data Fetching (React 19.2, 2026)
Hand-off — picking dependencies. Which library to reach for (UI primitives, command menus,
toasts, OTP inputs, charts, virtualization, drag and drop, state, styling, theming) is
../ui-engineering/SKILL.md's — build vs adopt is decided there, before hand-rolling a component. Animating what you
install is ../motion-craft/SKILL.md's.
Build or review a fast, typed, correctly-architected client-side React single-page app bundled by Vite. No server runtime, no RSC tree, no framework router. Server-rendered React (App Router, server actions, SSR/SSG) is not this skill — that is
../nextjs/SKILL.md.
SDD gate — before writing feature code. If this skill fired on a new, non-trivial feature or behaviour change and there is no approved spec + plan under 02-DOCS/wiki/sdd/, stop and hand off to ../specify/SKILL.md: it runs brainstorm → spec → plan → tasks, then routes back here once the plan is approved. Build directly only for a genuinely one-line / low-risk change. Method: ../sdd/SKILL.md.
First: confirm it's a Vite SPA, not a framework
Read package.json before giving any advice — it stops you applying SSR/RSC patterns to a client SPA.
| Signal in package.json | Read it as | Where |
|---|---|---|
vite + react, no next |
Vite SPA | here |
next |
metaframework / RSC | ../nextjs/SKILL.md |
@react-router/dev |
RR framework mode/SSR (Remix successor) | ../nextjs/SKILL.md-shape |
react-router only |
RR library mode | here (Routing) |
expo / react-native |
native | ../react-native/SKILL.md |
Then pick the data layer (TanStack Query, always) and the router (React Router v7 library mode or TanStack Router).
What ships with it
6 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.
- 3d ago First seen · 183 lines · 70 tokens per session scan A 12f4dea85784
react is a skill published in the GitHub repository ericrisco/rsc-harness (65 stars, last pushed yesterday), licensed MIT. It adds 70 tokens to every session and 3,018 once invoked, about $0.0003 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
moai-design-tools
Design tool integration specialist covering Figma MCP, Pencil renderer, and Pencil-to-code export. Use when fetching design context from Figma, rendering Pencil designs, or exporting to React/Tailwind code.
moai-ref-react-patterns
React/Next.js component design patterns, state management strategies, and project structure reference for frontend development. Agent-extending skill that amplifies frontend domain work (spawned via Agent(general-purpose) with frontend instructions) with production-grade React patterns. NOT for: backend API design…
moai-domain-uiux
UI/UX design systems specialist covering accessibility, icons, theming, design tokens, and user experience patterns. Use when working on design systems, WCAG compliance, ARIA patterns, or dark mode theming.
moai-domain-frontend
Frontend development specialist covering React 19, Next.js 16, Vue 3.5, and modern UI/UX patterns with component architecture. Use when building web UIs, implementing components, optimizing frontend performance, or integrating state management.
frontend-ux-engineer
Use for frontend features, Next.js/React/Vue/Svelte UI, accessibility, responsive layout, design polish, state handling, forms, visual QA, or product workflow improvements.
nextjs-fullstack
Use for Next.js App Router, React Server Components, server actions, API routes, auth, database integration, caching, deployment, or full-stack product features.