# How to Handle Multi-Phase Website Reverse-Engineering with the /clone-website Skill > Learn to handle multi-phase website reverse-engineering using the /clone-website skill. Discover its five-stage pipeline for creating production-ready Next.js codebases from live sites. - Repository: [JCodesMore/ai-website-cloner-template](https://github.com/JCodesMore/ai-website-cloner-template) - Tags: how-to-guide - Published: 2026-07-10 --- **The `/clone-website` skill orchestrates a deterministic five-stage pipeline that converts live websites into production-ready Next.js codebases through automated reconnaissance, component specification, and parallelized building.** The `JCodesMore/ai-website-cloner-template` repository implements a complete automation framework for multi-phase website reverse-engineering. By leveraging the `/clone-website` skill, developers can transform any target URL into a fully structured Next.js application without writing boilerplate, using a workflow that maintains pixel-perfect fidelity to the original design. ## The Five-Stage Reverse-Engineering Pipeline The skill executes a deterministic sequence that handles the entire conversion process. Each stage produces specific outputs that feed into the next phase, creating a reliable path from live site to source code. ### Phase 1: Reconnaissance The pipeline begins by capturing comprehensive design intelligence from the target URL. This phase takes screenshots across multiple viewports, extracts raw CSS design tokens, and performs an interaction sweep that records scroll behaviors, click handlers, hover states, and responsive breakpoints. Key outputs populate the `docs/design-references/` directory with screenshot archives and raw CSS value extractions, providing the visual foundation for all subsequent code generation. ### Phase 2: Foundation With design references established, the foundation phase updates global project styles and downloads all static assets. The system populates `public/images/`, `public/videos/`, and `public/seo/` with optimized assets, while simultaneously updating Tailwind configuration files with extracted color palettes, font families, and spacing scales. This stage ensures the Next.js project environment matches the target site's aesthetic baseline before component-level work begins. ### Phase 3: Component Specifications The skill generates precise technical specifications under `docs/research/components/`, creating individual markdown or JSON files for each UI element. These specifications capture exact `getComputedStyle()` values, interaction models, multi-state content definitions, and responsive breakpoint behaviors. Human-readable component specs serve as the single source of truth for the builder agents, eliminating ambiguity in implementation requirements. ### Phase 4: Parallel Build This phase leverages **git worktrees** to maximize build speed. The system creates isolated worktrees for each component and dispatches dedicated builder agents to implement them in parallel. Each worktree operates independently within `src/components/…`, allowing multiple components to progress simultaneously without merge conflicts. This parallelization strategy dramatically accelerates the conversion process compared to sequential component development. ### Phase 5: Assembly and QA The final phase merges all worktrees back into the main branch, wires components together into complete pages under `src/app/…`, and executes a visual diff comparison against the original screenshots. The QA process verifies pixel-perfect fidelity between the cloned implementation and the target site, generating a comprehensive QA report that highlights any discrepancies. ## Executing the /clone-website Skill Triggering the entire multi-phase workflow requires a single slash command: ```bash /clone-website [ ...] ``` The skill integrates with multiple AI coding agents including Claude Code, Codex CLI, and OpenCode. Agent-specific instructions reside in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), which most agents read automatically upon project initialization. For Claude Code specifically, execute: ```bash claude --chrome ``` Then issue the command within the Claude UI to begin the reverse-engineering process. ## Customizing the Pipeline To modify pipeline behavior—such as adding custom asset handlers or altering Tailwind token generation—edit the single source-of-truth files and propagate changes via sync scripts. First, modify [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) or the skill definition in [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md). Then regenerate platform-specific files: ```bash # Regenerate agent-specific instruction files bash scripts/sync-agent-rules.sh # Regenerate the /clone-website skill for all platforms node scripts/sync-skills.mjs ``` These scripts ensure consistency across all supported agent platforms by reading from the centralized definitions and updating every platform-specific copy. ## Advanced Workflows and Manual Overrides While the pipeline automates the majority of reverse-engineering tasks, specific scenarios require manual intervention. ### Editing Component Specifications Manually To refine generated specifications before the build phase, edit the markdown files directly: ```bash code docs/research/components/navbar.md ``` Adjust computed CSS values or add new interaction states as needed. After saving, run the sync script to propagate changes to the builder agents. ### Creating Custom Worktree Builders For complex widgets requiring specialized handling, create isolated worktrees manually: ```bash # Create a new git worktree for a custom widget git worktree add -b widget-worktree ../widget-worktree main # Implement within the isolated environment cd ../widget-worktree npm install # ...write component code... # Merge back to main when complete git checkout main git merge widget-worktree ``` ### Running Visual QA Manually Validate fidelity outside the automated pipeline by starting the development server: ```bash npm run dev ``` Compare the local instance at `http://localhost:3000` against the reference screenshots stored in `docs/design-references/`. ## Summary - The `/clone-website` skill executes a **five-stage deterministic pipeline**: Reconnaissance, Foundation, Component Specifications, Parallel Build, and Assembly & QA. - Each phase generates specific outputs in directories like `docs/design-references/`, `docs/research/components/`, and `src/app/…` that feed subsequent stages. - **Git worktrees** enable parallel component development, significantly accelerating the build process. - Customization occurs through [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md) and [`.claude/skills/clone-website/SKILL.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/.claude/skills/clone-website/SKILL.md), synchronized via [`scripts/sync-agent-rules.sh`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/scripts/sync-agent-rules.sh) and `scripts/sync-skills.mjs`. - The pipeline supports manual overrides for component specifications and visual QA validation. ## Frequently Asked Questions ### What AI agents support the /clone-website skill? The skill works with Claude Code, Codex CLI, OpenCode, and other compatible agents. Agent-specific instructions are maintained in [`AGENTS.md`](https://github.com/JCodesMore/ai-website-cloner-template/blob/main/AGENTS.md), which most agents automatically detect and read when opening the project. You typically do not need to modify agent configurations manually unless adding support for a new platform. ### How do I adjust design tokens extracted during the Foundation phase? Edit the Tailwind configuration files or the extraction logic in the source-of-truth files. After making changes, run `node scripts/sync-skills.mjs` to regenerate the skill definitions and `bash scripts/sync-agent-rules.sh` to update agent instructions. This propagates your custom token logic to all platform-specific implementations. ### Can I process multiple URLs in a single reverse-engineering session? Yes. Pass multiple URLs to the slash command: `/clone-website https://example.com https://example.org`. The pipeline processes each target sequentially through the five stages, creating separate component specifications and asset directories for each URL while maintaining isolated build contexts. ### What should I do if the visual QA diff shows pixel mismatches? Review the discrepancies in the generated QA report, then manually inspect the affected components in `src/components/…`. Check the original specifications in `docs/research/components/` against the actual `getComputedStyle()` values from the target site. Update the spec files, re-run the sync scripts, and trigger a rebuild of the specific component worktree to resolve the fidelity issues.