ui-reverse-engineering

Solid

Clone or recreate a live website URL, page, or section as React + Tailwind with extracted DOM, CSS, assets, responsive layout, motion, and interactions. Use for live-URL implementation or fidelity repair; not capture-only or diff-only requests.

Web & Frontend 11 stars 1 forks Updated today Apache-2.0

Install

View on GitHub

Quality Score: 82/100

Stars 20%
36
Recency 20%
100
Frontmatter 20%
70
Documentation 15%
100
Issue Health 10%
80
License 10%
100
Description 5%
100

Skill Content

# UI Reverse Engineering Reverse-engineer a live website into a **React + Tailwind** component. ## Hard Done Criteria - **Build pass is not done.** It proves only that the app starts. - **Spot check is not done.** Manual screenshots cannot replace measurements. - **Pipeline verify PASS** is required for clean completion. - **Missing artifact is failure.** Report it as `INCOMPLETE`; never substitute notes, placeholder JSON, HTTP 200, page titles, or source strings. ## Desktop-first scope and iteration Implement the source responsive structure from the start, regardless of verification scope. Preserve local source CSS media/container queries, fluid sizing expressions, and responsive layout/visibility variants; retain original fixed values where authored. A captured computed pixel value is a measurement, not an authored sizing rule. Desktop-first limits detailed verification, not the CSS or component architecture. See `component-generation.md` for the responsive implementation contract. Unless the user already requests all responsive layouts, start verification with desktop scope. Generate the verification plan with `--scope=desktop` (default). Infer the desktop band from captured CSS breakpoints and confirm it with live reference/implementation boundary probes. Detailed verification uses the representative desktop viewport; cheap probes cover narrower and wider widths within that layout band. Use `--scope=all` when the user explicitly requests all responsive layouts. Bu...

Details

Author
voidmatcha
Repository
voidmatcha/ui-clone-skills
Created
6 months ago
Last Updated
today
Language
Python
License
Apache-2.0

Integrates with

Bundled in these plugins

Similar Skills

Semantically similar based on skill content — not just same category

Web & Frontend Listed

page-tailwindify

Clones a live web page's exact look into clean, semantic Tailwind — same design, but the framework-generated selectors (css-1a2b3c, sc-bdfBwQ, jsx-hashes) are replaced with real Tailwind utility classes — then validates the rewrite against the original in a loop until it matches. Use whenever a user points at a live URL and wants the SAME design rebuilt in readable Tailwind classes, not a restyle — phrasings like "rebuild this page in Tailwind but keep the exact look", "convert this React app's styling to Tailwind classes", "clone this design into clean Tailwind", "same look, real Tailwind classes, not the hashed ones", or "de-obfuscate this page's classes into Tailwind". For a byte-exact clone that KEEPS the original ugly selectors, use page-cloner. For a redesign that changes the look, use page-redesigner. Requires Claude in Chrome for capturing the source page.

3 Updated 5 days ago
chrismccoy
Web & Frontend Listed

webflow-to-react

Convert a Webflow page or site into a pixel-perfect React implementation (Vite or Next.js) with Playwright visual-regression testing as the correctness gate. Use when the user wants to migrate, port, rebuild, clone, or recreate a Webflow design 1:1 in React, move off Webflow, or set up screenshot/visual-diff testing of a rebuilt page against the original. Triggers: "convert Webflow to React", "rebuild this Webflow site in Next.js", "pixel-perfect clone", "visual regression vs the original".

0 Updated 1 months ago
NeuralMedic-DE
Web & Frontend Featured

clone-website

Reverse-engineer and clone a website in one shot — extracts assets, CSS, and content section-by-section and proactively dispatches parallel builder agents in worktrees as it goes. Use this whenever the user wants to clone, replicate, rebuild, reverse-engineer, or copy any website. Also triggers on phrases like "make a copy of this site", "rebuild this page", "pixel-perfect clone". Provide the target URL as an argument.

531 Updated 1 months ago
vibeeval