skills.rest
kvm9-dev
kvm9-devCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Rebuild existing websites as pixel-perfect React and Vite applications.

2|Updated Apr 11, 2026
Search Tags:#design tokens#playwright#pixel-perfect#website cloning#asset download#responsive UI#react vite
One-click install
npx skills add https://github.com/kvm9-dev/susanoo --skill website-cloning-kvm9-dev
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/kvm9-dev/susanoo/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/kvm9-dev/susanoo --skill website-cloning-kvm9-dev

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

It helps you recreate an existing website’s look and layout as a pixel-perfect React + Vite app, saving time compared to manual redesign and rebuilding from scratch.

Core Features & Use Cases

  • Pixel-perfect cloning workflow: Extract design tokens, typography, layout topology, and assets from the live site, then rebuild the UI to match.
  • Responsive and interaction coverage: Captures desktop/tablet/mobile layouts and includes mobile navigation (hamburger/drawer), plus hover/scroll/click behavior targets.
  • Asset-first fidelity: Downloads images/videos locally to avoid expiring CDN links and improve reliability of the final build.
  • Parallel build guidance: Uses a spec-first approach and dispatches design/build steps for components so complex sections can be reproduced accurately.

Quick Start

Ask it to clone a specific site by providing the target URL you want recreated as a React + Vite pixel-perfect clone.

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, the process extracts design tokens, typography, and layout topology from the target URL, then rebuilds the UI as a React + Vite application. This spec-driven approach ensures accurate layout replication across desktop and mobile.

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

Extracting design tokens from an existing website is best achieved through Playwright-based extraction, which captures layout topology, typography, and assets. This method ensures pixel-perfect fidelity when reverse-engineering a URL for cloning or migration scenarios.

Can I replicate responsive layouts and mobile navigation when copying a website?▼

Yes, you can replicate responsive layouts and mobile navigation when copying a website by performing responsive topology and interaction sweeps. This captures desktop, tablet, and mobile layouts, including hamburger and drawer navigation, to ensure the cloned React app matches the original.

How do I download website assets locally to avoid expiring CDN links?▼

To download website assets locally and avoid expiring CDN links, use an asset-first extraction workflow that fetches images and videos during the reverse-engineering process. This improves the reliability of your pixel-perfect React build by embedding local assets.

Does website cloning with Playwright support hover and scroll interactions?▼

Website cloning with Playwright supports hover, scroll, and click behavior targets by capturing interaction sweeps alongside responsive topology. This ensures the pixel-perfect React and Vite application accurately reproduces the original site's dynamic user interactions.

What are the limitations of reverse-engineering a URL into a React and Vite application?▼

Reverse-engineering a URL into a React and Vite application requires Playwright-based extraction and may face limitations with highly dynamic or login-walled content. Complex interactive sections are handled using a spec-first parallel build approach to accurately reproduce intricate layouts and behaviors.

Related Skills

Explore More Software Engineering Skills→
narcisolcfnarcisolcf

webapp-testing

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

Community
Advanced
horuz-aihoruz-ai
5

website-cloner

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

Official
Advanced
NS-VandanaNS-Vandana

website-cloning

Rebuild a target website as a React and Vite application with local assets.

Community
Advanced
SoufianouassifSoufianouassif

website-cloning

Clone a target website into a pixel-perfect React + Vite app using Playwright.

Community
Advanced