What is the WP block theme converter skill?
The WP block theme converter skill is a SKILL.md in siddik-web/wp-block-theme-converter, also packaged as a plugin with 11 slash commands. It converts HTML, CSS and JavaScript into a WordPress block theme for Full Site Editing through a 10 phase methodology, with theme.json schema v3.
It converts any HTML, CSS and JavaScript project into a production ready WordPress block theme for Full Site Editing. It ships as a plugin and as a standalone skill that auto triggers on WordPress requests.
The output targets WordPress 6.5 or newer, theme.json schema v3, block patterns, translation readiness and WCAG 2.1 AA accessibility. WooCommerce compatibility is optional and is not added unless you ask for it.
Slash commands
/convert-to-wp-themeconverts a full HTML, CSS and JS project to a complete block theme./scaffold-wp-themecreates an empty block theme scaffold with no source needed./wp-patternconverts a single HTML section into a registered block pattern./wp-theme-jsongenerates theme.json from CSS custom properties or design tokens./wp-templateconverts a single HTML page into an FSE template./wp-blockscaffolds a custom block with block.json, edit.js, save.js or render.php, and CSS./wp-migratemigrates existing WordPress content to a block theme./wp-plugin-themedeclares plugin dependencies and generates plugin specific CSS./wp-variationgenerates a style variation such as dark mode, a palette swap or a font swap./wp-classic-to-fseconverts a classic PHP theme to a block theme./wp-debugdiagnoses and fixes block theme failures.
The 10 phase methodology
Every conversion follows ten phases: audit and extract, theme.json, templates and parts, block patterns, block styles and variations, JavaScript integration, functions.php, accessibility and performance, i18n, and README and docs.
Large projects split delivery across 3 turns when the source has 10 or more HTML pages, WooCommerce or multiple style variations. Turn 1 is the foundation, turn 2 is patterns and styles, and turn 3 is JavaScript, assets and docs.
Verification and quality rules
Step 5 runs node scripts/doctor.mjs <theme-dir> and loops until it exits 0. It runs four checks: theme.json validation, block markup lint, pattern registration and i18n coverage. No npm install is required.
- No inline
styleattributes, no<style>or<script>tags in templates, and no hardcoded colors or spacing in CSS. - theme.json is the single source of truth for design tokens.
- Strings are translation ready, and CSS uses logical properties for RTL.
- Interactive patterns use the Interactivity API, with per block CSS loaded through
wp_enqueue_block_style().
Behavioral principles
Four principles govern generation: think before coding, simplicity first, surgical changes and goal driven execution. It states assumptions and shows a conversion plan with success criteria before it generates files.
Who the WP block theme converter skill is for
Best for
- Converting a static HTML, CSS and JavaScript landing page or portfolio into a block theme.
- Generating theme.json from CSS custom properties or design tokens.
- Turning a single HTML section into a registered block pattern.
- Converting a classic PHP theme to a block theme with
/wp-classic-to-fse. - Moving off Elementor, Divi, WPBakery or Beaver Builder with
/wp-migrate.
Not for
- Running JavaScript against the full Figma API through three tools and a plugin bridge in Figma Desktop, which the figma-pilot MCP covers.
- Producing mockups, prototypes, wireframes and slide decks as plain HTML, which the baoyu-design skill covers.
- Teaching a three tier token hierarchy, CSS custom property theming and component architecture, which the design-system-patterns skill covers.
How to install WP Block Theme Converter Skill: HTML to Block Theme
/plugin marketplace add siddik-web/wp-block-theme-converter
/plugin install wp-block-theme-converter@siddik-web~/.claude/skills/wp-block-theme-converter/, then restart Claude Code or run claude reload.Add the marketplace
Run
/plugin marketplace add siddik-web/wp-block-theme-converterinside Claude Code.Install the plugin
Run
/plugin install wp-block-theme-converter@siddik-web. It registers all 11 slash commands, the skill, thewp-theme-revieweragent and a non blockingtheme.jsonvalidation hook.Manage it
Manage or disable the plugin any time with
/plugin.Convert a project
Run
/convert-to-wp-theme, then paste or attach your HTML, CSS and JS.
Check that it loaded
Type any of the 11 slash commands, for example /scaffold-wp-theme. Expect the skill to state its assumptions before it generates any file.
Key features
- Full theme conversion
/convert-to-wp-themeconverts an HTML, CSS and JS project to a complete block theme, with templates, parts, patterns and theme.json. - theme.json from tokens
/wp-theme-jsongenerates a schema v3 theme.json from CSS custom properties or a design system. - Block patterns
/wp-patternconverts one HTML section into a registered block pattern. - FSE templates
/wp-templateconverts a single HTML page into a Full Site Editing template. - Style variations
/wp-variationgenerates a style variation instyles/*.json, such as dark mode, a color palette swap or a font swap. - Classic theme conversion
/wp-classic-to-fseconverts an existing classic PHP theme to a block theme, including ACF fields and custom post types. - Content migration
/wp-migratemoves Classic Editor content, ACF, widgets, CPTs and shortcodes to a block theme, and detects the active page builder. - Custom blocks
/wp-blockscaffolds block.json, edit.js, save.js or render.php, and CSS for a custom block. - Doctor check
node scripts/doctor.mjs path/to/your-themeruns all four quality checks and exits 0 only if everything passes. - Debug command
/wp-debugdiagnoses block validation errors, theme.json issues, patterns not showing, database template overrides and PHP warnings.
Frequently asked questions
What is the WP block theme converter skill?
It is a SKILL.md in siddik-web/wp-block-theme-converter, also packaged as a plugin, that lets your AI coding agent convert an HTML, CSS and JavaScript project into a production ready WordPress block theme for Full Site Editing, using theme.json schema v3, templates, block patterns and a 10 phase methodology.
How do I install the WP block theme converter skill?
Inside Claude Code run /plugin marketplace add siddik-web/wp-block-theme-converter, then /plugin install wp-block-theme-converter@siddik-web. The plugin registers all 11 slash commands, the skill, the wp-theme-reviewer agent for auditing generated themes and a non blocking theme.json validation hook that runs after edits. Manage or disable it any time with /plugin.
Which slash commands does it add?
Eleven: /convert-to-wp-theme, /scaffold-wp-theme, /wp-pattern, /wp-theme-json, /wp-template, /wp-block, /wp-migrate, /wp-plugin-theme, /wp-variation, /wp-classic-to-fse and /wp-debug. Each covers one task, from a full conversion of an HTML, CSS and JS project to a single block pattern, a style variation or a debugging session.
How does it check the theme it generates?
It runs node scripts/doctor.mjs on the theme directory and loops until it exits 0. The script runs four checks: theme.json validation, block markup lint, pattern registration and i18n coverage. It uses pure Node stdlib, so no npm install is required before running it.
Does it support WooCommerce themes?
Yes, as an option. It can build a WooCommerce compatible block theme when you ask, and it does not scaffold WooCommerce support when you do not mention eCommerce. For a WooCommerce theme, make sure WooCommerce will be installed on the target site.
How does it handle large projects?
It splits delivery across 3 turns when the source has 10 or more HTML pages, WooCommerce or multiple style variations. Turn 1 delivers theme.json, templates, parts and functions.php, turn 2 delivers patterns, block styles and style variations, and turn 3 delivers JavaScript, assets and docs.
Can it migrate a site off a page builder?
Use /wp-migrate. It detects an active page builder, including Elementor, Divi, WPBakery and Beaver Builder, and applies a per builder strategy. It also migrates Classic Editor content, ACF fields, widgets, custom post types and shortcodes to a block theme. Attach the ACF field group export as JSON when ACF fields need to come across.
What does it do before it generates files?
It states its assumptions, what it is not doing and any ambiguities, then produces a conversion plan with success criteria. It asks for your confirmation before generating files, unless you say to just build it. It ends with verification steps and a decisions made section.