clone-website
Reverse-engineer and clone a website 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 the target URL as an argument.
npx skills add vibeeval/vibecosystem --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
The skill reverse-engineers a target URL and produces a pixel-perfect clone by extracting visible assets, CSS, text content, and component structure as it scans the page. It acts as a foreman, writing detailed per-section specifications and handing them to specialist builder agents so extraction and construction proceed in parallel. It treats extraction as meticulous, ensuring auditable artifacts and auditable specs for each component before dispatching builders.
How it works
- It treats the operation as a single continuous task: inspect each page section, write a detailed specification, and hand that specification to a builder agent with all required data.
- It uses browser automation to navigate to the target URL, capture full-page screenshots at desktop and mobile, and extract fonts, colors, favicons, and global UI patterns.
- It performs an extraction-driven workflow where assets (images, videos, inline SVGs), text content, and background images are collected with exact values; all are saved as auditable artifacts.
- It enforces a phase where a spec file for each component is created in
docs/research/components/before any builder is dispatched, and builders must verify TypeScript compilation and overall build success. - It requires parallelized builder dispatch in worktrees and ensures that extraction data includes computed CSS values and interaction states for each component.
When to use it
Use when the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. It triggers on phrases like "make a copy of this site", "rebuild this page", or "pixel-perfect clone" and requires a target URL as an argument.
What it can touch
- It relies on browser automation tools to interact with the page and extract data, and it expects to dispatch builder agents with detailed specs. The process references assets and code structure to be used by builders.
Caveats
- Out of scope includes real backend/database or SEO optimization, so the clone emphasizes frontend fidelity rather than functional backend features.
- The workflow requires available browser MCP tools; if none are detected, user must specify a browser tool they have.
- The process mandates that
npx tsc --noEmitpasses and thatnpm run buildpasses after merging worktrees.
# Clone Website You are about to reverse-engineer and rebuild **$ARGUMENTS** as a pixel-perfect clone. 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 - **Customization:** None — pure emulation If the user provides additional instructions (specific fidelity level, customizations, extra context), honor those over the defaults. ## Pre-Flight 1. **Browser automati
- 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 a website 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 the target URL as an argument.
How do I install it?
Run `npx skills add vibeeval/vibecosystem --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 vibeeval/vibecosystem, a repository with 521 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.