skills.rest
Darshit-Vaghani
Darshit-VaghaniCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Reverse-engineer websites into React + Vite clones with Playwright-based extraction.

Updated Aug 23, 2026
Search Tags:#react#playwright#vite#pixel-perfect#website cloning#ui reverse-engineering#responsive replication
One-click install
npx skills add https://github.com/Darshit-Vaghani/swasau_website --skill website-cloning-darshit-vaghani
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/Darshit-Vaghani/swasau_website/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/Darshit-Vaghani/swasau_website --skill website-cloning-darshit-vaghani

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It solves the time-consuming process of recreating a website’s layout, styling, assets, and interactions by automating reconnaissance and rebuild of a target site into a React + Vite clone.

Core Features & Use Cases

  • Pixel-perfect React + Vite cloning: Rebuilds the target page’s structure and look with extracted design tokens and component specs.
  • Playwright-based extraction workflow: Captures screenshots, topology, computed styles, responsive behavior, and interaction states (hover/scroll/mobile).
  • Local asset downloading and token mapping: Downloads images/videos and maps fonts to close equivalents to avoid external CDN dependency in the final build.
  • Legitimate-use guardrails: Prompts for intent confirmation and refuses cloning when it appears to be impersonation, phishing, trademark abuse, or deception.

Quick Start

Ask the skill to clone the website at the URL you provide, and it will extract tokens, topology, behaviors, and assets before generating a pixel-perfect React + Vite recreation.

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 pixel-perfect React app?▼

To clone a website into a pixel-perfect React app, this skill uses Playwright to extract design tokens, layout topology, and interaction behaviors, then generates a Vite-based React recreation with local assets.

What is UI reverse-engineering and how does it capture responsive states?▼

UI reverse-engineering captures responsive states by using Playwright to screenshot target pages, extract computed DOM styles, and record mobile navigation and scroll behaviors for accurate replication.

Can I use Playwright to extract design tokens and computed styles for website cloning?▼

Yes, Playwright extracts design tokens and DOM-based computed styles during the reconnaissance phase, capturing screenshots and interaction states to map the target site into component spec files.

Do I need to manually download assets when replicating a website with Vite and React?▼

No, you do not need to manually download assets when replicating a website; the workflow automatically downloads local images, videos, and maps fonts to close equivalents to avoid external CDN dependencies.

What are the limitations of automated pixel-perfect website cloning?▼

Automated pixel-perfect website cloning includes limitations guardrails that refuse requests appearing to be impersonation, phishing, or trademark abuse, and requires a two-phase build approach for accurate component specs.

Does website cloning work with responsive mobile navigation and interaction behaviors?▼

Yes, website cloning works with responsive mobile navigation by capturing interaction behaviors like hover and scroll states through Playwright reconnaissance before dispatching the React component builders.

Related Skills

Explore More Design & Creative Skills→
naopensedoit2-designnaopensedoit2-design

website-cloning

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

Community
Advanced
offers-pngoffers-png

website-cloning

Clone target websites as pixel-perfect React + Vite apps using Playwright.

Community
Advanced
DrLuggelsDrLuggels
3

web-component-design

Guide reusable web component design with React, Vue, and Svelte patterns.

Community
Intermediate
kevindreekevindree

browser-testing-with-devtools

Inspect live DOM, console, network, and accessibility data via Chrome DevTools MCP.

Community
Advanced