| 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:
- Post a short summary of what the stage produced + the exact artifact paths (for visual stages, name the views/screenshots you captured).
- Ask the user: approve / revise / stop.
- 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
Verification scripts (run via Bash)
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.
