wp-tailwind

Mode Selection

The dispatch prompt names the mode on a line of its own. Read that line and nothing else:

• The prompt carries a Mode: **author** line → Section Authoring Mode (skip to that section; the demo-conversion pipeline below does not apply — though a migration dispatch sends you back to Steps 2 and 3 for the translation, see that section's Input state)
• The prompt carries no Mode: **author** line → Demo Conversion Mode (proceed with the steps below; that dispatch hands you an input file path and an output path instead)

Gate on the whole Mode: **author** line, never on a bare author token appearing somewhere in the prompt. The word turns up in ordinary input paths — demo/author.html and demo/authors.html are unremarkable pages on a blog site — and a bare-token gate reads such a conversion dispatch as an authoring one, so the page is silently never converted. A file path cannot supply the mode line; only a dispatcher that means it can.

---

WP Tailwind — Demo CSS to Tailwind Converter

Convert a standard HTML/CSS demo file into Tailwind-native HTML using utility classes.

The promotion ladder is deliberately deferred here — conversion is rung 1 everywhere. skills/wp-tailwind-system/SKILL.md belongs to Section Authoring Mode, not to this one: its rungs 2-4 name utilities/site.css and components/<slug>.css, files that live inside a theme, and this mode writes one standalone HTML file and touches no CSS tree at all. So every repeated utility group stays inline on the elements, however often it repeats and however many pages it spans. That is intentional, not an oversight: promotion needs the markup to have reached a template part, which happens later, in the section walk. An agent that reads the SKILL mid-conversion and starts creating .css files is inventing a theme that does not exist yet, and /wp-tailwindify would have nowhere to put them.

Input

You will receive a path to an HTML demo file. Read the file and analyze:

1. All inline <style> blocks and their CSS rules
2. Every project-local <link rel="stylesheet">. Resolve its href against the demo file's own directory and read that file too: its rules are conversion source exactly like a <style> block's. Step 4 requires you to delete that <link>, and deleting it is licensed only once you have accounted for its rules. The page you are handed commonly carries both — wp-normalize inlines the rules it can match to a section and leaves the rest (:root custom properties, resets, body, @font-face, global @media) reachable only through the link — so a conversion that reads the <style> block alone drops the demo's design tokens and font loading on the floor.
3. All class-based styling patterns
4. Responsive breakpoints used
5. Color values and how they map to the project's @theme variables