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 kriscard/Skills --skill reactgit clone --depth 1 https://github.com/kriscard/SkillsWrote 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/kriscard/skills/react)<a href="https://agentmods.dev/skills/kriscard/skills/react"><img src="https://agentmods.dev/badge/skills/kriscard/skills/react/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/kriscard/skills/react"><img src="https://agentmods.dev/badge/skills/kriscard/skills/react.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.00089 | $0.01216 |
| Opus 5.5 | $0.00036 | $0.00486 |
| Sonnet 5.5 | $0.00018 | $0.00243 |
| Haiku 4.5 | $0.00009 | $0.00122 |
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 11d 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 — 125 lines — stays where its author put it; the contents beside it link to each section on GitHub.
React Engineering
Build React from ownership and composition: keep state with its owner, derive during render, synchronize only with external systems, and introduce abstraction after real variation appears. Match the user's request—build, recommend, or audit—without forcing a full checklist onto focused work.
Workflow
1. Detect the React environment
Inspect installed React and framework versions, compiler configuration, renderer, routing/data libraries, and nearby conventions. Determine whether Server Components or a client-only renderer are actually available. Use project or current primary docs for version-sensitive mechanics.
When the task depends on Next.js routes, Cache Components, Server Actions, App Router
file conventions, or framework caching, load nextjs-app-architecture instead of
restating those mechanics here.
Complete when: React capabilities and framework ownership are known.
2. Trace ownership and data flow
Identify the component that owns each piece of state, the consumers that need it, the server-cache boundary, URL state, form state, and external systems. Trace props and context through the target interaction before changing abstractions.
Complete when: every changed state and side effect has one named owner and data path.
3. Choose the simplest composition
Start top-down with plain components and explicit props. Extract when a responsibility, real reuse, independent variation, or testing seam appears. Compound components, providers, slots, and render callbacks must be earned by multiple compositions or cross-tree coordination.
Complete when: the component API exposes stable choices while volatile implementation stays behind the boundary.
4. Model state and synchronization
Keep state local until coordination pressure requires the nearest shared owner. For a composable family with real cross-tree coordination, use a provider contract that separates state, actions, and imperative metadata from its implementation. Keep server cache, URL state, form state, and application state in their appropriate systems.
What ships with it
8 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.
- references/async-and-suspense.md 3.0 KB
- references/bundle-and-perf-investigation.md 1.9 KB
- references/composition.md 3.9 KB
- references/portals-and-stacking-context.md 2.1 KB
- references/re-renders.md 2.2 KB
- references/react-19.md 1.9 KB
- references/state-and-data-flow.md 3.0 KB
- references/useeffect-antipatterns.md 2.8 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.
- 11d ago Changed · -55 lines · -25 tokens per session a7fe8efe534e
- 1mo ago First seen · 180 lines · 114 tokens per session scan A e3ecf2caa16a
react is a skill published in the GitHub repository kriscard/Skills (14 stars, last pushed 2d ago), licensed MIT. It adds 89 tokens to every session and 1,216 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
security-specialist
Runs security audits on codebases — full scans, diff reviews, threat models, vulnerability triage, remediation guidance, and finding tracking. Activate when the user says "security scan", "audit this repo", "review this PR for security", "threat model", "triage vulnerabilities", "fix this vuln", or "track findings".
agent-plugin-eval
Audit, score, and compare repositories containing portable Agent Plugins against the official Agent Plugins specification. Use when asked to review a plugin repo, check plugin.json or mcp.json conformance, assess bundled skills and MCP servers, produce an evidence-cited 0–100 plugin scorecard, identify release…
react-code-review
Provides comprehensive code review capability for React applications, validates component architecture, hooks usage, React 19 patterns, state management, performance optimization, accessibility compliance, and TypeScript integration. Use when reviewing React code changes, before merging pull requests, after…
fw-review
Full Freshworks marketplace app review — iparams, frontend, serverless, FDK, security, and structured text report output — in one skill.
battle-tested-engineer
Engineering judgment for code write/refactor/test and frontend UI. Trigger on code review, legacy cleanup, tests, UI with data, bloat/over-engineer complaints — even with no explicit mention, before any diff/rewrite/test suite. Output ultra-terse caveman style; code, commits, PR desc, security warnings stay normal…
bulletproof-building-and-review
Use when reviewing code adversarially or building production-bound features where rigour matters more than speed. Required for code reviews ending in a verdict (PASS/HOLD), when verifying that "tests pass" actually proves a feature works end-to-end, before closing findings as non-issues, before signing off your own…