skills.rest
offers-png
offers-pngCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

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

Updated Apr 5, 2026
Search Tags:#react#playwright#vite#pixel-perfect#design-token#website-clone#asset-download
One-click install
npx skills add https://github.com/offers-png/one-time-checkout --skill website-cloning-offers-png
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/offers-png/one-time-checkout/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/offers-png/one-time-checkout --skill website-cloning-offers-png

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Reverse-engineer and clone any website as a pixel-perfect React + Vite app, reducing manual recreation time and preserving visual parity.

Core Features & Use Cases

  • Pixel-perfect website clones from live sites using automated extraction, including assets, typography, and interactions.
  • Rebuilds for design references, migrations, or client projects with mobile navigation reconstruction.
  • Asset harvesting and offline-ready deliverables for local development and previews.

Quick Start

Provide a target URL to clone and initiate an automated workflow that generates a React + Vite clone with assets and styles.

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

To clone a website into a pixel-perfect React app, provide a target URL to initiate automated extraction. The workflow uses Playwright to capture typography, assets, interactions, and design tokens, outputting a structured Vite project.

How does Playwright extract design tokens and assets for a website clone?▼

Playwright automates extraction by analyzing the live target site to harvest design tokens, typography, styles, and media assets. This ensures the generated React application maintains strict visual parity and offline readiness.

Can I use this website cloning workflow for client redesigns and migrations?▼

Yes, you can use this website cloning workflow for client redesigns and migrations. It rebuilds reference sites into React apps, reconstructs mobile navigation, and provides offline-ready deliverables for local development.

What is the best way to capture mobile navigation when cloning a site into React?▼

The best way to capture mobile navigation is through the structured component spec workflow. It uses automated extraction to reconstruct responsive interactions and mobile navigation elements directly into the React Vite clone.

Does this pixel-perfect cloning process require manual asset recreation?▼

No, the pixel-perfect cloning process does not require manual asset recreation. It uses Playwright for asset harvesting, automatically downloading media and styles to generate offline-ready deliverables for local previews.

Why use Vite and React for pixel-matching a target website?▼

Vite and React are used for pixel-matching a target website because they provide a structured component spec workflow. This combination ensures visual parity while delivering a fast, local development environment for the cloned assets.

Related Skills

Explore More Design & Creative Skills→
Kirankumar2604Kirankumar2604

website-cloning

Extract DOM structure, CSS tokens, and assets from target websites using Playwright.

Community
Advanced
unthinkmediaunthinkmedia

coherence-live-preview

Register experiments and start the Vite development server with hot-reloading for Coherence UI prototypes in React environments.

Community
Intermediate
lucasxflucasxf
3

mobile-design-system

Generates mobile UI design system with color tokens, component recipes, and layout patterns.

Community
Intermediate
bhushanofficial69-specbhushanofficial69-spec

website-cloning

Clone websites into React + Vite apps using Playwright extraction.

Community
Advanced