website-cloning

To clone a website into a React app, this Skill uses Playwright to extract raw HTML, styles, and assets, then generates a pixel-perfect local Vite project. It enforces raw HTML as the source of truth to ensure structural and visual fidelity.

Yes, Playwright extracts local assets during the website cloning process. The workflow specifically handles inline SVG and logo extraction, alongside font handling, to ensure the resulting React application maintains complete visual fidelity.

The best way to achieve pixel-perfect website cloning is using raw HTML as the source of truth. This technique extracts structure and styles via Playwright, translating them into a faithful local React and Vite app replica.

Yes, you can use a website clone for offline development and migration planning. By producing a faithful local React and Vite replica with local assets, the workflow supports design reviews and design-to-code prototyping without internet dependency.

When cloning a website to React, the workflow handles fonts automatically and generates an inventory of design tokens. This ensures the Vite app maintains consistent typography and styling extracted from the original target page.

A website clone needs Vite and local asset gathering to produce a functional, offline-ready React application. Local asset gathering ensures all images, SVGs, and fonts are stored locally, preventing broken links during design reviews.