voidmatcha/ui-clone-skills

README preview

# ui-clone-skills — Clone any website into React + Tailwind

A [Claude Code](https://docs.anthropic.com/en/docs/agents-and-tools/claude-code/overview) plugin that reverse-engineers any live website into a production-ready React + Tailwind component.

- **Uses the original CSS directly** — downloads stylesheets, keeps original class names. No re-implementing from extracted values.
- **Near-zero vision tokens for verification** — AE/SSIM image diff instead of reading screenshots with the LLM. Vision tokens only used in Phase E (final LLM review) when automated checks pass but semantic verification is needed.
- **Extracts real values from JS bundles** — GSAP timelines, Framer Motion springs, Lenis scroll params, scroll-driven keyframes. No guessing.
- **Falls back to `getComputedStyle`** when CSS is obfuscated (Tailwind, CSS-in-JS). Auto-detects site type.

## When to use this — decision tree

Different inputs need different tools. Pick by what you have:

| What you have | Use |
|---|---|
| **A live URL** and want pixel-faithful React (real CSS, real animation params, scroll/hover behavior) | `ui-clone-skills` ← you are here |
| A **Figma file** | [Builder.io](https://www.builder.io/) / [Anima](https://www.animaapp.com/) |
| A **screenshot** (no source available) | [screenshot-to-code](https://github.com/abi/screenshot-to-code) / [v0](https://v0.dev/) |
| A **text description** (no reference) | [v0](https://v0.dev/) / [Lovable](https://lovable.dev/) |
| A live URL and just want **static HTML mirror** (no React) | `wget --mirror` / [HTTrack](https://www.httrack.com/) |

View full repository on GitHub →