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/voidmatcha/ui-clone-skills/ui-reverse-engineeringnpx skills add voidmatcha/ui-clone-skills --skill ui-reverse-engineeringgit clone --depth 1 https://github.com/voidmatcha/ui-clone-skillsWhat 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.00032 | $0.18902 |
| Opus 5 | $0.00016 | $0.09451 |
| Sonnet 5 | $0.00006 | $0.03780 |
| Haiku 4.5 | $0.00003 | $0.01890 |
Grade B, and why
ui-reverse-engineering scanned grade B with 2 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.
Reads agent configuration directoriesmediumAgent snooping
.claude/, .codex/, .gemini/ hold keys, settings and other credentials a mod has no legitimate need for.
- **Codex (interactive):** in the REPL (Codex CLI ≥ 0.128.0, `[features] goals = true` in `~/.codex/config.toml`), run `/goal Drive the ui-clone-skills pipeline for <ref-dir> until python -m ui_clone.goal <ref-dir> --che Makes network callslowCapability
Not a fault in itself. Listed so you know the mod talks to something, and to what.
⛔ **Hook-enforced**. When the project's `tmp/ref/` has no component dir with `regions.json` or `pipeline-state.json` yet, the `pre_bash` hook denies every direct `agent-browser`, `extract-dom.sh`, `dom-scaffold.sh`, `sec How it starts
The opening of the file, as written. The whole thing — 768 lines — stays where its author put it; the contents beside it link to each section on GitHub.
UI Reverse Engineering
Reverse-engineer a live website into a React + Tailwind component.
Hard Done Criteria
Headline rule (2026-05-22): Section-compare PASS is not done. The completion bar is runtime fidelity — the impl must reproduce the ref's DOM, assets, motion, interaction, and state-machine behavior at runtime, with browser-measured proof. Static visual match is necessary but never sufficient.
- Build pass is not done. A successful
npm run build, HTTP 200, page title, or local render only proves the app starts. - Spot check is not done. A few screenshots or manual visual checks cannot replace required artifacts.
- Pipeline verify PASS is required for clean completion. If it is not PASS, report the failing gate and keep fixing.
- Missing artifact is failure. Do not substitute generic notes, placeholder JSON, proxy mirrors, or source-reference manifests for the required evidence.
Host-neutral subagent dispatch
When a pipeline step names a role, delegate with the host's native mechanism
before falling back to inline execution. Claude Code uses the matching
.claude-plugin/agents/<role>.md adapter through Agent(...). Codex uses the
Codex native subagent with the same agent_type backed by
.codex/agents/<role>.toml (or an equivalent delegated worker when the runtime
exposes subagents differently). Inline fallback is allowed only when the host has
no delegated-worker surface; state that fallback and follow the same shared
contract file.
Role → contract mapping:
bundle-analyzer→js-animation-extraction.mdsource-forensics→source-forensics.mdgeneration-planner→enrichment.mdmismatch-diagnoser→diagnosis.mdvisual-debug-iterator→iteration-discipline.md
Done = all five tiers PASS
Completion requires runtime + transition + state-machine fidelity, not just static match. Treat anything below as INCOMPLETE.
- Static visual match
section-comparePASSfont-parity,image-fidelity,svg-dom-parity,required-media-coveragePASS
What ships with it
46 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.
- agent-environment-rules.md 9.3 KB
- agents/openai.yaml 342 B
- animation-detection.md 31 KB
- asset-extraction.md 19 KB
- asset-substitution.md 7.6 KB
- bundle-analysis.md 12 KB
- bundle-verification.md 8.7 KB
- canvas-replay-mode.md 15 KB
- canvas-webgl-extraction.md 8.9 KB
- component-generation.md 64 KB
- css-extraction.md 9.2 KB
- css-first-generation.md 12 KB
- diagnosis.md 37 KB
- dom-extraction.md 35 KB
- dom-splash-snapshot.md 4.3 KB
- dynamic-content-protocol.md 5.8 KB
- element-capture.md 3.9 KB
- enrichment.md 12 KB
- evals/evals.json 56 KB
- evals/trigger-eval.json 11 KB
- generation-pitfalls.md 48 KB
- gsap-alternatives.md 4.4 KB
- hover-timing-extraction.md 5.4 KB
- interaction-detection.md 21 KB
- iteration-discipline.md 11 KB
- js-animation-extraction.md 14 KB
- measurement.md 7.2 KB
- no-judgment.md 9.0 KB
- operational-rules.md 3.1 KB
- patterns.md 13 KB
- post-gen-verification.md 25 KB
- reference-index.md 5.7 KB
- responsive-detection.md 26 KB
- section-audit.md 16 KB
- site-detection.md 13 KB
- skip-zones.md 14 KB
- source-forensics.md 5.7 KB
- splash-extraction.md 25 KB
- state-structure-spec.md 4.1 KB
- style-audit.md 13 KB
- style-extraction.md 25 KB
- transition-coverage.md 9.5 KB
- transition-implementation.md 35 KB
- transition-spec-rules.md 13 KB
- verification-plan.md 12 KB
- webflow-ix2.md 14 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.
- 3d ago First seen · 768 lines · 32 tokens per session scan B b20d6917b84e
ui-reverse-engineering is a skill published in the GitHub repository voidmatcha/ui-clone-skills (8 stars, last pushed 3d ago), licensed Apache-2.0. It adds 32 tokens to every session and 18,902 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it B with 2 findings (reads agent configuration directories, makes network calls). No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-31.
Other skills, from other repositories
nuxt-ui
Build UIs with @nuxt/ui v4 — 125+ accessible Vue components with Tailwind CSS theming. Use when creating interfaces, customizing themes to match a brand, building forms, or composing layouts like dashboards, docs sites, and chat interfaces.
improve-app
Guided journey from a shipped app that works but feels rough to a product that fits the job, flows without friction, reads clearly, and persuades honestly. Orchestrates nine skills phase by phase - jobs-to-be-done, ux-heuristics, design-everyday-things, refactoring-ui, microinteractions, made-to-stick…
uniwind
Uniwind — Tailwind CSS v4 styling for React Native. Use when adding, building, or debugging components in a React Native project that uses Uniwind classNames. Covers setup, Metro config, global.css, theming, className props, accent- color props, platform/data/state/responsive variants, CSS variables, custom utilities…
weapp-tailwindcss-custom-build
将 weapp-tailwindcss 集成到自研构建器或高级流水线，覆盖 weapp-tailwindcss/core、generator、Vite/Webpack/Rspack/Rollup/Rolldown/Gulp 生命周期、ModuleGraph、Tailwind Scanner/source candidates、watch/HMR、source map、weapp-style-injector 和分包样式隔离。Use for custom bundlers, Node API, build adapters, asset graphs, loaders, plugins, or subpackage style…
weapp-tailwindcss-setup
为新项目配置当前 weapp-tailwindcss v5 与 Tailwind CSS 4，覆盖 uni-app、uni-app x、Taro、Mpx、原生小程序、weapp-vite、Vite、Webpack 5、Rspack、Gulp、独立 CLI 及小程序/H5/Web/App 多端。Use when setting up, installing, integrating, choosing a framework configuration, or building CSS with weapp-tw; 不用于旧版迁移、故障诊断、自研构建器、Expo React Native 或 ReactLynx。.
weapp-tailwindcss
协调 weapp-tailwindcss 全端任务并提供当前安全基线。Use when 用户泛化地询问 weapp-tailwindcss、Tailwind CSS in mini-programs、Web CLI、React Native 或 ReactLynx，或尚未明确是接入、迁移、排障、运行时、自定义构建还是原生跨端集成；具体任务优先路由到对应专用 skill。.