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 HarKro753/claude-copy --skill reactgit clone --depth 1 https://github.com/HarKro753/claude-copyWrote 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/harkro753/claude-copy/react)<a href="https://agentmods.dev/skills/harkro753/claude-copy/react"><img src="https://agentmods.dev/badge/skills/harkro753/claude-copy/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/harkro753/claude-copy/react"><img src="https://agentmods.dev/badge/skills/harkro753/claude-copy/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.00158 | $0.03187 |
| Opus 5.5 | $0.00063 | $0.01275 |
| Sonnet 5.5 | $0.00032 | $0.00637 |
| Haiku 4.5 | $0.00016 | $0.00319 |
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 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 — 246 lines — stays where its author put it; the contents beside it link to each section on GitHub.
clone:react — capture session → verified shadcn routes
In: a session folder — pages.json + one folder per page holding ref.png,
source.html, computed.json, meta.json.
Out: a vite + shadcn project at apps/<site>/ui/, one React component per
route in ui/src/routes/, themed from ui/theme.json, where every captured
state's check exits 0 against its own ref.png.
Read references/pipeline.md first — the
CLI, the phases, the loop discipline and the four hard nevers are there and are
not repeated here. This file is only what differs for React.
clone prep <session> --target react
clone extract | resolve | cluster
clone init | map | check | build
Why components, and where the project lives
A screenshot is the resting frame of components that have behaviour. A
command palette cloned as HTML is a div with a fake list; composed from
Command it filters, takes ⌘K, traps focus and returns a value. Hover, focus
rings, disabled states and keyboard nav are all in the component and none of them
are in ref.png. Cloning frames throws that away every time.
The project lives inside the capture folder it clones — apps/<site>/ui/,
one per site, not one for the repo. It costs a node_modules per clone and buys
three things: a tree you can hand to someone whole, a components/ui/ that is
unambiguously this site's to edit, and no path in the loop that leaves the app
folder — the fonts and baked glyphs the route asks for are project assets under
ui/public/, not a sibling directory two levels up.
What prep does differently: states, not duplicate routes
A URL that differs only in its fragment is folded into a state.
new: 1 component, 3 states — base, settings-general, settings-customize-connectors
Under a static target those three captures are three routes, which means
hand-cloning the same shell into three files and fixing every bug three times.
Here they are one component and a state prop, each still gated against its own
ref.png. This is most of what the target buys.
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 · 246 lines · 158 tokens per session scan A 28410f1c654c
react is a skill published in the GitHub repository HarKro753/claude-copy (18 stars, last pushed 2mo ago), licensed MIT. It adds 158 tokens to every session and 3,187 once invoked, about $0.0006 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
genpage
Creates, updates, and deploys Power Apps generative pages for model-driven apps using React v17, TypeScript, and Fluent UI V9. Orchestrates specialist agents for planning, entity creation, and code generation. Use it when user asks to build, retrieve, or update a page in an existing Microsoft Power Apps model-driven…
add-localization
Adds or extends multilingual localization in a Power Pages code-site SPA. Use whenever the user asks to translate, localize, internationalize, support multiple languages, add a language selector, add locale routes, repair an i18n setup, or add languages to an existing React, Vue, Angular, or Astro Power Pages site.
create-code-app
Creates Power Apps code apps using React and Vite. Use when building code apps, scaffolding projects, or deploying to Power Platform.
pcf
Builds, tests, diagnoses, upgrades, deploys and verifies Power Apps component framework (PCF) code components for model-driven apps and Power Pages — field and dataset controls, standard and virtual (React) — from Microsoft-maintained templates and recipes pinned to a tested version matrix. Runs quality gates…
recipe-front-review
Reviews completed frontend implementation for governing-source compliance, scope economy, repository quality, and security, then applies user-approved React corrections.
frontend-ai-guide
Applies React/TypeScript-specific technical decision criteria, anti-pattern detection, debugging, and frontend quality gates. Use when reviewing components, hooks, browser behavior, or frontend implementation completeness.