clone-ui
Installation
SKILL.md
clone-ui
Faithful, multi-source web UI cloning. Optimized for fidelity over speed: the goal is "looks identical to the source" first, "fits the project conventions" second.
Fidelity tiers (read this first)
The output quality of this skill scales with the source material available. Be upfront with the user about what tier you're working in:
| Tier | Inputs available | Achievable result |
|---|---|---|
| A — Full source | Live screenshot via browser MCP + rendered DOM + computed styles | "close visual match" → "pixel-perfect" possible |
| B — Static fetch | WebFetch HTML works (no JS hydration) + screenshot user provided | "close visual match" likely |
| C — Provided assets | User-supplied screenshot/HTML, no live access | "close visual match" if assets are good |
| D — Memory only | No fetchable source, no screenshot — only training data | "rough sketch" max — say so explicitly |
If you land in Tier D, stop and tell the user before writing code. A clone built from training data is almost certainly stale (sites change copy/layout often) and the user is better served by capturing a screenshot first. Offer to walk them through take_screenshot MCP setup or ask for a manual capture rather than producing low-fidelity output silently.