ui-reverse-engineering
SolidClone 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.
Install
Quality Score: 83/100
Skill Content
Details
- Author
- voidmatcha
- Repository
- voidmatcha/ui-clone-skills
- Created
- 6 months ago
- Last Updated
- yesterday
- Language
- Python
- License
- Apache-2.0
Integrates with
Bundled in these plugins
Similar Skills
Semantically similar based on skill content — not just same category
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.
mimic
Reverse-engineer and reconstruct a reference website's design and behavior to mirror-level fidelity. Use this whenever the user wants to clone, copy, mirror, replicate, recreate, rebuild, or "make mine look like" another site, page, section, component, hero, navbar, footer, or landing page — or wants to extract a site's design system, isolate one interaction/animation/scroll pattern, or reverse-engineer its layout, typography, spacing, color, responsive behavior, or motion (including scroll, reveal, spring, and WebGL/3D motion). Trigger even when the user just pastes a URL and says "copy this", "rebuild this", "recreate this animation", "steal this design", "match this layout", or "reverse engineer this" without naming a mode. Treat the reference as a specification and recover the rules behind the pixels, not just the pixels. Do not trigger for building an original design from scratch with no reference, for pure visual QA of an existing build, or for backend/API work.
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".