skills.rest
Mo7amed-Mahmoud
Mo7amed-MahmoudCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Clones websites into React+Vite apps using Playwright-extracted HTML and assets.

Updated Apr 18, 2026
Search Tags:#react#assets#playwright#vite#website#clone
One-click install
npx skills add https://github.com/Mo7amed-Mahmoud/ZeinaGuard-Pro --skill website-cloning-mo7amed-mahmoud
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/Mo7amed-Mahmoud/ZeinaGuard-Pro/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/Mo7amed-Mahmoud/ZeinaGuard-Pro --skill website-cloning-mo7amed-mahmoud

SYSTEM DOCUMENTATION & REQUIREMENTS

## What problem does it solve? Clone any website as a pixel-perfect React + Vite clone, using the source HTML as truth to reproduce layout, typography, and assets precisely. It enables reverse-engineering a target site into a production-ready frontend without guessing.

## Core Features & Use Cases

  • Raw HTML is the source of truth. Before building any section, read the corresponding portion of raw.html. Never build from memory, screenshots alone, or guessed structure.
  • One component per visual pattern. Never reuse a component designed for one layout for a structurally different layout.
  • All assets downloaded before building starts. Every image, font, SVG, and video must be local in public/ before any component code is written.
  • Build all sections, then verify the full page. This is 3-5x faster than per-section verification loops.
  • No fabricated content. Every heading, subtitle, button label, badge, price, and link must come from the source HTML.
  • Replace the scaffolded CSS entirely. Remove Tailwind/shadcn boilerplate and use plain CSS.

### Quick Start Save the target page's raw.html and execute the end-to-end workflow to produce a pixel-perfect React + Vite 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, use Playwright to extract the authoritative HTML and download all assets upfront. The process uses raw HTML as the source of truth to reproduce layout and typography precisely in a Vite project.

What is the best way to use raw HTML for front-end redevelopment?▼

The best way to use raw HTML for front-end redevelopment is to read the corresponding portion of the source file before building any section. This prevents guessing structure and ensures every heading, label, and link matches the original site exactly.

Does this website cloning process replace Tailwind with plain CSS?▼

Yes, this website cloning process requires you to replace scaffolded Tailwind or shadcn boilerplate entirely with plain CSS. This ensures the cloned React components match the target site's styling without framework interference.

Can I use Playwright to download all assets before building React components?▼

Yes, you can use Playwright to download all assets before building React components. Every image, font, SVG, and video must be stored locally in the public directory before any component code is written.

Why should I build all sections before verifying a Vite website clone?▼

Building all sections before verifying a Vite website clone is 3 to 5 times faster than per-section verification loops. Assembling the full single-page artifact first allows you to validate the complete visual output at once.

Related Skills

Explore More Software Engineering Skills→
Devvraj10Devvraj10

website-cloning

Clone websites into React + Vite apps by extracting HTML, CSS, and JavaScript.

Community
Advanced
samibrahmisamibrahmi

website-cloning

Clone a target website into a pixel-perfect React + Vite app using 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
vikingokftvikingokft

stitch::extract-design-md

Extract a Stitch-compatible DESIGN.md from frontend source code.

Official
Intermediate