skills.rest
DevHive1
DevHive1COMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Reverse-engineer live websites into modular React and Vite applications.

18|4|Updated Apr 3, 2026
Search Tags:#frontend#react#playwright#vite#web-scraping#reverse-engineering
One-click install
npx skills add https://github.com/DevHive1/DevHive-Cli --skill website-cloning-devhive1
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/DevHive1/DevHive-Cli/tree/main/agents/website-cloning
Command: npx skills add https://github.com/DevHive1/DevHive-Cli --skill website-cloning-devhive1

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes assets (resource) components.

What problem does it solve?

This Skill solves the time-consuming challenge of manually reverse-engineering complex website layouts and styles, allowing developers to rapidly generate pixel-perfect React and Vite components from any live URL.

Core Features & Use Cases

  • Automated Extraction: Uses Playwright to capture design tokens, CSS properties, and page topology from live websites.
  • Asset Management: Automatically downloads images, videos, and SVGs to local directories to ensure build stability.
  • Responsive Design: Captures layout shifts and component states across desktop, tablet, and mobile breakpoints.
  • Use Case: Quickly replicate a competitor's landing page or a design reference for a new project, ensuring all CSS variables, fonts, and assets are correctly mapped to a modern React codebase.

Quick Start

Use the website-cloning skill to reverse-engineer the target URL and generate a React project structure.

Frequently Asked Questions about website-cloning

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

FAQPage Schema
How do I reverse-engineer a live website into React components?▼

You can reverse-engineer a live website into React components by using this Skill to extract design tokens, DOM topology, and CSS properties via Playwright, generating a modular React and Vite application automatically.

Do I need Playwright installed to scrape website layouts and styles?▼

Yes, you need Playwright and a local Chromium installation to scrape website layouts, because the Skill relies on headless browser interactions to compute styles and capture responsive breakpoints across desktop, tablet, and mobile views.

Can I clone a website's images and media assets into a local Vite project?▼

Yes, you can clone a website's images and media assets into a local Vite project, as the Skill automatically downloads images, videos, and SVGs to local directories to ensure build stability and correct asset mapping.

What's the best way to extract CSS variables and design tokens from a URL?▼

The best way to extract CSS variables and design tokens from a URL is using this Skill's automated Playwright-driven scraping, which captures page topology and style computations to map them directly into a modern React codebase.

Does this website cloning tool capture responsive design breakpoints?▼

Yes, the website cloning tool captures responsive design breakpoints by recording layout shifts and component states across desktop, tablet, and mobile resolutions during the headless browser scraping process.

Are there limitations when reverse-engineering complex website layouts into Vite apps?▼

A limitation when reverse-engineering complex website layouts is that interactive scripts or backend logic are not replicated; the Skill focuses on visual prototyping by extracting design tokens, styles, and media assets into static React components.

Related Skills

Explore More Design & Creative Skills→
muhammadhamad1104muhammadhamad1104

gstack

Execute pre-defined commands and scripts against a headless Chromium browser.

Community
Advanced
raduceucaraduceuca

figma-to-code

Convert Figma frames into React components with Tailwind CSS.

Community
Intermediate
FirzusFirzus
1

web-assets-optimization

Optimize web assets with format-specific conversions and responsive markup.

Community
Advanced
dawsonblockdawsonblock

frontend-design

Design and implement responsive UI interfaces for web applications using React and CSS frameworks.

Community
Advanced