web-clone

Clone a live website's layout and interactions into a runnable scaffold.

Updated Jul 3, 2025
One-click install
npx skills add https://github.com/andrew-t-james/dotfiles --skill web-clone-andrew-t-james
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: web-clone
Source: https://github.com/andrew-t-james/dotfiles/tree/main/dot_codex/skills/web-clone
Command: npx skills add https://github.com/andrew-t-james/dotfiles --skill web-clone-andrew-t-james

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @playwright/mcp.

What problem does it solve?

Clones a live website's visual layout and core interactions to produce a verifiable, runnable clone for testing, prototyping, or offline exploration.

Core Features & Use Cases

  • Visual fidelity: reproduce layout, typography, spacing, and color from a live URL.
  • Functional parity: replicate key interactions and navigation flows for quick validation.
  • Use Case: You want a working offline clone of a single-page site to iterate on UI experiments or offline demos.

Quick Start

Provide a live URL to clone and run the automated web-clone workflow to generate a visual-verified clone scaffold.

Frequently Asked Questions about web-clone

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I clone a website's visual layout and interactions from a live URL?

To clone a website from a live URL, you need an automated workflow that extracts layout, styling, and navigation, then uses LLM code generation to produce a runnable clone scaffold. This skill automates that extraction and code generation process for single-page sites.

Do I need a Playwright MCP server to clone a website for offline prototyping?

Yes, you need a Playwright MCP server to clone a website using this skill. Playwright provides the browser automation required to extract the target site's visual layout and perform iterative visual verification on the generated clone scaffold.

Can I use automated website cloning to replicate functional parity like navigation flows?

Yes, automated website cloning can replicate functional parity including key interactions and navigation flows. It reproduces layout, typography, spacing, and color while validating basic interactive elements through iterative verification.

What is the best way to verify visual fidelity when reproducing a single-page website clone?

The best way to verify visual fidelity in a website clone is through iterative visual verification using browser automation. This skill applies automated extraction and verification to produce a composite web-clone verdict confirming layout and styling accuracy.

What are the limitations of using LLM code generation for website cloning?

LLM code generation for website cloning is limited to single-page clone tasks. It reproduces basic interactive elements and visual layout but may not capture complex backend integrations or dynamic data flows from the target live URL.

Does web-clone work with frontend automation tools to generate a component plan?

Yes, web-clone works with frontend automation to analyze a target URL and generate a component plan. It combines automated extraction with LLM code generation to output a clone scaffold and a composite verification verdict.