page-tailwindifylisted

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.
chrismccoy/forge · ★ 3 · Web & Frontend · score 64

Install: claude install-skill chrismccoy/forge

# Page Tailwindify This skill reproduces a live page's **exact look** in clean, semantic Tailwind. The original's framework-generated class hashes (`css-1a2b3c`, `sc-bdfBwQ`, `jsx-1234`) are gone, replaced by real utility classes (`flex gap-4 rounded-lg px-6 hover:bg-…`). The design does not change — colors, type, spacing, and layout stay identical. Only the styling *system* changes, from opaque generated selectors to readable Tailwind. The accuracy trick: don't guess Tailwind from a screenshot, and don't rely on `getComputedStyle` alone (one state — loses `@media`, `:hover`, breakpoints). Drive the rewrite from the page's **real markup and CSS** plus a dump of **real computed values**, so every Tailwind class comes from an actual number, not an eyeball. This sits between its two sibling skills: `page-cloner` keeps the exact look but keeps the ugly selectors (byte-exact extract); `page-redesigner` rebuilds and changes the look. This one keeps the look, cleans the selectors. ## The parts 1. **Capture ground truth** — reuse `page-cloner` to extract the faithful DOM + real CSS, plus screenshots; dump `scripts/computed.js` values *if* translating. See `references/capture-notes.md` for the capture gotchas. 2. **Detect, then branch** into one of two modes: - **`references/rehost.md`** — already-Tailwind page: swap the inlined compiled CSS for the Tailwind CDN. Nothing to translate. - **`references/rewrite.md`** (+ **`references/mapping.md`**) — hashed / CSS-in