skills.rest
ma-wais
ma-waisCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

website-cloning

Clone a website's design and content into a deployable React + Vite web app.

Updated Mar 24, 2026
Search Tags:#react#playwright#vite#web-scraping#design-tokens#website-clone#content-scraping
One-click install
npx skills add https://github.com/ma-wais/Quality-Management-System --skill website-cloning-ma-wais
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/ma-wais/Quality-Management-System/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/ma-wais/Quality-Management-System --skill website-cloning-ma-wais

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clone a website's design and content into a deployable React + Vite web app to accelerate rebuilding, design reference, or migration.

Core Features & Use Cases

  • Faithful visual clone: scraping structure, images, colors, fonts, and content to recreate a live site as a React + Vite project.
  • Use Case: Design reference, staging, or migration with source content while respecting ownership and licenses.

Quick Start

Provide a target site URL and confirm legitimate intent to initialize and scaffold a React + Vite clone using real scraped content.

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 application?▼

You can clone a website into a React and Vite application by providing a target URL to this Skill, which uses Playwright and system Chromium to scrape live content, images, and design tokens to generate a deployable project.

Can I use Playwright to scrape website content and design tokens for a React project?▼

Yes, Playwright drives system Chromium to scrape website structure, colors, fonts, images, and content, passing these design tokens into an artifact scaffold to build a self-contained React project.

What is the best way to create a frontend replica of a live site for design reference?▼

Creating a frontend replica of a live site involves scraping its visual structure and source content into a React and Vite web app, providing a faithful clone for staging, migration, or design reference.

Does this website cloning approach require any external browser dependencies?▼

Yes, this approach relies on system Chromium and Playwright to navigate the target URL and extract live content, images, and design tokens for the React and Vite scaffold.

What are the limitations when using a web scraper to clone a site into a Vite app?▼

When cloning a site into a Vite app, you must respect source ownership and licenses, and the scraper captures frontend visual structure and content rather than backend logic or dynamic server-side state.

Related Skills

Explore More Software Engineering Skills→
narcisolcfnarcisolcf

webapp-testing

Automate end-to-end tests for local React Vite apps with Playwright.

Community
Advanced
Celia-12Celia-12

website-cloning

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

Community
Advanced
tann200tann200

website-cloning

Convert a website URL into a React + Vite web app with Playwright.

Community
Advanced
mjunaidcamjunaidca
2

browser-use

Automate browser interactions for navigation, form submission, and web scraping.

Community
Advanced