website-cloning

Clone a target website's design into a self-contained React + Vite app.

Updated Feb 17, 2026
One-click install
npx skills add https://github.com/Celia-12/Proyecto-Mern --skill website-cloning-celia-12
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/Celia-12/Proyecto-Mern/tree/main/frontend/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/Celia-12/Proyecto-Mern --skill website-cloning-celia-12

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cloning a live website into a self-contained React + Vite app often requires manual recreation of layout, content, and design tokens. This Skill provides a repeatable workflow to reproduce a site’s structure using real scraped data while guiding legitimate usage and ownership considerations.

Core Features & Use Cases

  • Faithful visual cloning: replicate layout, typography, colors, and imagery using data from the source site.
  • Staging, migration, and design experiments: generate production-ready clones for redesigns or platform migrations.
  • Design tokens, assets, and end-to-end workflow: extract tokens and assets and assemble a self-contained project.

Quick Start

Provide the target website URL and ownership confirmation to begin cloning into a React + Vite app.

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 and Vite app?

To clone a website into a React and Vite app, provide the target URL and ownership confirmation. The Skill uses Playwright to scrape real content and design tokens, then scaffolds a self-contained, production-ready project.

Can I extract design tokens and assets from a live website for a redesign?

Yes, you can extract design tokens and assets from a live website. The workflow scrapes real text, images, colors, and typography to assemble a faithful visual clone for staging or design experiments.

Do I need Playwright and Chromium installed to scrape and clone a site?

Yes, you need Chromium via Playwright to scrape and clone a site. This dependency enables the extraction of real content and design tokens required to generate the React and Vite project scaffold.

What is the best way to create a staging environment for a website migration?

The best way to create a staging environment for a website migration is to generate a production-ready React and Vite clone. It reproduces the source layout using scraped assets and design tokens for accurate platform migration testing.

Can I use this website cloning workflow for any site without ownership?

No, you cannot use this website cloning workflow without ownership. You must confirm ownership of the target website before proceeding to ensure legitimate usage during the scraping and scaffolding process.

What are the limitations of using scraped content for visual cloning?

A limitation of using scraped content for visual cloning is that it reproduces static layout, text, and images, but may not capture dynamic backend logic or interactive states accurately within the generated React and Vite app.