page-tailwindify

name

page-tailwindify

description

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.

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-JS page: translate real CSS + computed.json values into semantic HTML + Tailwind, section by section.
3. references/validate.md — validate in a loop. Screenshot the result, compare against the original on the single fidelity axis, fix drift, repeat.

Read each reference file when you reach that part; don't load them all upfront.

Workflow

1. Capture ground truth

Requires Claude in Chrome — if unavailable, stop and tell the user; the rewrite needs the real rendered page, and guessing produces a fake with nothing to validate against.

• Extract the faithful clone. Invoke the page-cloner skill (its references/capture.md) to produce <workspace>/clone/index.html — the real rendered DOM with real CSS inlined. This is the structural + CSS spec the rewrite reads from (it carries @media, :hover, fonts — things a screenshot can't).
• Dump computed values — only if step 2's detection finds hashed / CSS-in-JS styling; an already-Tailwind page skips this. Evaluate scripts/computed.js and save the array to <workspace>/original/computed.json — exact per-element values to map onto Tailwind. Capture it at the SAME viewport width you validate at (1280).
• Screenshot the original (full page + per section, and one narrow-width shot for breakpoint checking) to <workspace>/original/, as the human-eye yardstick.

Real capture has several non-obvious failure modes (tool-output content filter, resize_window not shrinking the window, Chrome blocking the second download). Read references/capture-notes.md before capturing — it has the workarounds.

2. Detect the styling system, then branch

Before touching anything, check what the page is built with. Grep the markup in clone/index.html for hashed selectors: grep -oE '(css-[a-z0-9]+|sc-[a-zA-Z]+|jsx-[0-9]+|[A-Za-z]+_[A-Za-z0-9]{5,}__?[A-Za-z0-9]+)' clone/index.html (the last alternative catches CSS-Modules names like Button_button__3xYz1).

• Already Tailwind — utility classes present (grid, lg:grid-cols-2, bg-[#c1ff72], font-sans) and the grep returns nothing → 2a, rehost mode. The markup already IS clean Tailwind; there's nothing to translate.
• Hashed / CSS-in-JS — classes look like css-1a2b3c, sc-bdfBwQ, jsx-1234, or styling lives in a compiled stylesheet keyed by opaque selectors → 2b, translate mode. This is the case the skill is built for.
• Mixed — Tailwind utilities and hashed selectors together (common with component libraries): treat as 2b, but leave the already-Tailwind portions as-is and only translate the hashed ones.

2a. Rehost-on-CDN mode

Follow references/rehost.md. Strip the inlined compiled-Tailwind <style>, keep the markup, add the Tailwind CDN + the real font link. Produces a much smaller <workspace>/tailwind/index.html with byte-identical classes. computed.json is not needed for this mode.

2b. Translate mode

Follow references/rewrite.md, mapping with references/mapping.md. Section by section, turn the real markup + CSS + computed.json values into semantic markup with Tailwind classes. Produces one self-contained <workspace>/tailwind/index.html (Tailwind CDN is fine for a preview): generated hashes stripped, fonts and assets preserved.

3. Validate in a loop — one axis: fidelity

Follow references/validate.md. Render with scripts/shoot.py, compare against the original captures section by section (and at a narrow width for breakpoints), and turn every difference into a specific class fix. Loop until it matches or ~5 rounds pass without progress, then report honestly what's still off.

There is exactly one axis: does it look like the original? Do not improve anything — no new type scale, no palette cleanup, no spacing tweaks beyond matching. A change that makes the rewrite diverge from the original is a regression, not a win.

What this can and can't do

• Static. Scripts are stripped in the extract, so JS-driven behaviour freezes at capture state. Scroll/expand everything before capturing.
• Arbitrary values are expected. A bespoke design won't sit on Tailwind's default scale; faithful classes like text-[17px] and bg-[#0b5fff] are correct here. Accuracy first; normalising onto tokens is a separate later pass if the user wants.
• Approximate where the loop can't see. Rare pseudo-states or JS-injected styles may not survive. Byte-exact isn't the goal — clean-and-identical-looking is. For byte-exact, use page-cloner.

Notes

• Real numbers, not screenshots. Every class should trace to a value in computed.json or a rule in clone/index.html. If you're guessing from a PNG, you'll drift.
• Don't skip the loop. The first rewrite is a draft; the comparison is what makes it faithful.
• Be specific in fixes. "Spacing off" isn't a fix. "Section padding is py-10, computed.json says 48px → use py-12" is.