Wp Block Theme Converter

Convert HTML/CSS/JavaScript projects into production-ready WordPress block themes (Full Site Editing) with theme.json v3, FSE templates and parts, block patterns, the Interactivity API, Block Bindings, and optional WooCommerce support. Use whenever the user wants to convert, port, or rebuild a static site, landing page, or classic WordPress theme as a block, FSE, or Gutenberg theme; scaffold a block theme from scratch; generate theme.json from design tokens; turn HTML into block patterns or templates; build custom blocks or style variations; migrate content or page builders (Elementor, Divi) t

49 stars 16 forksFrontend & Design

Install

skills CLI (Claude Code, Cursor, Codex and more)

npx skills add siddik-web/wp-block-theme-converter --skill wp-block-theme-converter

Manual install

git clone --depth 1 https://github.com/siddik-web/wp-block-theme-converter.git /tmp/wp-block-theme-converter
mkdir -p ~/.claude/skills
cp -r /tmp/wp-block-theme-converter/. ~/.claude/skills/wp-block-theme-converter

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# WordPress Block Theme Converter

Convert HTML/CSS/JavaScript projects into production-ready WordPress Block Themes with Full Site Editing (FSE) support, theme.json schema v3, block patterns, templates, and WooCommerce compatibility.

---

## Behavioral Principles

**These four principles govern every decision made during theme generation. They are non-negotiable and override any temptation to "just get it done."**

**Tradeoff:** These principles bias toward caution over speed. For trivial requests (a single-block edit, a one-line CSS fix), use judgment — not every task needs the full rigor.

### 1. Think Before Coding

**Don't assume. Don't hide confusion. Surface tradeoffs.**

Before generating ANY file:

- **State assumptions explicitly.** If the user didn't specify a color palette, font stack, or layout strategy — say so. Don't silently invent design decisions.
- **If multiple interpretations exist, present them.** "Your hero section could be a `core/cover` block (parallax-capable) or a `core/group` with background image (simpler). Which do you prefer?"
- **Push back when warranted.** If the user asks for something that will create a poor theme (e.g., inline JS in patterns, Alpine.js for a simple toggle), say so and suggest the WordPress-native alternative.
- **If something is unclear, stop.** Name what's confusing. Ask. Don't generate 50 files based on a guess.

### 2. Simplicity First

**Minimum code that solves the problem. Nothing speculative.**

Read the full skill on GitHub

Details

Skill name: wp-block-theme-converter
Repository: siddik-web/wp-block-theme-converter
License: MIT
Repo updated: 23 October 2026

FAQ

What does the Wp Block Theme Converter skill do?

How do I install the Wp Block Theme Converter skill?

skills CLI (Claude Code, Cursor, Codex and more): npx skills add siddik-web/wp-block-theme-converter --skill wp-block-theme-converter. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is Wp Block Theme Converter popular?

It lives in siddik-web/wp-block-theme-converter, which has 49 GitHub stars and 16 forks.

Related skills

Kunpeng Skill

hufeng173/kunpeng-skill

跨智能体、本地优先的多源蒸馏与迁移工作流。用于收录或蒸馏代码仓库、网站、App、UI/交互、图片与品牌、视频、音频、文章、文档、书籍、课程及混合素材，形成带证据的可迁移画像、再生成规范、产品方案和本地方法库；也用于把画像应用到新主题或新 idea 并验收结果。

Frontend & Design

UX Wise Agent

marvinrez/ux-wise-agent

Activate for any UX, product design, or interaction design reasoning task: UX critique, design decisions, interface pattern recommendations, accessibility reviews, research methodology, stakeholder communication, AI/UX trade-offs, or deceptive pattern identification. Trigger on requests like "review this design", "which interaction pattern should I use here", "challenge my thinking on this flow", "design a usability test", "which of these two principles wins", or "what edge cases am I missing". It works at senior practitioner level: it interrogates premises, holds positions under pushback, and

Frontend & Design11

Lecture Deck

RinDig/lecture-deck-skill

Build a high-quality animated HTML lecture or workshop deck from a storyboard, in any theme. Use whenever someone asks for a slide deck, session deck, workshop slides, lecture screens, a run-of-show deck, or speaker notes for a talk, especially one delivered live (in a room or on Zoom) with breakouts, share-screen moments and handoffs. Produces one self-contained HTML file with keyboard navigation, speaker notes, overview, print, copy-to-clipboard prompts and a mode strip on every screen, plus PNG renders for checking. Ships with three themes and a kit for diagrams, animation, a recurring cast

Frontend & Design10

Poster Style Transfer

jiemianduan/poster-style-transfer

Analyze an uploaded or local reference poster, extract its reusable design system, and transpose that system to an original poster with a new theme, title, subtitle, or campaign copy.

Frontend & Design

Qiaomu Icon Generator

joeseesun/qiaomu-icon-generator

Generate multiple app, favicon, or website icon candidates with either the local QM Icon Studio CLI or Codex built-in image generation with reference icons, then present a contact sheet so the user can choose. Use when building websites or apps and needing reusable icon options.

Frontend & Design

Audit Frontend Design

memi-design/memi

Use when reviewing or changing a React, Next.js, Tailwind, or shadcn interface and you need evidence-backed findings for accessibility, hierarchy, tokens, states, and responsive design before editing code.

Frontend & DesignIn 1 list

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.