clone-websitelisted

Clone any website into a pixel-perfect single-file HTML prototype. Extracts design tokens, assets, CSS computed styles, interaction patterns, and content via Playwright. Outputs a self-contained HTML file with real data injection. Use when the user wants to clone, replicate, reverse-engineer, or create a pixel-perfect copy of any website or web app. Provide one or more target URLs as arguments.
rkz91/coco · ★ 3 · AI & Automation · score 72

Install: claude install-skill rkz91/coco

# Clone Website --- Single-File HTML Prototype Builder You are about to reverse-engineer **$ARGUMENTS** into a pixel-perfect single-file HTML prototype. This is adapted from the [ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) approach but optimized for rapid prototyping workflows: **single self-contained HTML files** (no build system, no CDN dependencies, opens directly in a browser). ## Output Format Unlike the original repo (Next.js + shadcn/ui), our output is: - **One HTML file** with `<style>` + `<body>` + `<script>` sections - **Zero external dependencies** --- all CSS inline, all JS inline, all assets base64-encoded or SVG inline - **Real data injection** --- not lorem ipsum, but actual data from project Excel files, meeting notes, and brain DB - **Project design system** when available --- use tokens from a `design-system.json` colocated with the project ## Pre-Flight 1. **Playwright is required.** Verify: `npx playwright --version`. If not installed, ask the user to run `npm i -D playwright`. 2. Parse `$ARGUMENTS` as one or more URLs. Validate each is accessible. 3. Create output directory: `{project}/Screenshots-clone/` for captured assets. 4. Determine clone mode: - **Full clone** (default): pixel-perfect reproduction of the entire page - **Design extraction only** (`--extract`): capture design tokens, screenshots, and component specs without building - **Selective clone** (`--sections "header,table,sidebar"`): c