More screenshots

    Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    Gutenberg Block Pattern Generator

    1

    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.

    $8.99

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    Gutenberg Block Pattern Generator

    Gutenberg Block Pattern Generator

    Example session with this skill installed

    Convert this hero section HTML to a theme-aware Gutenberg pattern: Welcome
    • Read your context and instructions
    • Compiled the gutenberg block pattern

    Mode: CONVERT

    <!-- wp:group {"backgroundColor":"primary","layout":{"type":"constrained"},"style":{"spacing":{"padding":{"top":"var:preset|spacing|50","bottom":"var:preset|spacing|50"}}}} -->
<div class="wp-block-group has-primary-background-color has-background" ...>...</div>
<!-- /wp:group -->

    Connects securely to your tools. The creator never sees your data.

    About this skill

    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.

    • Does not create custom React blocks (block.json).
    • Limited support for complex CSS animations or heavy third party script dependencies.
    • No support for PHP logic inside pattern files.

    How to use

    1. 1

      Connect your agent to the Agensi MCP

      Copy the prompt and paste it into Claude, ChatGPT, Cursor or any agent that supports MCP. It sets up the connection for you. Manual setup

    2. 2

      Sign in to Agensi

      Your agent shows a sign-in link. Sign in and click Allow.

    3. 3

      Ask for what you need

      Your agent loads this skill and uses it on your task. It always asks before any payment.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill goes through the trust checks below.

    Security scanned

    Checked by our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Money-back guarantee

    Doesn't do what its page promises? You get your money back.

    Trust & safety

    Security scan

    Security scan passed 4 months ago

    Permissions

    No special permissions declared or detected

    Listed4 months ago

    What's inside

    Frequently Asked Questions

    This skill takes raw HTML or text descriptions and converts them into valid Gutenberg block markup, ensuring it follows WordPress's strict comment-based serialization to prevent "Unexpected Content" errors.

    Unlike generic code generators, this skill strictly uses theme.json slugs and design tokens for colors and spacing, ensuring your patterns automatically inherit your specific theme's styles.

    Yes, the output includes professional PHP header registration, allowing you to drop the code directly into your theme's /patterns/ folder for automatic registration and UI categorization.

    The skill supports the latest core blocks up to WordPress 6.4+, including advanced components like the Details block, Query loops, and Group-based layouts.

    This skill is designed to work with any large language model (LLM) capable of code generation, acting as a specialized engineering layer for your preferred AI agent.