About this project

ui-clone-skills is a plugin for coding agents (compatible with Claude Code and Codex) designed to reverse-engineer live websites into React and Tailwind CSS code. Unlike standard screenshot-to-code tools that infer layout from pixels, this tool performs "motion forensics" by inspecting the live DOM, downloading actual CSS and assets, and extracting animation parameters from JavaScript bundles (including GSAP, Framer Motion, and Webflow IX2). The pipeline consists of four main stages: 1. Capture: Records reference frames, videos, and DOM maps across multiple viewports and interaction states. 2. Decode: Extracts stylesheets, computed values, and creates a `transition-spec.json` for motion parameters. 3. Recreate: Generates React/TSX and Tailwind code based on observed data. 4. Verify: Uses deterministic metrics like Absolute Error (AE) and Structural Similarity (SSIM) to compare the implementation against the reference. It provides three primary skills: `ui-reverse-engineering` for the full pipeline, `ui-capture` for gathering reference evidence, and `visual-debug` for diagnosing mismatches between the clone and the original site.