page-clonerlisted

# 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 1. **`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. 2. **`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