What problem does it solve? Recreating an existing website's design by hand is slow and error-prone, with fonts, colors, layouts, and assets easily guessed wrong. This Skill provides a structured methodology to reverse-engineer any website into an exact React + Vite replica using Playwright-driven extraction. ## Core Features & Use Cases - Automated Extraction: Uses Playwright to save raw HTML, capture screenshots, extract design tokens, fonts, SVG logos, and download all images and videos before building. - Section-by-Section Rebuild: Generates a section inventory checklist and rebuilds each section as a React component with exact text, styles, and assets from the source HTML. - Verification Workflow: Compares a full-page screenshot of the clone against the original and fixes discrepancies, with a documented pitfalls guide covering 23 common mistakes. - Use Case: A developer migrating their own site to a modern stack can point the Skill at the live URL and receive a pixel-perfect React + Vite clone with all assets localized. ## Quick Start Clone the website at https://example.com as a pixel-perfect React and Vite app using the website-cloning skill.
