{
  "id": "page:docs-reference-repos-jcodesmore-ai-website-cloner-template-research",
  "_kind": "Page",
  "_file": "wiki/docs/reference-repos/jcodesmore/ai-website-cloner-template/research.md",
  "_cluster": "wiki",
  "attributes": {
    "nodeKind": "Page",
    "sourcePath": "docs/reference-repos/JCodesMore/ai-website-cloner-template/research.md",
    "sourceKind": "repo-docs",
    "title": "JCodesMore/ai-website-cloner-template",
    "displayName": "JCodesMore/ai-website-cloner-template",
    "slug": "docs/reference-repos/jcodesmore/ai-website-cloner-template/research",
    "articlePath": "wiki/docs/reference-repos/JCodesMore/ai-website-cloner-template/research.md",
    "article": "\n# JCodesMore/ai-website-cloner-template\n\n- **URL**: https://github.com/JCodesMore/ai-website-cloner-template\n- **Stars**: 10,759\n- **License**: MIT\n- **Last pushed**: 2026-03-30\n- **Description**: Clone any website with one command using AI coding agents\n\n## Overview\n\nA reusable template for reverse-engineering any website into a clean, modern Next.js codebase using AI coding agents. The `/clone-website` skill runs a multi-phase pipeline: reconnaissance, foundation, component specs, parallel build (dispatching builder agents in git worktrees), and assembly + QA.\n\n## Architecture\n\n- Next.js 16 + React 19 + shadcn/ui + Tailwind CSS v4 scaffold\n- Multi-agent architecture: a foreman agent extracts and specs, then dispatches parallel builder agents in git worktrees\n- Browser MCP required for extraction (Chrome MCP, Playwright MCP, etc.)\n- Supports 13+ AI agent platforms (Claude Code, Codex, Cursor, Gemini, Copilot, etc.)\n- Skills exported to `.claude/skills/`, `.codex/skills/`, `.github/skills/` (identical content)\n\n## The Clone-Website Skill (Detailed)\n\nAn exceptionally well-crafted skill definition (~400+ lines) with deep extraction methodology:\n\n### Guiding Principles\n1. **Completeness beats speed** -- every builder gets everything needed, no guessing\n2. **Small tasks, perfect results** -- complexity budget rule: if spec exceeds ~150 lines, break it down\n3. **Real content, real assets** -- extract actual text/images/SVGs, not mockups\n4. **Foundation first** -- global CSS tokens, TypeScript types, global assets before any parallel work\n5. **Extract appearance AND behavior** -- computed CSS + interaction triggers, transitions, scroll behaviors\n6. **Identify interaction model before building** -- scroll-driven vs click-driven vs hover-driven determination\n7. **Extract every state, not just default** -- tab states, scroll states, hover states\n8. **Spec files are source of truth** -- every component gets a spec file before builder dispatch\n9. **Build must always compile** -- `tsc --noEmit` for builders, `npm run build` for final assembly\n\n### Multi-Phase Pipeline\n1. Reconnaissance -- screenshots, design token extraction, interaction sweep\n2. Foundation -- fonts, colors, globals, asset downloads\n3. Component Specs -- detailed spec files with exact computed CSS\n4. Parallel Build -- dispatches builder agents in git worktrees, one per section/component\n5. Assembly & QA -- merge worktrees, wire up page, visual diff against original\n\n## Extractable Value for Babysitter\n\n### Processes (specializations/domains/)\n1. **Website reverse-engineering process** -- The multi-phase pipeline (recon, foundation, spec, parallel-build, assembly+QA) is a well-structured process with clear phase gates, parallel agent dispatch, and quality verification. Could be `specializations/domains/web-development/website-cloning.js`.\n\n### Methodologies\n1. **Parallel worktree builder pattern** -- The pattern of writing detailed spec files, then dispatching independent builder agents in git worktrees with those specs, then merging -- is a reusable methodology for any large parallel construction task. Generalizable beyond web cloning.\n2. **Spec-then-build decomposition** -- The \"complexity budget rule\" (>150 lines = split) and the principle of spec files as source-of-truth contracts between extraction and building phases.\n\n## Processes\n\n### 1. Website Reverse-Engineering Process\n- **Source**: Multi-phase pipeline (recon → foundation → spec → parallel-build → assembly+QA)\n- **Placement**: `specializations/frontend/website-reverse-engineering.js`\n- **Description**: Multi-phase website cloning: reconnaissance (screenshots, design tokens, interaction sweep) → foundation (fonts, colors, globals, asset downloads) → component specs → parallel build (dispatch builder agents in git worktrees) → assembly & QA (merge worktrees, visual diff).\n\n## Plugin Ideas\n\n- **Website Cloning Template**: Babysitter marketplace plugin for reverse-engineering websites into modern codebases using parallel agent dispatch and git worktree methodology.\n\n## Library Mapping\n\n| Extractable Process | Library Status | Action | Existing Path | Target Placement |\n|-------------------|----------------|--------|---------------|------------------|\n| Website Reverse-Engineering Process | NEW | Multi-phase website cloning with parallel agent dispatch in git worktrees | - | specializations/frontend/website-reverse-engineering.js |\n| Parallel Worktree Builder Pattern | NEW | Methodology for parallel construction using spec files and git worktree dispatch | - | methodologies/parallel-worktree-builder/ |\n| Spec-Then-Build Decomposition | NEW | Complexity budget rule (>150 lines = split) with spec-as-contract methodology | - | methodologies/spec-then-build-decomposition/ |\n| Multi-Agent Parallel Dispatch | NEW | Pattern for dispatching independent agents with detailed specs in isolated environments | - | specializations/shared/multi-agent-parallel-dispatch.js |\n\n## Plugin Marketplace Mapping\n\n| Plugin Idea | Marketplace Status | Action | Existing Plugin | Target Placement |\n|-------------|-------------------|--------|-----------------|------------------|\n| Website Cloning Template | NEW | Multi-agent website reverse-engineering with parallel git worktree builders | - | plugins/a5c/marketplace/blueprints/website-cloning-template/ |\n\n## Classification\n\n- **Archetype**: Multi-agent website cloning template with parallel execution\n- **Primary value**: The parallel worktree builder pattern and spec-then-build methodology are genuinely novel and reusable. The skill itself is a masterclass in detailed agent instruction writing.\n- **Skip**: The Next.js scaffold, the website cloning use case itself (too domain-specific for methodologies/)\n",
    "documents": []
  },
  "outgoingEdges": [],
  "incomingEdges": [
    {
      "from": "page:docs-reference-repos",
      "to": "page:docs-reference-repos-jcodesmore-ai-website-cloner-template-research",
      "kind": "contains_page"
    }
  ]
}