Tailwind UI Generator

Turn a one-line description into production-ready Tailwind markup. This skill drafts cards, modals, navbars, forms, and full dashboard layouts as responsive, dark-mode-aware HTML or JSX, wired with the right utility classes, focus states, and ARIA attributes. It's aimed at frontend developers and designers who already build in Tailwind and want a solid first pass to refine rather than a black-box page builder.

When to use it

• You're scaffolding a new screen and want a clean component skeleton before wiring data.
• You need a modal, dropdown, or multi-step form with focus management and keyboard handling already in place.
• You're translating a Figma frame or a rough sketch into Tailwind utilities.
• You want a dashboard shell (sidebar + topbar + content grid) that's responsive from sm to 2xl without hand-tuning every breakpoint.

What it does

Given a prompt, it emits markup using Tailwind's utility classes and core conventions: responsive prefixes (sm:, md:, lg:), state variants (hover:, focus:, focus-visible:, disabled:), and the dark: variant for color-scheme support. Spacing, radius, and color are pulled from the default scale (p-4, rounded-lg, text-slate-600) so output maps to your tailwind.config.js theme rather than arbitrary values. Interactive pieces include semantic roles and labels (role="dialog", aria-modal, aria-expanded, sr-only). For JSX targets it returns valid React (className, self-closing tags, htmlFor). It assumes Tailwind v3+ JIT and works alongside @tailwindcss/forms when you have it installed.

Usage

curl -fsSL --create-dirs -o ~/.claude/skills/tailwind-ui-generator/SKILL.md https://claudeskil.com/skills/tailwind-ui-generator/SKILL.md

# then, in a session:
"Generate a pricing card with a featured badge, JSX, dark mode"
"Make a responsive navbar with a mobile hamburger and a user dropdown"
"Build a settings form: avatar upload, two-column fields, sticky save bar"

A pricing-card request returns something like:

<div className="rounded-2xl border border-slate-200 p-6 shadow-sm
                dark:border-slate-700 dark:bg-slate-900">
  <span className="inline-flex rounded-full bg-indigo-100 px-3 py-1
                   text-xs font-medium text-indigo-700 dark:bg-indigo-500/10">
    Most popular
  </span>
  {/* ... */}
</div>

Tips & gotchas

• Name your target ("JSX" vs "HTML") and your stack; otherwise it defaults to plain HTML.
• Dark mode output assumes darkMode: 'class' in your config — switch the prompt to media-query mode if you use darkMode: 'media'.
• Interactive behavior (open/close, focus trap) is structural; the toggle JS is minimal, so pair complex widgets with Headless UI or your own state.
• Custom brand colors only appear if you mention them or your theme tokens; by default it sticks to the stock palette.

FAQ

Does it support Tailwind v4? Output uses standard utilities that work in v3 and v4. If you rely on v4's CSS-first @theme, mention it so generated custom values align.

Can I get just the diff for an existing component? Yes — paste your current markup and describe the change (e.g. "add a loading state and disable the button").

Are the components accessible out of the box? They ship with labels, roles, and focus-visible styles, but always test with a screen reader and keyboard before shipping.