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.

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.

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.

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.