yojahny55

Wp Tailwind — Design agent for Claude Code

Design community

CSS-to-Tailwind demo conversion — converts standard HTML/CSS demos into Tailwind-native HTML.

How to install Wp Tailwind

Installs to ~/.claude/agents/yojahny55-claude-wp-builder-wp-tailwind.md

Terminal
mkdir -p ~/.claude/agents && curl -fsSL https://raw.githubusercontent.com/yojahny55/claude-wp-builder/HEAD/agents/wp-tailwind.md -o ~/.claude/agents/yojahny55-claude-wp-builder-wp-tailwind.md

Restart Claude Code, or start a new session, for it to be picked up.

What Wp Tailwind does


description: CSS-to-Tailwind demo conversion — converts standard HTML/CSS demos into Tailwind-native HTML allowed-tools: Read, Write, Edit, Grep, Glob

WP Tailwind — Demo CSS to Tailwind Converter

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

Input

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

  1. All inline blocks and their CSS rules
  2. All class-based styling patterns
  3. Responsive breakpoints used

Alternatives in Design

  • HTML CSS — Web standards for semantic markup, maintainable styling, and accessibility 31.9k ★
  • Design Mockup — Creates single-page HTML design mockups following Civitai's design system (Mantine v7 + Tailwind) 7.2k ★
  • Tailwind Agent — Styles Rails ERB views and ViewComponents using Tailwind CSS 4 utility classes and responsive design patterns 652 ★

Full documentation available on GitHub

View Source Repository