web-clone

<Use_When>

• User provides a target URL and wants the site replicated as working code
• User says "clone site", "clone website", "copy webpage", or "web-clone"
• Task requires both visual fidelity AND functional parity with the original
• Reference is a live URL (not a static screenshot — use $visual-verdict for screenshot-only tasks) </Use_When>

<Do_Not_Use_When>

• User only has screenshot references without a live URL — use $visual-verdict directly
• User wants to modify, redesign, or "improve" the site — use standard implementation flow
• Target requires authentication, payment flows, or backend API parity — out of scope for v1
• Multi-page / multi-route deep cloning — v1 handles single-page scope only </Do_Not_Use_When>

<Scope_Limits> v1 scope: Single page clone of the provided URL.

Included:

• Layout structure (header, nav, content areas, sidebar, footer)
• Typography (font families, sizes, weights, line heights)
• Colors, spacing, borders, border-radius
• Core interactions: navigation links, buttons, form elements, dropdowns, modals, toggles
• Responsive hints from the extracted layout (flexbox/grid patterns)

Excluded:

• Backend API integration or data fetching
• Authentication flows or protected content
• Dynamic/personalized content (user-specific data)
• Multi-page crawling or route graph cloning
• Third-party widget functionality (maps, embeds, chat widgets)
• Image/asset replication (use placeholders for external images)

Legal notice: Only clone sites you own or have explicit permission to replicate. Respect copyright and trademarks. </Scope_Limits>

1. Before first tool use, call ToolSearch("browser") or ToolSearch("playwright") to discover available browser tools.
2. If no browser tools are found, instruct the user:

   Playwright MCP is required. Configure it:
   codex mcp add playwright npx "@playwright/mcp@latest"
   

3. Required tools: browser_navigate, browser_snapshot, browser_take_screenshot, browser_evaluate, browser_wait_for. Optional: browser_click, browser_network_requests.

<Tool_Usage>

• Before first MCP tool use, call ToolSearch("browser") or ToolSearch("playwright") to discover deferred Playwright MCP tools.
• If no browser tools are found, stop immediately and instruct the user to configure Playwright MCP.
• Use browser_snapshot (accessibility tree) for structural understanding — it is far more token-efficient than screenshots.
• Use browser_take_screenshot only when visual verification is needed (Pass 1 baseline, Pass 4 comparison).
• Use browser_evaluate for DOM/style extraction — pass the scripts from this skill EXACTLY as written (do not modify them).
• If running within ralph, use state_write / state_read for web-clone state persistence between iterations.
• Skip Codex consultation for straightforward extraction; use it only if verification repeatedly fails on the same issue. </Tool_Usage>

<State_Management> Persist extraction and progress data so the pipeline can resume if interrupted.

• After Pass 1 completes: Write extraction summary to .omx/state/{scope}/web-clone-extraction.json containing:
  • target_url, extracted_at timestamp
  • screenshot_path (path to target-full.png)
  • landmark_count (number of nav, main, footer, form elements)
  • interactive_count (number of detected interactive elements)
  • extraction_size_kb (approximate size of DOM extraction data)
• After each Pass 4 verification: Append the composite verdict to .omx/state/{scope}/web-clone-verdicts.json.
• When running within ralph: Also persist the visual portion of the composite verdict to .omx/state/{scope}/ralph-progress.json for ralph compatibility, mapping visual.score → top-level score and visual.verdict → top-level verdict.
• On completion or failure: Write final status with completed_at or failed_at timestamp. </State_Management>