skills.rest
lpjhelder
lpjhelderCOMMUNITY
Explore all skills by this author →
GitHub

web-clone

Clone a live website's layout, visuals, and interactions into a runnable front-end project.

Updated Apr 10, 2026
Search Tags:#frontend#playwright#visual-verification#single-page#web-clone#ui-replication
One-click install
npx skills add https://github.com/lpjhelder/kronon-forge --skill web-clone-lpjhelder
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: web-clone
Source: https://github.com/lpjhelder/kronon-forge/tree/main/skills/web-clone
Command: npx skills add https://github.com/lpjhelder/kronon-forge --skill web-clone-lpjhelder

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill enables rapid replication of a live website's layout, visuals, and core interactions into a runnable clone project for testing, demonstration, or offline exploration.

Core Features & Use Cases

  • Visual fidelity: reproduce layout, typography, colors, and spacing.
  • Functional parity: support navigation, forms, and key interactions at a single-page scope.
  • Use Case: clone a live product page to prototype a redesigned UI or verify interaction flows offline.

Quick Start

Provide a live URL to clone and I will generate a single-page clone with visual verification and basic interactions.

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 live website's layout and visuals into a front-end project?▼

Cloning a website involves extracting DOM structure, styles, and interactive elements from a live URL to generate a runnable single-page front-end project. This process reproduces layout, typography, colors, and spacing with visual fidelity.

How does Playwright automated verification work for UI replication?▼

Playwright MCP performs UI replication verification by extracting an accessibility snapshot and interactive elements from the target URL. It scaffolds tokens, layout, and interactions to verify the single-page clone matches the original.

Can I replicate a single-page web app with functional interactions like forms and navigation?▼

Yes, you can replicate a single-page web app with functional parity. The clone supports navigation, forms, and key interactions at a single-page scope, ensuring the replicated UI behaves like the original live site.

What do I need to provide to start copying a website for offline exploration?▼

To start copying a website for offline exploration, you only need to provide a live URL. The tool extracts structure and styles from the URL, generating a runnable front-end clone with automated visual verification.

Are there limitations when cloning a live product page to prototype a redesigned UI?▼

A key limitation when cloning a live product page is the single-page scope restriction. It focuses on visual fidelity and core interactions for prototyping a redesigned UI, meaning complex multi-page navigation flows are not fully replicated.

Related Skills

Explore More Software Engineering Skills→
kmshihab7878kmshihab7878
6

design-inspector

Extract design tokens, component inventory, and interaction patterns from live websites via Playwright MCP browser automation.

Community
Advanced
ckyeonckyeon

prototype

Prototype business logic and UI designs through interactive terminal and web-based interfaces.

Community
Advanced
Goblin1024Goblin1024
6

web-clone

Clone live websites by extracting layout, visuals, and interactions with Playwright MCP.

Community
Advanced
kollaboraikollaborai
1

webapp-testing

Automate local web app testing with Playwright and Python scripts.

Community
Intermediate