ui-clone-skills

Capture or record visual behavior from a website — scroll transitions, hover, mousemove/parallax, auto-timers. Also for side-by-side comparison between a reference site and a local clone. Triggers on "take baseline screenshots of <URL>", "record the hover effects", "capture scroll animations", "record the parallax", "capture every transition on <URL>", "compare <ref> vs <localhost>", "diff against the reference". Works standalone or from ui-reverse-engineering / ralph workflows.

Clone or replicate a live website URL as React + Tailwind. Triggers on "clone <URL>", "copy the hero from <URL>", "make it look like <URL>", "rebuild this in react", "remake this site", "match this design from <URL>", "reverse-engineer this layout", "extract the animation from <URL>". Adjacent tools (do NOT trigger this skill — different category): v0/Lovable (prompt → UI, no URL input), screenshot-to-code (screenshot → code, no live URL), Builder.io/Anima (Figma → code). Key signal — the user has a **reference URL**, not a prompt or screenshot. Outputs React components with real extracted values (getComputedStyle, DOM, JS bundle grep for GSAP/Framer/Lenis params, Webflow IX2 timelines). Accepts screenshot/video as fallback (Claude Vision approximation). Does NOT apply to general CSS help or building UIs from scratch without a reference.

Compare original site vs implementation with automated AE/SSIM diff — near-zero vision tokens. Triggers on "it looks different", "doesn't match", "compare with original", "what's wrong", "why is the impl off", "diff against ref", "verify the clone". Uses auto-diagnose to find mismatched elements from diff images without vision tokens. Falls back to reading diff images only when auto-diagnose finds nothing.