Clone Website

--- name: clone-website description: Reverse-engineer and clone one or more websites all at once: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. It also triggers on phrases like "make a copy of this site," "rebuild this page," and "pixel-perfect clone." Provide one or more target URLs as arguments. argument-hint: "<url1> [<url2> ...]" user-invocable: true --- # 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, and 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), prioritize those over the defaults. ## Pre-Flight 1. Browser automation is required. Check for available browser-MCP tools (Chrome MCP, Playwright MCP, Browserbase MCP, Puppeteer MCP, etc.). Use whichever is available:if multiple options exist, prefer Chrome MCP. If none are detected, ask the user which browser tool they have and how to connect it. This skill cannot function without browser automation. 2. Parse $ARGUMENTS into one or more URLs. Normalize and validate each URL; if any are invalid, ask the user to correct them before proceeding. For each valid URL, verify that it is accessible via your browser MCP tool. 3. Verify the base project builds: npm run build. The Next.js + shadcn/ui + Tailwind v4 scaffold should already be in place. If not, instruct the user to set it up first. 4. Create the output directories if they do not exist: docs/research/, docs/research/components/, docs/design-references/, scripts/. For multiple clones, also prepare per-site folders such as docs/research/<hostname>/ and docs/design-references/<hostname>/. 5. When working with multiple sites in a single command, you may optionally choose to run them in parallel (recommended, if resources allow) or sequentially to avoid overloading the system. ## Guiding Principles These are the principles that distinguish a successful clone from a “close enough” mess. Make them second nature:they should guide every decision you make. ### 1. Completeness Beats Speed Every builder agent must receive everything it needs to do its job perfectly: screenshots, exact CSS values, downloaded assets with local paths, real text content, and component structure. If a builder has to guess anything:a color, a font size, a padding value:you have failed at extraction. Take that extra minute to extract one more property rather than submitting an incomplete brief. ### 2. Small Tasks, Perfect Results When an agent is told to “build the entire features section,” it overlooks details:it approximates spacing, guesses font sizes, and produces something “close enough” but clearly wrong. When it’s given a single, focused component with exact CSS values, it gets it right every time. Look at each section and assess its complexity. A simple banner with a heading and a button? One-agents. A complex section with three different card variants, each with unique hover states and