skills.rest
sftwrstef
sftwrstefCOMMUNITY
Explore all skills by this author →
𝕏@0xsftwrGitHub

website-cloning

Clone live websites into React + Vite apps with Playwright.

Updated Aug 27, 2026
Search Tags:#react#playwright#vite#website#clone#web-scraping#design-reference
One-click install
npx skills add https://github.com/sftwrstef/sol --skill website-cloning-sftwrstef
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/sftwrstef/sol/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/sftwrstef/sol --skill website-cloning-sftwrstef

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Clones a live website into a faithful React + Vite web app by scraping real content (images, text, layout, colors, and fonts), enabling rapid design references, migrations, or staging clones while preserving look-and-feel.

Core Features & Use Cases

  • Visual reconnaissance and token extraction to reproduce a site's design tokens.
  • Deep content scrape to populate a local React + Vite clone with real assets and navigation.
  • Safe and legitimate-use workflow with explicit checks for ownership and intent.

Quick Start

Provide a target URL and run the workflow to generate a self-contained 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 live website into a React app?▼

To clone a website into a React app, you provide a target URL to scrape real content, images, structure, and fonts. The tool generates a self-contained, deployable React + Vite clone artifact preserving the original look-and-feel.

What is web scraping for design reference and how does it work?▼

Web scraping for design reference extracts visual tokens, layout, and assets from a live site. Using Playwright for visual reconnaissance, it captures colors and fonts to reproduce design tokens in a local clone.

Do I need Playwright installed to scrape and clone a website?▼

Playwright is required for website cloning, utilizing a system Chromium path to perform visual reconnaissance and deep content scraping. No external dependencies are listed, as the tool manages browser automation internally.

Can I use a scraped website clone for staging and migration?▼

A scraped website clone is intended for legitimate staging and migration use cases. It includes safeguards to confirm ownership and intent, ensuring you generate a faithful React + Vite local copy safely for deployment.

What is the best way to extract design tokens from an existing website?▼

The best way to extract design tokens is using visual reconnaissance via Playwright. It scrapes real content, colors, and fonts directly from the live site to reproduce design tokens within a React + Vite clone.

What are the limitations of cloning a website into a Vite application?▼

Limitations of cloning a website into a Vite application include restrictions to legitimate use cases like design reference or migration. The tool requires explicit ownership confirmation and produces a self-contained client app artifact.

Related Skills

Explore More Design & Creative Skills→
shahmirerrorshahmirerror

website-cloning

Clone a target website into a deployable React + Vite web app.

Community
Advanced
ma-waisma-wais

website-cloning

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

Community
Advanced
horuz-aihoruz-ai
5

website-cloner

Clone websites into React components with Tailwind and motion via multi-agent QA workflow.

Official
Advanced
zzafergokzzafergok
1

markdown-to-html-skill

Convert Markdown documents to HTML using marked.js, pandoc, gomarkdown, or static site generators.

Community
Intermediate