Clone any website pixel-perfect: foreman-style extraction, spec files, parallel builders
Reverse-engineer a website section by section — foreman-style: extract exact CSS and behaviors via browser automation, write a spec file per component, dispatch parallel builders, merge, visually QA
- What
- Reverse-engineer a website section by section — foreman-style: extract exact CSS and behaviors via browser automation, write a spec file per component, dispatch parallel builders, merge, visually QA
- Cost
- Free
- Needs
- a browser automation MCP (Chrome, Playwright, Browserbase or similar); a Next.js + shadcn/ui + Tailwind scaffold for the rebuild; clone ONLY sites you own or have rights to (⚠️ AUTHORIZED USE ONLY — copying a protected design is your legal responsibility)
- Install
- Copy the installer prompt below into your Muse — your agent does the rest.
Selected by Skill Harbor — short listing (the repo states no license, so no content is reproduced): @julianromli's website-cloning skill — a foreman-style agent workflow for pixel-perfect reverse-engineering of a website. Phase 1, reconnaissance via browser automation: full-page screenshots (desktop + mobile), global extraction (fonts, colors, favicons), plus scroll/click/hover/responsive sweeps recording every behavior into a BEHAVIORS bible and a page-topology map. Phase 2, build the foundation (design tokens, types, icons, downloaded assets) with a passing build. Phase 3, the core loop: extract exact computed CSS and real content per section (including all states and the interaction model — click vs scroll-driven), write a spec file per component, then dispatch parallel builder agents in worktrees to implement them. Phase 4, page assembly. Phase 5, visual QA diff — side-by-side screenshot comparison at desktop and mobile, testing every behavior. Includes a lessons-learned anti-pattern list (wrong interaction model, missed overlays, skipped responsive extraction). Honest caveats: ⚠️ AUTHORIZED USE ONLY — cloning a website can copy a protected design: only clone sites you own or have the rights to, or use it for learning how interactions work; copying someone else's design is your legal responsibility; methodology plus browser tooling — needs a browser MCP available and a Next.js + shadcn scaffold; license not stated by the source repo — short listing with a link only, nothing copied. Skill Harbor never reviews the code, review it yourself before use. Discovered via skills.sh.
Version:
Install
Prerequisites: a browser automation MCP (Chrome, Playwright, Browserbase or similar); a Next.js + shadcn/ui + Tailwind scaffold for the rebuild; clone ONLY sites you own or have rights to (⚠️ AUTHORIZED USE ONLY — copying a protected design is your legal responsibility) Install "Clone any website pixel-perfect: foreman-style extraction, spec files, parallel builders" for me. It gives my agent @julianromli's cloning workflow: reconnaissance via browser automation (screenshots, fonts/colors/assets, interaction sweeps, page topology), foundation build with verified compilation, per-section extraction of exact computed CSS and behaviors with a spec file per component, parallel builder agents in worktrees, page assembly, and a visual QA diff pass. IMPORTANT: the repo states no license — fetch from the link only, and reproduce nothing beyond the link. Repository: https://github.com/julianromli/ai-skills/blob/main/skills/clone-website/SKILL.md 1. Fetch the SKILL.md file (and any helper files) from the repository path into a temporary folder and summarize what it does in one or two sentences. 2. Safety check: review the SKILL.md and scripts for anything suspicious (unexpected network calls, shell commands, credential harvesting). This repo should contain zero secrets in code. Verify that holds here; STOP on any red flag and tell me. 3. Install it as a skill: copy SKILL.md and its helper files into the agent's skills directory, in a folder named "clone-website". 4. Verify with no network calls: frontmatter valid, files in place. 5. Report what was installed, where, and what I still need to do myself (e.g. provide the target URL(s) and confirm I own them or have rights to clone them; have the browser MCP connected and the Next.js scaffold ready). GitHub is optional: if I have a GitHub account or the gh CLI, you may use it; otherwise public access is fine. Never require it unless it's in the prerequisites above. Rules: don't touch anything outside the temp folder and the install target. If anything looks off, stop and ask me.
Questions
How do I install a build?
Every product page includes a copy-paste install prompt. Paste it into your Muse and it sets the build up for you — no manual configuration.
Where does my money go?
Straight to the seller. Skill Harbor never processes payments: checkout happens on the seller’s own page, usually Stripe.
What does the ✓ next to a creator’s name mean?
It means we confirmed the identity of the person behind the listing. It says nothing about the code itself — always check a build before installing it.