Page Cloner
This skill turns a live web page into one self-contained working HTML file that
reproduces the original faithfully — same layout, same styles, same content — with
no redesign. It extracts the page's actual rendered markup and CSS rather than
rebuilding from a screenshot, so the clone matches by construction, then it checks
that match by comparing the clone back against the original and fixing any drift.
The goal is a faithful copy, not an improvement. If the output looks different from
the original in any way that isn't a captured asset failing to load, something went
wrong. Two sibling skills share the capture step but differ in output: use
page-tailwindify to keep the exact look but replace the generated selectors with
clean Tailwind classes, and page-redesigner to keep the layout but upgrade the
visuals. This skill is the verbatim one — it keeps the original markup and CSS as-is.
The two parts
references/capture.md — capture + extract. Drive Claude in Chrome to load
the live URL, screenshot it as ground truth, then run scripts/extract.js in the
page to produce a self-contained HTML document (rendered DOM, inlined CSS,
absolutised assets, scripts stripped). Save it as the raw clone.references/validate.md — validate in a loop. Screenshot the clone with
scripts/shoot.py, compare it section-by-section against the original captures,
and fix any differences. Repeat until it matches.
Read each reference file when you reach that part; don't load them both upfront.
Workflow
1. Capture and extract
Follow references/capture.md. Requires Claude in Chrome — if it isn't available,
stop and tell the user; a real clone needs the real rendered page, and guessing from
memory or view-source produces a fake with nothing truthful to validate against.
Output of this step: <workspace>/clone/index.html (the raw extraction) and
<workspace>/original/ screenshots (full page + per section) as ground truth.
2. Validate in a loop — this is where fidelity is won
Follow references/validate.md. Render the clone with scripts/shoot.py, compare it
against the original captures on a single axis — fidelity — and turn every
difference into a specific edit to index.html. Loop until it matches or ~5 rounds
pass without progress, then report honestly what's still off.
There is only one axis here, unlike page-redesigner. Do not "improve" anything: no
new type scale, no color changes, no spacing tweaks beyond matching the original. A
change that makes the clone diverge from the original is a regression.
What a faithful clone can and can't do
- Static, not interactive. Scripts are stripped, so JS-driven behaviour (sliders,
tabs, dropdowns, animations) freezes in whatever state the DOM held at capture.
- May need network. Same-origin and CORS-readable CSS is inlined; a CORS-blocked
top-level stylesheet stays as a live
<link> (a CORS-blocked @import is dropped —
see references/capture.md), and images/fonts are referenced by absolute URL rather
than embedded. Self-contained as one file, but not guaranteed fully offline.
- Captures what rendered. Auth-gated or lazy content only appears if it was on
screen at capture — scroll the full page first (see
references/capture.md).
If the user needs a fully-offline bundle (every asset embedded as a data URI) or a
production build, note that as a follow-up — this skill's deliverable is one working
preview file.
Notes
- Don't skip the loop. The raw extraction is a draft; the comparison is what
proves it's a real clone. An extraction that was never checked against the original
is unverified, not done.
- Extract, don't retype. If content or styling is missing, re-capture with a
longer wait or full scroll — never hand-write the page's content or guess its CSS.
- Be specific in fixes. "Looks off" isn't a fix. "Hero background image 404s —
the
src kept a relative path; absolutise it to the origin URL" is.
1---2name: page-cloner3description: Clones a live web page into a single self-contained working HTML file that looks and lays out like the original, then validates the clone against the original in a loop until it matches. Use whenever a user points at a live URL and wants a faithful copy with NO redesign — phrasings like "clone this page to working HTML", "copy this page exactly", "save this page as a standalone HTML file", "make me a working copy of this site", "scrape this page into one HTML file", or "clone this page as-is". Reproduces the real markup, styles, and assets verbatim, keeping the original selectors and raw CSS — it does not restyle, improve, or rewrite anything. For the same look rewritten as clean semantic Tailwind (generated selectors replaced with real utility classes), use page-tailwindify; for a rebuilt and restyled version, use page-redesigner. Requires Claude in Chrome for capturing the source page.4---56# Page Cloner78This skill turns a live web page into one self-contained working HTML file that9reproduces the original faithfully — same layout, same styles, same content — with10**no redesign**. It extracts the page's actual rendered markup and CSS rather than11rebuilding from a screenshot, so the clone matches by construction, then it checks12that match by comparing the clone back against the original and fixing any drift.1314The goal is a faithful copy, not an improvement. If the output looks different from15the original in any way that isn't a captured asset failing to load, something went16wrong. Two sibling skills share the capture step but differ in output: use17`page-tailwindify` to keep the exact look but replace the generated selectors with18clean Tailwind classes, and `page-redesigner` to keep the layout but upgrade the19visuals. This skill is the verbatim one — it keeps the original markup and CSS as-is.2021## The two parts22231. **`references/capture.md` — capture + extract.** Drive Claude in Chrome to load24 the live URL, screenshot it as ground truth, then run `scripts/extract.js` in the25 page to produce a self-contained HTML document (rendered DOM, inlined CSS,26 absolutised assets, scripts stripped). Save it as the raw clone.272. **`references/validate.md` — validate in a loop.** Screenshot the clone with28 `scripts/shoot.py`, compare it section-by-section against the original captures,29 and fix any differences. Repeat until it matches.3031Read each reference file when you reach that part; don't load them both upfront.3233## Workflow3435### 1. Capture and extract3637Follow `references/capture.md`. Requires Claude in Chrome — if it isn't available,38stop and tell the user; a real clone needs the real rendered page, and guessing from39memory or view-source produces a fake with nothing truthful to validate against.4041Output of this step: `<workspace>/clone/index.html` (the raw extraction) and42`<workspace>/original/` screenshots (full page + per section) as ground truth.4344### 2. Validate in a loop — this is where fidelity is won4546Follow `references/validate.md`. Render the clone with `scripts/shoot.py`, compare it47against the original captures on a single axis — **fidelity** — and turn every48difference into a specific edit to `index.html`. Loop until it matches or ~5 rounds49pass without progress, then report honestly what's still off.5051There is only one axis here, unlike page-redesigner. Do not "improve" anything: no52new type scale, no color changes, no spacing tweaks beyond matching the original. A53change that makes the clone diverge from the original is a regression.5455## What a faithful clone can and can't do5657- **Static, not interactive.** Scripts are stripped, so JS-driven behaviour (sliders,58 tabs, dropdowns, animations) freezes in whatever state the DOM held at capture.59- **May need network.** Same-origin and CORS-readable CSS is inlined; a CORS-blocked60 top-level stylesheet stays as a live `<link>` (a CORS-blocked `@import` is dropped —61 see `references/capture.md`), and images/fonts are referenced by absolute URL rather62 than embedded. Self-contained as one file, but not guaranteed fully offline.63- **Captures what rendered.** Auth-gated or lazy content only appears if it was on64 screen at capture — scroll the full page first (see `references/capture.md`).6566If the user needs a fully-offline bundle (every asset embedded as a data URI) or a67production build, note that as a follow-up — this skill's deliverable is one working68preview file.6970## Notes7172- **Don't skip the loop.** The raw extraction is a draft; the comparison is what73 proves it's a real clone. An extraction that was never checked against the original74 is unverified, not done.75- **Extract, don't retype.** If content or styling is missing, re-capture with a76 longer wait or full scroll — never hand-write the page's content or guess its CSS.77- **Be specific in fixes.** "Looks off" isn't a fix. "Hero background image 404s —78 the `src` kept a relative path; absolutise it to the origin URL" is.
chrismccoy