Gutenberg Block Pattern Generator

The skill operates in three named modes. CONVERT takes any legacy HTML section — a div-soup hero, a table-based feature grid, an inline-styled CTA — and returns complete, valid Gutenberg block serialization plus a ready-to-register patterns/.php file. GENERATE takes a plain-English section description and produces the same. HARDEN audits an existing pattern file and returns a scored findings table (Impact² / Effort) with before/after fixes for every problem it finds. In every mode, colors resolve to theme palette slugs, spacing resolves to var:preset|spacing tokens, and font sizes resolve to named scale slugs — never a hardcoded hex, never a px value.

A typical CONVERT input: a 60-line HTML section with a background-color:#1E3A5F inline style on the wrapper, three child divs styled as columns, and an anchor tag with class='btn'. The skill maps the wrapper to a wp:cover block with overlayColor set to the primary palette slug, converts the column divs to wp:columns with wp:column children, and turns the anchor into a wp:button block with backgroundColor and textColor pointing to theme slugs. The complete patterns/.php file is returned in one response, with the registration header, correct block nesting, and matching open/close serialization comments.

A short excerpt of what the output looks like: <!– wp:cover {"overlayColor":"primary","dimRatio":50,"minHeight":480,"layout":{"type":"constrained"}} –> <div class="wp-block-cover"> <!– wp:heading {"level":1,"textColor":"background","fontSize":"xx-large"} –> <h1 class="wp-block-heading has-background-color has-text-color has-xx-large-font-size">HEADING_TEXT</h1> <!– /wp:heading –> <!– wp:buttons {"layout":{"type":"flex","justifyContent":"center"}} –> <div class="wp-block-buttons"> <!– wp:button {"backgroundColor":"accent","textColor":"background"} –> … <!– /wp:buttons –> <!– /wp:cover –>