Gutenberg Block Pattern Generator

What it does

This skill transforms your AI agent into a senior Gutenberg engineer capable of turning design descriptions or raw HTML into production-ready WordPress block patterns. It operates in two primary modes: CONVERT (migrating legacy HTML to native blocks) and GENERATE (creating new UI sections from scratch). Every output is engineered to be 'theme-aware,' meaning it uses slugs and design tokens instead of hardcoded hex values or pixel widths.

Why use this skill

Native WordPress development is notoriously finicky. Getting the block serialization format exactly right—matching JSON attributes in comments to CSS classes in the HTML—is prone to error. This skill automates that process, ensuring you never see a 'This block contains unexpected or invalid content' error again. It adheres to the theme.json design system, making your patterns future-proof: when you change a color in your theme settings, your patterns update automatically.

Supported features

• Full support for patterns/*.php auto-loading (WP 6.0+).
• Strict adherence to theme.json slugs for colors, spacing, and typography.
• Automatic mapping of HTML elements to canonical Gutenberg blocks (Cover, Group, Columns, etc.).
• Modern block support including the wp:details block (WP 6.4+).
• Professional header registration including slugs, categories, and viewport widths.