html-design-styles

chrismccoy-skills

A Claude Code plugin marketplace by Chris McCoy.

Quick start

In any Claude Code session, run:

/plugin marketplace add github:chrismccoy/skills
/plugin install html-to-wordpress-theme@chrismccoy-skills
/plugin install html-design-styles@chrismccoy-skills

The first command adds the marketplace; the next two install both plugins. Skip whichever plugin you don't need — each is independent. Full descriptions of what each one does are below.

Available plugins

html-to-wordpress-theme

Converts static HTML files into production-quality, installable WordPress themes.

/plugin install html-to-wordpress-theme@chrismccoy-skills

Ever had a beautiful static HTML design built with Tailwind CSS and wished you could just drop it into WordPress? That's exactly what this plugin solves.

The html-to-wordpress-theme skill takes your static Tailwind CSS HTML files and converts them into a fully installable, WordPress-compliant theme. No more manually rewriting markup into PHP templates or guessing how WordPress expects things to be structured — the skill handles it all for you through a guided, step-by-step workflow.

What makes it different from a quick copy-paste job? It actually cares about quality. Your converted theme comes out with proper accessibility baked in, secure code that follows WordPress coding standards, and a real Tailwind CSS build pipeline — no CDN links or shortcuts. There's even a 79-point checklist that runs before anything is delivered to make sure nothing slipped through the cracks.

Whether you're a designer who wants to bring a prototype to life in WordPress or a developer looking to speed up your theme-building process, this tool meets you where you are. It asks for your approval at every major step, so you're always in control — no surprises, no guesswork.

📋 Technical Overview

A production-grade AI instruction specification that converts static Tailwind CSS HTML files into fully installable, WordPress Theme Review Team-compliant themes.

Built around a phased workflow with mandatory approval gates, it enforces WordPress PHP coding standards, WCAG 2.1 AA accessibility, Tailwind CSS v3 CLI build pipelines, comprehensive escaping and security rules, and a 79-point self-audit with cited evidence requirements.

Designed to eliminate silent assumptions, prevent runaway generation, and handle real-world edge cases like poor source HTML quality, context window limits, and multi-session continuity.

✨ Features

• 🏗️ Phased workflow with mandatory approval gates — no code ships without user sign-off
• 🔒 Exhaustive escaping and sanitization rules for every output context
• ♿ WCAG 2.1 AA accessibility baked into every phase and template
• 🎨 Tailwind CSS v3 CLI build pipeline — zero CDN references, zero frameworks
• 🔍 79-point self-audit table requiring cited file-and-line evidence for every check
• 🚦 Graduated failure modes — abort, degraded, or proceed based on source quality
• 🌍 Full internationalization with enforced translator comments and text domains
• 🧩 Smart template abstraction rules for repeated markup patterns
• 👶 Child theme compatibility with overridable functions and removable hooks
• 📦 Automatic chunk planning with size estimation to prevent truncation
• 🔄 Session continuity protocol for multi-conversation conversions
• 📋 Pre-output self-check silently validates every file before delivery
• ⚖️ Decision tiebreaker hierarchy when multiple valid approaches exist
• 🛡️ Nonce enforcement and input sanitization for all custom forms
• 📱 Mobile-first responsive design with keyboard and touch target requirements
• 🏷️ Strict naming conventions derived from a single confirmed theme name
• 📝 Auto-generated README with setup instructions, testing checklist, and documentation
• ⚡ Image performance rules — lazy loading, fetch priority, and registered custom sizes
• 🧪 Testing checklist covering core functionality, accessibility, and build system
• 📐 Content width single source of truth synced across PHP, JSON, and Tailwind config

🔄 How it works

Hand it an index.html (and optionally a single.html, plus any other page mockups) and it walks you through a four-phase conversion:

1. Initialization — confirm theme name and defaults
2. Phase 1 — Analysis (1A critical, 1B extended) — HTML validation, source-quality grading, design-token extraction, file manifest, decision log
3. Phase 2 — Implementation — generates every theme file in user-approved chunks
4. Phase 3 — Self-Audit — a 79-item checklist with cited file-and-line evidence before delivery

You approve each phase before the next one starts, so nothing runs away from you.

🚀 How to use it

Two ways to invoke it:

Slash command (explicit):

/html-to-wordpress-theme              ← starts the workflow
/html-to-wordpress-theme Brewline     ← pre-fills the theme name

Natural language (auto-triggers):