clone-website
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
npx skills add JCodesMore/ai-website-cloner-template --skill clone-website --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Inverse-engineers and clones one or more websites in one shot, extracting assets, CSS, and content section-by-section, and proactively dispatching parallel builder agents in worktrees as it proceeds. It processes multiple URLs independently and in parallel when possible, while keeping each site's artifacts in dedicated folders like docs/research/<hostname>/. It treats the task as a foreman coordinating extraction and construction simultaneously, ensuring auditable artifacts and detailed specs for builders.
How it works
- Accepts one or more target URLs as arguments and validates them, normalizing and checking accessibility via a browser automation tool (MCP).
- For each valid URL, it creates per-site output folders (e.g., docs/research/<hostname>/ and docs/design-references/<hostname>/) and an overall docs/research/ structure if missing.
- Performs simultaneous extraction and construction in parallel where possible, but extraction remains meticulous to produce auditable artifacts.
- Instructs builder agents with precise specifications written per section before dispatch; each section is handled by a specialist builder agent with all necessary assets and state information.
- Ensures fidelity defaults to pixel-perfect replication of visuals, layout, component structure, interactions, and responsive design, while excluding backend, authentication, SEO, and accessibility audits unless specified by the user.
- Requires a browser automation tool (prefer Chrome MCP if available) and will prompt for tool choice if none is detected.
- Includes a pre-flight validation: parse and validate arguments, verify URL accessibility, and verify the project can build with npm run build; creates necessary folders if missing.
- Saves comprehensive artifacts and stateful specifications to be used by builders, and enforces a phased workflow where a spec file is created for each component before any build action.
When to use it
Use when the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Triggered by phrases like "make a copy of this site", "rebuild this page", or "pixel-perfect clone" and requires one or more target URLs as arguments.
What it can touch
- browser MCP tools for URL navigation and extraction
- Output directories: docs/research/, docs/research/components/, docs/design-references/, scripts/
- Per-site folders: docs/research/<hostname>/ and docs/design-references/<hostname>/
- Spec files saved under docs/research/components/ for each component
- It uses a Node.js-like workflow (npm run build) and TypeScript scaffolding as part of the foundation prior to building
Caveats
- Requires an available browser automation tool; if none is detected, it asks the user for the tool and how to connect it.
- Not a two-phase process; extraction and construction occur in parallel but with auditable, section-level specifications.
- Out-of-scope items include real backend functionality, authentication, real-time features, and SEO or accessibility audits unless specified.
- The fidelity default is pixel-perfect unless overridden by user instructions; customization is not part of the default behavior.
# Clone Website You are about to reverse-engineer and rebuild **$ARGUMENTS** as pixel-perfect clones. When multiple URLs are provided, process them independently and in parallel where possible, while keeping each site's extraction artifacts isolated in dedicated folders (for example, `docs/research/<hostname>/`). This is not a two-phase process (inspect then build). You are a **foreman walking the job site** — as you inspect each section of the page, you write a detailed specification to a file, then hand that file to a specialist builder agent with everything they need. Extraction and construction happen in parallel, but extraction is meticulous and produces auditable artifacts. ## Scope Defaults The target is whatever page `$ARGUMENTS` resolves to. Clone exactly what's visible at that URL. Unless the user specifies otherwise, use these defaults: - **Fidelity level:** Pixel-perfect — exact match in colors, spacing, typography, animations - **In scope:** Visual layout and styling, component structure and interactions, responsive design, mock data for demo purposes - **Out of scope:** Real backend / database, authentication, real-time features, SEO optimization, accessibility audit
- Scope Defaults
- Pre-Flight
- Guiding Principles
- 1. Completeness Beats Speed
- 2. Small Tasks, Perfect Results
- 3. Real Content, Real Assets
- 4. Foundation First
- 5. Extract How It Looks AND How It Behaves
- 6. Identify the Interaction Model Before Building
- 7. Extract Every State, Not Just the Default
- 8. Spec Files Are the Source of Truth
- 9. Build Must Always Compile
- Phase 1: Reconnaissance
- Screenshots
What does the clone-website skill do?
Reverse-engineer and clone one or more websites in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide one or more target URLs as arguments.
How do I install it?
Run `npx skills add JCodesMore/ai-website-cloner-template --skill clone-website --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From JCodesMore/ai-website-cloner-template, a repository with 30,958 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.