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 agentmods add skills/magicpatterns/agent-plugins/recreate-as-reactnpx skills add magicpatterns/agent-plugins --skill recreate-as-reactgit clone --depth 1 https://github.com/magicpatterns/agent-pluginsWhat 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 | $0.00120 | $0.05797 |
| Opus 5 | $0.00060 | $0.02899 |
| Sonnet 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 yesterday.
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.
- yesterday 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 (0 stars, last pushed 27d ago), licensed MIT. It adds 120 tokens to every session and 5,797 once invoked, about $0.0006 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-08-31.
Other skills, from other repositories
systematic-debugging
Use when encountering any bug, test failure, or unexpected behavior, before proposing fixes.
next-cache-components-adoption
Turn on Cache Components in a Next.js app and resolve the blocking routes it surfaces. Use when the user wants to enable, adopt, or migrate to Cache Components, flip the cacheComponents flag, work through a flood of blocking-prerender / instant validation errors, run the cache-components-instant-false codemod, or…
babysit-pr
Babysit a GitHub pull request after creation by continuously polling review comments, CI checks/workflow runs, and mergeability state until the PR is merged/closed or user help is required. Diagnose failures, retry likely flaky failures up to 3 times, auto-fix/push branch-related issues when appropriate, and keep…
imagegen
Generate or edit raster images when the task benefits from AI-created bitmap visuals such as photos, illustrations, textures, sprites, mockups, or transparent-background cutouts. Use when Codex should create a brand-new image, transform an existing image, or derive visual variants from references, and the output…
cpu-profile-analysis
Analyze V8/Chrome CPU profiles (.cpuprofile) and DevTools trace files (Trace-.json). Use when: profiling performance, investigating slow functions, comparing code paths, finding bottlenecks, analyzing timeToRequest, understanding call trees from sampling profiler data, analyzing layout/paint/rendering, investigating…
next-cache-components-optimizer
Drive a Next.js route to instant navigation by setting up an agentic loop, under Cache Components / PPR, on initial load (hard navigation) and client-side navigation (soft navigation). Encode the goal as a failing @next/playwright instant() e2e and work it to green, one verified route at a time; the shipped test then…