---

name: clone-app-pat-pro description: Clones any web app pixel-for-pixel from a URL. Runs as an IN-CONVERSATION workflow — the live Claude orchestrates Task sub-agents and drives the Claude Chrome extension to recon (every view), extract (computed styles = ground truth), design-spec, build, QA (computed-style assertions), and extend. Guided check-ins, custom features, and an MCP server so an agent can operate the app. Use when cloning a site, replicating a web app, building a clone, copying a website, recreating a UI, or when told "clone this", "replicate this app", "copy this site", "build a clone of", "make a copy of this website", "recreate this UI". argument-hint: <url> <name> allowed-tools: Bash, Read, Write, Edit, Agent

Clone App — Pat Pro

Mission: own the target, pixel for pixel. Read every value off the live page (never a screenshot guess), rebuild it, prove the match with measured computed-style assertions, then make it yours.

The contract is law. references/00-contract.md defines the workspace layout, exact artifact filenames, stage I/O, the verification gate, the convergence loop, and the agent-prompt standard. Read it first.

How this runs — IN-CONVERSATION (read first)

This skill runs as a workflow inside a live Claude session, not a background script. When it's invoked, YOU (the in-session agent) orchestrate it: spawn Task sub-agents, drive the browser, check in with the user, run the helper scripts.

Browser tool = the Claude Chrome extension, only (mcp__claude-in-chrome__*). You're already logged in, so it reaches authed sites. There is one Chrome — one view/tab at a time (browser stages are sequential). Code stages fan out in parallel via Task sub-agents (build each page, fix each file-set concurrently).

| Need | Chrome-extension tool | |---|---| | open a route | mcp__claude-in-chrome__navigate | | read computed styles / CSSOM / run JS | mcp__claude-in-chrome__javascript_tool (the verification ground truth) | | read DOM / find elements | mcp__claude-in-chrome__read_page / find | | click / hover / focus (interaction sweep) | mcp__claude-in-chrome__computer | | visual reference screenshot | mcp__claude-in-chrome__computer (screenshot) | | set viewport | mcp__claude-in-chrome__resize_window |

Screenshots are a VISUAL REFERENCE only. The extension can't reliably write screenshot files to disk in this environment, so do not build the gate on saved PNGs / pixel-diff. Screenshots are for you and the user to eyeball the real site vs the clone. The objective ground truth is computed styles read via javascript_tool (the contract's own rule: CSSOM/computed values beat screenshots).

The gate = computed-style assertions. QA reads the clone's computed styles via javascript_tool, writes them to JSON, and scripts/assert-styles.mjs compares them to the design tokens (assertions.json from the DESIGN.md). PASS = 0 style-assertion failures + the build compiles. Plus a visual eyeball of clone vs real site.

⛔ STOP-AND-CHECK-IN GATE — after EVERY stage (the rule agents break)

This is the single most important rule, and the one that gets ignored: after each stage you MUST stop, report, and WAIT for the user before doing anything else. Do not "batch through" the pipeline.

After every stage — recon, extraction, design spec, architecture, build-foundation, build-pages, each QA cycle, polish, each feature, agent-access:

1. Post a short summary of what the stage produced + the exact artifact paths (for visual stages, name the views/screenshots you captured).
2. Ask the user: approve / revise / stop.
3. STOP. Do not call ANY tool. Do not start the next stage. Wait for the user's reply.

Running stage N+1 before the user has responded to stage N is a failure. One stage → stop → wait, every single time. Recon is ONE stage: capture every view, then STOP and check in — do not roll straight into extraction. Same for every other stage.

What "EVERY VIEW" means (recon is not one screenshot)

Recon must reach every state the app can show — exhaustive, not a sample. Navigate and capture/extract:

• every left-hand sidebar item (click each, go into its view);
• every tab / top filter (Active / Backlog / All / …);
• every filter and layout toggle (board ↔ list ↔ every layout; sort/group);
• every menu, dropdown, context menu (open state);
• every side panel, detail, modal (open an issue, settings panels, slide-overs);
• every interaction-revealed state (focus the editor → its toolbar; the comment composer; hover states);
• at every viewport (desktop, tablet, mobile).

For each view: read its computed styles via javascript_tool (the data that matters) and take a visual-reference screenshot. Log each in interaction-map.json (contract §8). One view captured = broken recon — keep going.

Pipeline

Recon (EVERY view — Chrome ext, computed styles + visual ref, sequential) → Extraction (per view)
→ Design Spec (DESIGN.md + assertions.json) → Architecture → Build-foundation → Build-pages (‖ Task agents)
→ [QA (read clone computed styles → assert-styles gate) → Fix (‖ Task agents)] loop-until-converged
→ Polish → [guided] Customize (feature loop) → Agent access (API + MCP server)

Gate (contract §5): 0 style-assertion failures + build compiles, plus a visual check. Loop QA↔Fix until it passes, stalls, or hits a hard blocker.

Stages

| # | Stage | Browser | Parallel | Reference | |---|-------|---------|----------|-----------| | 1 | Recon | Chrome ext, every view | sequential | 01-recon.md | | 2 | Extraction | Chrome ext (javascript_tool) | sequential | 02-extraction.md | | 3 | Design Spec | no | single (fan-in) | 03-design-spec.md | | 4 | Architecture | no | single | 04-architecture.md | | 5a | Build-foundation | no | single | 05-build.md | | 5b | Build-page | no | ‖ Task agents | 05-build.md | | 6 | QA | Chrome ext (read clone styles) | sequential read, ‖ analysis | 06-qa.md | | 7 | Fix | no | ‖ Task agents per file-set | 06-qa.md | | 9 | Polish | Chrome ext (clone) | sequential | 07-polish.md | | 10-11 | Extend (guided) | mixed | — | 08-extend.md |

Verification scripts (run via Bash)

• scripts/assert-styles.mjs — compares the clone's computed styles (JSON the QA agent reads via javascript_tool) to the DESIGN.md tokens/assertions.json. The gate.
• scripts/partition_bugs.py — disjoint per-file fix sets for parallel fixers.

Pat Pro Enhancements

• In-conversation, Chrome-extension-only — runs in your session, drives the real browser you're logged into.
• Click everything — recon reaches every sidebar item, tab, filter, view, panel, and state (see "EVERY VIEW" + contract §8).
• Computed styles are ground truth — the gate is measured style assertions, not eyeballing or fragile screenshots.
• Autonomous convergence — loops QA↔Fix until it passes.
• Customize & extend — add features matched to DESIGN.md, then build an MCP server so an agent can operate the app (contract §10, 08-extend.md).

Workspace

All artifacts in clone-workspace/{name}/ with fixed filenames — contract §1. Stage prompt templates (used as Task sub-agent prompts): references/stage-prompts.md.