skills.rest
chrismccoy
chrismccoyCOMMUNITY
Explore all skills by this author →
GitHub

page-tailwindify

Rebuilds live webpages into semantic Tailwind utility classes preserving original appearance.

2|Updated Apr 29, 2026
Search Tags:#responsive design#tailwind#frontend design#visual validation#css-in-js#webpage cloning#html reconstruction
One-click install
npx skills add https://github.com/chrismccoy/forge --skill page-tailwindify
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: page-tailwindify
Source: https://github.com/chrismccoy/forge/tree/main/lib/page-tailwindify
Command: npx skills add https://github.com/chrismccoy/forge --skill page-tailwindify

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires playwright, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill converts a live webpage into clean, readable Tailwind utility classes while preserving its original visual appearance, avoiding the guesswork and design drift common in screenshot-based rebuilds.

Core Features & Use Cases

  • Ground-Truth Capture: Extracts the rendered DOM, source CSS, computed styles, fonts, assets, and screenshots from a live page.
  • Tailwind Translation: Rehosts pages that already use Tailwind or rewrites hashed CSS-in-JS and CSS Modules selectors into semantic Tailwind utilities.
  • Fidelity Validation: Renders the result at desktop and mobile widths, compares it with the original, and iterates on spacing, typography, color, layout, responsive behavior, and interaction states.
  • Use Case: When a client provides a live React landing page with opaque generated selectors, use this Skill to produce an editable Tailwind HTML clone that retains the same look instead of redesigning it.

Quick Start

Use the page-tailwindify skill to rebuild the live page at the provided URL in clean Tailwind classes, preserving its exact visual design and validating the result at desktop and mobile widths.

Frequently Asked Questions about page-tailwindify

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I convert a live webpage to Tailwind CSS without losing the original design?▼

Yes, websites already using Tailwind can be rehosted or rebuilt with clean, semantic Tailwind utility classes. The tool captures the live rendered page and translates the existing implementation into readable, editable Tailwind code.

Can I rewrite CSS-in-JS or CSS Modules into semantic Tailwind utility classes?▼

Yes, hashed CSS-in-JS selectors and CSS Modules can be rewritten into semantic Tailwind utility classes. The tool extracts the rendered DOM and computed styles from the live page to translate opaque generated selectors into readable Tailwind utilities.

Do I need Playwright to capture computed styles for frontend design reconstruction?▼

Rebuilding a live page into Tailwind requires Claude in Chrome or the Playwright browser automation tool for rendered-page capture. This setup extracts computed styles, inlined CSS, and screenshots to faithfully reproduce typography, layout, and assets.

How is visual fidelity validated when cloning a webpage into Tailwind?▼

Fidelity is validated by rendering the rebuilt Tailwind output at desktop and mobile widths and comparing it against the original. The tool iterates on spacing, typography, color, responsive breakpoints, and interaction states until the clone matches.

What is the best way to clone a React landing page with opaque generated selectors?▼

Screenshot-based rebuilds often cause design drift due to guesswork, whereas capturing ground-truth data like computed styles and source CSS ensures an exact visual match. This approach rebuilds live pages into editable Tailwind HTML without redesigning them.

Does this work for pages that already use Tailwind?▼

Yes, websites already using Tailwind can be rehosted or rebuilt with clean, semantic Tailwind utility classes. The tool captures the live rendered page and translates the existing implementation into readable, editable Tailwind code.

Related Skills

Explore More Design & Creative Skills→
Motion-CreativeMotion-Creative
3

brand-kit

Build a reusable brand kit from website copy and computed DOM styles.

Official
Advanced
h4vzzh4vzz
33

Frontend Design

Generate accessible React, Vue, Svelte, or HTML components with design tokens.

Community
Advanced
DVNghiemDVNghiem
20

responsive-review

Verify responsive behavior of UI components across mobile, tablet, and desktop viewports.

Community
Advanced
zephyrwang6zephyrwang6
14

web-prototype

Clone live web pages into local Next.js and Tailwind CSS prototypes.

Community
Advanced