skills.rest
SaberAloui
SaberAlouiCOMMUNITY
Explore all skills by this author →
GitHub

website-cloning

Clone websites as pixel-perfect React and Vite apps using Playwright extraction.

Updated Jul 10, 2026
Search Tags:#frontend#react#web scraping#playwright#vite#pixel-perfect#website cloning
One-click install
npx skills add https://github.com/SaberAloui/agri-hub --skill website-cloning-saberaloui
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: website-cloning
Source: https://github.com/SaberAloui/agri-hub/tree/main/.local/secondary_skills/website-cloning
Command: npx skills add https://github.com/SaberAloui/agri-hub --skill website-cloning-saberaloui

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright.

What problem does it solve? Recreating an existing website's design by hand is slow and error-prone, with fonts, colors, logos, and layouts easily guessed wrong. This Skill provides a rigorous extraction-and-rebuild methodology that produces an exact React + Vite replica of a target page with zero placeholders or fabricated content. ## Core Features & Use Cases - Playwright-Based Extraction: Saves raw HTML as the source of truth, captures full-page and header screenshots, and builds a section inventory with design tokens, fonts, and SVG logos. - Complete Asset Pipeline: Downloads all images, videos, fonts, and SVGs before building, with CDN URL upscaling for Shopify, Sanity, Cloudinary, and Contentful. - Structured Build Workflow: Guides a four-phase process (reconnaissance, foundation, section build, verification) with anti-patterns and pitfalls documented from real cloning projects. - Use Case: A developer migrating their own Shopify store to a custom React frontend uses this Skill to extract every section, asset, and style from the live site, then rebuilds it as a pixel-perfect Vite app in a fraction of the manual time. ## Quick Start Clone the website at this URL as a pixel-perfect React and Vite app, extracting all assets and styles with Playwright first.

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 as a React app?▼

Use Playwright to save the target page's raw HTML, take full-page screenshots, and extract a section inventory with design tokens. Then download all assets, replace the Vite scaffold CSS with plain CSS, build one component per visual pattern, and verify with a full-page screenshot comparison.

How to extract images and fonts from a website with Playwright?▼

Run page.evaluate to collect all img, video, background-image, and @font-face URLs, then download them with retry logic and browser User-Agent headers. Upscale CDN URLs first, such as replacing Shopify's _small suffix with _1200x or width params with 1200.

Why does Playwright page.goto hang with networkidle?▼

Sites with persistent WebSocket or analytics connections never reach network idle, so the call hangs. Use wait_until="domcontentloaded" with a 60-second timeout, then add page.wait_for_timeout(5000) to let client-side rendering finish.

Is it legal to clone someone else's website design?▼

Cloning is acceptable for your own site, client work, learning, or platform migration, but not for impersonation, phishing, or trademark infringement. For non-owned sites used as inspiration, replace all logos, brand names, trademarks, and product data with your own.

Why does my cloned page look different from the original website?▼

Common causes include building from screenshots instead of raw HTML, guessing colors instead of extracting computed styles, using text instead of the real SVG logo, and wrong locale text. Always treat raw.html as the source of truth and verify with a full-page screenshot.

Related Skills

Explore More Software Engineering Skills→
sftwrstefsftwrstef

website-cloning

Clone live websites into React + Vite apps with Playwright.

Community
Advanced
Celia-12Celia-12

repl_setup

Configure Angular, React, Vite, or Vue apps for Replit with host settings and port binding.

Community
Intermediate
BruceTyndallBruceTyndall

visual-regression-checker

Capture and compare web application screenshots against a baseline to detect visual drift.

Community
Intermediate
bitovibitovi
1

component-reuse

Audit frontend codebases to identify reusable UI components before creating new ones.

Official
Intermediate