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 magicpatterns/agent-plugins --skill recreate-as-reactgit clone --depth 1 https://github.com/magicpatterns/agent-pluginsWrote 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/magicpatterns/agent-plugins/recreate-as-react)<a href="https://agentmods.dev/skills/magicpatterns/agent-plugins/recreate-as-react"><img src="https://agentmods.dev/badge/skills/magicpatterns/agent-plugins/recreate-as-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/magicpatterns/agent-plugins/recreate-as-react"><img src="https://agentmods.dev/badge/skills/magicpatterns/agent-plugins/recreate-as-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.00120 | $0.05797 |
| Opus 5.5 | $0.00048 | $0.02319 |
| Sonnet 5.5 | $0.00024 | $0.01159 |
| Haiku 4.5 | $0.00012 | $0.00580 |
Grade A, and why
recreate-as-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 — 237 lines — stays where its author put it; the contents beside it link to each section on GitHub.
Recreate as React
Turn a component, screen, or pasted snippet into a self-contained React + TypeScript + Tailwind prototype — a small set of files that compiles and renders standalone (in the Magic Patterns prototype environment or any React sandbox) and reproduces the original's styling as faithfully as possible.
Method: static. Read the source and resolve its design tokens by inspection — do NOT run the app, Storybook, or a browser. Fidelity comes from carefully tracing whatever styling system the codebase uses down to concrete values, then re-expressing them in Tailwind (or the source's own props/tokens).
This works for any codebase. The styling system varies (Tailwind, CSS/SCSS, CSS Modules, styled-components / Emotion, vanilla-extract, a design-system library like Radix/MUI/Chakra/Mantine/shadcn, or plain inline styles). Step 2 is about identifying which one is in play and following the chain to real pixel/color/font values.
Where this runs — the Magic Patterns environment
The file set this skill produces is exactly the scaffold Magic Patterns renders (App.tsx, index.tsx, index.css, tailwind.config.js), so it can be written straight into a Magic Patterns design. Conform to that environment so the upload compiles and renders:
- React + TypeScript. No
any— define prop types/interfaces. - Named exports only — never
export defaulta React component. - One React component per file; split large screens into sub-components rather than a monolith.
- Tailwind CSS v3 — use it for net-new UI; for reproduced UI, prefer the source's own styling (see Step 2). Keep the
index.cssimports in the exact order below. - Icons:
lucide-reactis available (import full names ending inIcon, e.g.UserIcon). For fidelity, inlining the exact<svg>markup copied 1:1 from source is preferred and also compiles in MP — never guess or redraw an icon. - Routing (only if needed):
BrowserRouterfromreact-router-dom. - Fonts:
@import url(...)inindex.css— nevernext/font. - Images: absolute URLs only (the original remote URL or the project's served URL) — app-relative paths won't resolve.
- Package preferences when applicable:
sonner(toasts),recharts(charts),@xyflow/react(node/canvas), Leaflet (maps). Avoid@react-three/fiber/@react-three/drei. - The code must compile — no unresolved imports, missing symbols, or type errors. If a dependency is unavailable, stub it locally so it still compiles.
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 · 237 lines · 120 tokens per session scan A 5cf9919c78c7
recreate-as-react is a skill published in the GitHub repository magicpatterns/agent-plugins (1 stars, last pushed 2mo ago), licensed MIT. It adds 120 tokens to every session and 5,797 once invoked, about $0.0005 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-31.
Other skills, from other repositories
client-setup
Create a vanilla tRPC client with createTRPCClient (), configure link chain with httpBatchLink/httpLink, dynamic headers for auth, transformer on links (not client constructor). Infer types with inferRouterInputs and inferRouterOutputs. AbortController signal support. TRPCClientError typing.
adapter-express
Mount tRPC as Express middleware with createExpressMiddleware() from @trpc/server/adapters/express. Access Express req/res in createContext via CreateExpressContextOptions. Mount at a path prefix like app.use('/trpc', ...). Avoid global express.json() conflicting with tRPC body parsing for FormData.
trpc-router
Entry point for all tRPC skills. Decision tree routing by task: initTRPC.create(), t.router(), t.procedure, createTRPCClient, adapters, subscriptions, React Query, Next.js, links, middleware, validators, error handling, caching, FormData.
custom-features
Implement a Table v9 plugin when built-ins and typed meta are insufficient. Covers FeatureMaps, runtime lifecycle hooks, prototypes, and a complete checked example.
fast-typescript-check
Keep www-sacred's TypeScript fast to type-check and fast to run. Use when touching the ASCII/canvas animation components (the only real per-frame code here), tightening type-check wall-clock, or auditing a change for runtime or compiler regressions. Scoped to this repo — a React 19 / Next.js 16 component library plus…
port-sacred-terminal-ui-to-typescript-cli
Take a React Window.tsx (or any sacred component) and produce a terminal CLI screen written in TypeScript that uses Simulacrum — the sacred CLI framework in scripts/cli/lib/.