html-to-componentlisted

# html-to-component Convert HTML (a whole page, a pasted section, or a fetched URL) into **Next.js + Tailwind + shadcn/ui** that looks production-grade *and* fits the project's existing structure. It does two jobs in order: first it lifts the design's **tokens into the theme** (colors in oklch, fonts, radius, shadows, spacing, gradients) so everything downstream is token-based; then it turns the **markup into components without creating duplicates** — the headline being **no duplicate `Header`, no second `Avatar`, no third `Card`**. The hard part isn't generating JSX from HTML — current models do that well. The hard parts are: (a) not hardcoding the raw `#3B82F6`/`14px`/`box-shadow` the HTML is full of, but routing them through a real theme; and (b) not re-emitting the same header/card/avatar inline on every section. So this skill is built around a **theme-first, then dedup-first** discipline. This is a **builder** skill. It assumes the project is already scaffolded (`nextjs-bootstrap`) — it builds *into* that structure. It does **not** scaffold. ## The two core problems this skill solves 1. **Raw values everywhere.** HTML/CSS hands you literal hex, px, rgba shadows, inline styles, or baked-in Tailwind arbitrary values (`bg-[#3B82F6]`, `text-[14px]`). Shipped as-is, the redesign never survives and shadcn components stay unthemed. The fix: extract the *recurring* values as **tokens** and write them where a shadcn app stores its theme — `globals.css` (colors in **oklch**)