website-cloning

Name: website-cloning
Availability: InStock
Author: Sheldon

Clone target websites into React + Vite projects using Playwright.

Updated Apr 12, 2026

Search Tags:#react #playwright #vite #website #pixel-perfect #clone #design-extraction

Ready to run

npx skills add https://github.com/YSheldon/Prompt-Log --skill website-cloning-ysheldon

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/YSheldon/Prompt-Log/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/YSheldon/Prompt-Log --skill website-cloning-ysheldon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Rebuilds target websites as pixel-perfect React + Vite apps by capturing layout, typography, assets, and interactions from live sites and compiling them into a reusable codebase.

Core Features & Use Cases

Pixel-accurate cloning of UI, navigation, and responsive behavior for design reference, migrations, or learning.
Automated extraction of design tokens, assets, and content using Playwright, with parallel build workflows for speed.
Use Case: Clone a client site to create a staging app, or reproduce a reference site for a redesign.

Quick Start

Provide the target URL and run the cloning workflow to generate a pixel-perfect React + Vite clone.

Frequently Asked Questions about website-cloning

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

FAQPage Schema

How do I clone a website into a React project?▼

To clone a website into a React project, this workflow uses Playwright to extract layout, typography, and assets, then compiles them into a pixel-perfect React + Vite codebase. You provide a target URL to generate the clone automatically.

Can Playwright extract design tokens and assets for a pixel-perfect website clone?▼

Playwright extracts design tokens, assets, and content from live sites to achieve pixel-perfect website clones. This automated extraction captures UI elements and interactions, enabling parallel build workflows for faster React + Vite project generation.

What is the best way to reproduce a website's responsive behavior for a redesign?▼

The best way to reproduce responsive behavior for a redesign is cloning the target site into a pixel-perfect React + Vite app. This approach captures navigation and responsive layouts, creating a reusable codebase for design reference or migrations.

Do I need to handle licensing and branding when cloning a website?▼

You must handle licensing and branding when cloning a website. This workflow targets legitimate scenarios like design references, migrations, and learning, requiring attention to asset licensing and branding constraints to reproduce layouts responsibly.

Does this website cloning tool work with Vite and React?▼

This website cloning tool works directly with Vite and React, using them as the foundation for the output project. It applies a design-assembly workflow with robust build processes to reproduce extracted layouts, typography, and interactions.

What are the limitations of using Playwright for pixel-perfect website cloning?▼

Limitations of using Playwright for pixel-perfect website cloning include handling dynamic assets and complex interactions. While it extracts design tokens efficiently, reproducing exact responsive behavior requires a robust build process to manage edge cases.