WordPress Block Theme Converter

WordPress Block Theme Converter Skill

A Claude Code plugin (and standalone skill) for converting any HTML/CSS/JavaScript project into a production-ready WordPress Block Theme (Full Site Editing).

Author: Md Siddiqur Rahman Version: 2.0.0 License: MIT

---

What This Skill Does

Converts static HTML/CSS/JavaScript projects into complete, production-ready WordPress block themes that are:

• ✅ Compatible with WordPress 6.5+
• ✅ Full Site Editing (FSE) ready
• ✅ Accessible (WCAG 2.1 AA)
• ✅ Performance-optimized (Core Web Vitals)
• ✅ Translation-ready (i18n)
• ✅ WooCommerce-compatible (optional)
• ✅ WordPress.org Theme Directory submission-ready
• ✅ CI/CD pipeline ready (GitHub Actions)
• ✅ E2E tested (Playwright)

Custom Slash Commands

Command	Purpose
/convert-to-wp-theme	Full conversion of HTML/CSS/JS project to complete block theme
/scaffold-wp-theme	Create empty block theme scaffold (no source needed)
/wp-pattern	Convert single HTML section into a registered block pattern
/wp-theme-json	Generate theme.json from CSS custom properties / design tokens
/wp-template	Convert single HTML page into FSE template
/wp-block	Scaffold a custom block (block.json, edit.js, save.js/render.php, CSS)
/wp-migrate	Migrate existing WP content (Classic Editor, ACF, widgets, CPTs, shortcodes) to block theme
/wp-plugin-theme	Declare plugin dependencies and generate plugin-specific CSS / compatibility code
/wp-variation	Generate a style variation (styles/*.json) — dark mode, color palette swap, font swap
/wp-classic-to-fse	Convert an existing WordPress classic theme (PHP templates) to FSE block theme
/wp-debug	Diagnose and fix FSE/block-theme failures — block validation errors, theme.json issues, patterns not showing, DB template overrides, PHP warnings, and more

Installation

Option 1: Claude Code plugin (recommended)

This repository is also a Claude Code plugin marketplace. Install it directly from GitHub:

# Run these inside Claude Code:
/plugin marketplace add siddik-web/wp-block-theme-converter
/plugin install wp-block-theme-converter@siddik-web

Installing the plugin registers everything at once:

• All 11 slash commands (/convert-to-wp-theme, /wp-debug, …)
• The wp-block-theme-converter skill (auto-triggers on WordPress requests)
• The wp-theme-reviewer agent for auditing generated themes
• A non-blocking theme.json validation hook that runs after edits

Manage or disable it any time with /plugin.

Option 2: Claude Code skill (manual)

1. Download or clone this repository

2. Place the folder in your Claude Code skills directory:

   ~/.claude/skills/wp-block-theme-converter/
   

3. Restart Claude Code or run claude reload

4. Verify: type any of the slash commands listed above

Option 3: Claude.ai (Project Skills)

1. Open a Claude.ai Project
2. Project settings → Skills → Upload Skill
3. Upload wp-block-theme-converter.skill
4. The skill will be available in all conversations within that project

Option 4: Manual (Cowork / Other Environments)

Place the wp-block-theme-converter/ folder in your skills directory. Path varies by environment:

• Cowork: ~/skills/
• Custom: Configure via CLAUDE_SKILLS_DIR environment variable

Usage

Basic Workflow

1. Open a conversation with Claude (Code, Desktop, or Web)
2. Invoke a slash command OR describe your task in natural language
3. Provide your source HTML/CSS/JS (paste or attach files)
4. Claude generates the complete theme following the 10-phase methodology
5. Download/copy the files and install in WordPress

Example: Quick Landing Page

/convert-to-wp-theme

I have a 3-page landing site for "Acme Co".
Use Vite 6, no WooCommerce.

[paste HTML/CSS/JS]

Example: WooCommerce Theme

/convert-to-wp-theme

Convert my Northaven Co. eCommerce design system to a WooCommerce block theme.
Include all six aesthetics as style variations.

[attach HTML files]

Example: Pattern Only

/wp-pattern

Convert this hero section into a WP block pattern:

<section class="hero">
  <h1>Welcome</h1>
  <p>Subheading</p>
  <a href="#" class="btn">CTA</a>
</section>

Example: Custom Block

/wp-block

Scaffold a "Testimonial Slider" custom block with server-side rendering,
an edit.js with InspectorControls, and per-block CSS.

Example: Classic Theme Migration

/wp-classic-to-fse

Convert my existing classic PHP theme to a full FSE block theme.
The theme uses a custom page builder and ACF fields.

Plugin Structure