Clone Website

Clone Website

Reverse-engineer and rebuild $ARGUMENTS as a pixel-accurate clone. This is not an inspect-then-build pass: inspect each section, write an auditable component spec, then dispatch or build from that spec.

Pre-Flight

1. Playwright MCP is required. Test the target URL with browser_navigate; stop if browser access fails.
2. Read TARGET.md for URL and scope. If it is missing, create a public-safe target file using the project template or a minimal local template.
3. Verify the base project builds before cloning sections.
4. Ensure these output directories exist: docs/research/, docs/research/components/, docs/design-references/, and scripts/.

Non-Negotiables

• Extract real content, assets, styles, layout, and behaviors from the live site.
• Do not approximate CSS when computed values can be inspected.
• Do not build a single monolithic section when the interaction or layout is complex; split into smaller component specs.
• Do not dispatch builders without a spec file.
• Do not skip responsive, hover, click, scroll, and stateful behavior checks.
• Do not use private data, credentials, session records, local absolute paths, or proprietary assets that the user is not authorized to clone.
• Every build increment must compile; builders verify npx tsc --noEmit, and final assembly verifies npm run build.

Core Workflow

1. Reconnaissance: capture desktop/mobile screenshots, global styles, assets, UI patterns, interactions, and page topology.
2. Foundation: configure fonts, global CSS tokens, types, icons, and global assets before section work starts.
3. Component specs: for each section, capture screenshot, DOM structure, computed CSS, behavior states, assets, text, responsive rules, and complexity.
4. Build/dispatch: use focused builders for small components or subparts; keep spec payloads under the complexity budget.
5. Merge: integrate completed work, resolve conflicts, and build after each merge.
6. Assembly: wire sections into the page and implement page-level behavior.
7. Visual QA: compare original and clone at desktop and mobile sizes; test scroll, click, hover, animations, and responsive behavior.
8. Report: summarize sections, components, specs, assets, build status, visual QA, and known gaps.

Reference Map

Read references/clone-workflows-reference.md when you need the detailed playbook for:

• Playwright MCP tool mappings
• exact reconnaissance sweeps
• asset discovery JavaScript
• per-component computed-style extraction script
• component spec template
• builder dispatch and merge rules
• pre-dispatch checklist
• anti-patterns
• completion report fields
• template project guidance

Completion Standard

The clone is complete only when:

• all sections have spec files and implemented components
• all real assets are downloaded or intentionally substituted with documented rationale
• desktop and mobile screenshots are compared against the source
• interactions and responsive states match the inspected behavior
• npm run build passes
• the final report lists known gaps honestly