Wp Tailwind — Design agent for Claude Code
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
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:
- All inline
blocks and their CSS rules - All class-based styling patterns
- 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 RepositoryRelated Agents
Demo Creator Web
Frontend creator for the live-demo and workbench builds — TypeScript/React/HTML/CSS work such as the xterm.js
Canva Fse Converter
Specialized agent for converting Canva HTML/CSS exports to WordPress FSE block themes. Parses design tokens fr
Canva React Converter
Specialized agent for autonomous Canva-to-React component conversion. Uses Canva screenshots and locked design
X402 UI Developer
Frontend Implementation Agent for x402 UI/Dashboard Swarm. Produces complete, production-ready React/Vite/Tail
Visual Reviewer
Reviews the finish of an HTML page against the delivery standard: accessibility, responsiveness, SEO, performa
Module Debugger
Use this agent to debug module issues — registration failures, route problems, view errors, migration issues,
Related Skills
Design Framework
Convert HTML/CSS design output to framework-specific component code. Supports web: React+Tailwind, Vue 3+UnoCS
Interactive Product Demo
Claude Code skill that builds animated landing-page product demos from live DOM/CSS instead of video or GIF —
CSS Animation Skill
A Claude Code skill that generates self-contained HTML/CSS animations of app features for walkthroughs, demos,