skills.rest
hajrasarwar11
hajrasarwar11COMMUNITY
Explore all skills by this author →
GitHub

website-cloning

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

Updated Mar 19, 2026
Search Tags:#react#playwright#vite#web-scraping#design-tokens#website-cloning#clone-builder
One-click install
npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill website-cloning-hajrasarwar11
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/hajrasarwar11/DataBase-Engine-with-AI/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/hajrasarwar11/DataBase-Engine-with-AI --skill website-cloning-hajrasarwar11

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

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

Core Features & Use Cases

  • Visual reconnaissance and design-token extraction to capture colors, fonts, and layout.
  • Full-page clone with real content, images, links, and structure for a faithful reference or migration.
  • Use Case: rebuild a client site on a new stack, create a staging clone for testing, or derive a design reference with permissible content.

Quick Start

Run the cloning workflow against a target website to generate a deployable React + Vite clone artifact.

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

Cloning a website into a React and Vite application involves scraping live site data with Playwright, extracting design tokens, and scaffolding a deployable web app artifact that replicates the original layout and content.

Do I need Playwright and system Chromium to scrape and rebuild a website?▼

Yes, you need Playwright for Python and system Chromium to perform visual reconnaissance, extract design tokens, and scrape live website data required to scaffold the deployable React and Vite clone.

Can I extract design tokens like colors and fonts when cloning a site?▼

Yes, the website cloning process performs visual reconnaissance and design-token extraction to capture colors, fonts, and layout directly from the target site to ensure a faithful React rebuild.

What's the best way to create a staging clone of a client website?▼

Creating a staging clone is best achieved by using a scraping workflow to extract real content and structure, then scaffolding it into a live React and Vite web app for testing or migration purposes.

Are there limitations when scraping a website to rebuild it on a new stack?▼

Limitations when scraping a website to rebuild it on a new stack include requiring system Chromium and Playwright, and the process is strictly applicable only when you own the site or have explicit client permission.

Related Skills

Explore More Software Engineering Skills→
narcisolcfnarcisolcf

webapp-testing

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

Community
Advanced
Eng0AIEng0AI
15

vite-react

Create a Vite React TypeScript project template with ESLint and HMR.

Official
Intermediate
tann200tann200

website-cloning

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

Community
Advanced
TheTesseractAITheTesseractAI

website-cloning

Scrape live websites and generate React components from extracted design data.

Community
Intermediate