Works with the AI tools you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIGitHub CopilotGitHub CopilotGemini CLIGemini CLI+20 more

    WordPress Block Theme Playbook

    1

    Make WordPress block themes behave: design tokens, templates, parts, patterns, and style variations that match between the Site Editor and the front end.

    Free

    0 installsSecurity scanned
    WordPress Block Theme Playbook

    WordPress Block Theme Playbook

    Example session with this skill installed

    I'm working on a WordPress block theme at wp-content/themes/nova-block. My theme.json color palette and font sizes don't show up in the Site Editor at all, the header template part referenced from templates/front-page.html disappears in the editor preview, and a new pattern I added in patterns/callout.php never appears in the inserter. Can you audit the theme folder, validate the JSON and pattern files, check whether a saved Site Editor customization is masking my defaults, and fix the files so the editor and the front end match? Keep every edit inside the nova-block theme root.

    • Read your context and instructions
    • Compiled the wordpress block theme
    • Generated the UI component

    Summary

    Audited wp-content/themes/nova-block: theme.json now parses and drives every palette value, the header part slug resolves, and the Midnight variation appears in the Styles UI. Root cause of the "missing" colors was a saved Site Editor customization masking theme defaults, not the file edit.

    ItemBeforeAfter
    theme.jsontrailing comma, all settings ignoredvalid JSON v3, tokens load
    Colors6 hard-coded hex values in templatesink/accent/surface/muted slugs
    parts/header.htmlnested in parts/global/, undetectedsits directly in parts/, preview fixed
    patterns/callout.phpPHP fatal blocked all pattern registrationphp -l clean, shows in inserter
    styles/midnight.jsonabsent from Styles UIvalid and selectable

    Next steps

    • Reset saved customizations on the dev site to confirm precedence
    • Add contentSize/wideSize under settings.layout before building page templates
    • Run wp cache flush, then compare editor CSS variables with the front end

    wordpress-block-theme-playbook.tsx

    TSX · React component

    Generated

    Example file from a real run - the skill writes it into your workspace.

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

    About this skill

    Modern WordPress development requires coordinating static files with a dynamic database-driven editor. When theme.json settings don't reflect on the front end or templates appear broken in the Site Editor, the cause is usually a specific breakdown in file structure or style precedence. This skill provides the logic and commands to build, audit, and fix block themes from the file system up.

    What it does

    • Standardize theme.json by defining design tokens, layout widths, and per-block style overrides.
    • Compose block templates using HTML files and block comments to define site-wide layouts.
    • Manage template parts to create reusable regions like headers, footers, and sidebars.
    • Register patterns via PHP files to provide curated content snippets in the block inserter.
    • Implement style variations for quick-swapping global palettes and typography.
    • Debug style precedence to identify why file-based changes are being masked by editor customizations.

    How it works

    1. Identify the active theme using WP-CLI or file system inspection to ensure edits target the correct root.
    2. Validate syntax using jq or Node.js to prevent malformed JSON from breaking the Site Editor.
    3. Map the hierarchy by confirming slugs in templates match the files in the parts/ and patterns/ directories.
    4. Compare environments by auditing the front-end CSS variables against the current Site Editor state.

    Frameworks & tools

    WordPress Block Editor (Gutenberg), theme.json (v2/v3), WP-CLI, and standard block theme file structures.

    Why this beats prompting it yourself

    Generic prompts often produce invalid block markup or ignore the complex precedence between files and the database. This skill enforces strict directory structures and validated JSON syntax required by the WordPress core engine.

    Use cases

    • Migrating a design system into theme.json presets and tokens.
    • Creating a child theme that overrides specific parent templates without duplication.
    • Troubleshooting why a new site header isn't appearing on the live front end.
    • Scaffolding a custom pattern library for client handoff.

    Known limitations

    Does not support classic PHP template hierarchy or legacy widget areas. Excludes dynamic block development and complex build tooling configurations.

    How to install

    Works the same in every agent - Claude, Cursor, Codex, Copilot and 20+ more.

    ~30 seconds
    1. 1

      Download the ZIP

      Free skills download straight away. Paid skills unlock right after purchase.

    2. 2

      Unzip into your skills folder

      Every agent reads skills from one folder on your machine. Drop the unzipped folder in there.

    3. 3

      Ask your agent to use it

      Restart the agent if it was already running. It picks the skill up automatically - no config needed.

    Skills folder by agent

    Click the path to copy it. Create the folder if it does not exist yet.

    Reviews

    No reviews yet

    Be one of the first to try it. Every listed skill passes our trust checks below.

    Security scanned

    Passed our 8-point scan before listing

    Fresh listing

    Recently published to Agensi

    Free forever

    No account required to browse

    Trust & safety

    Security scanned

    Verified clean 1 day ago

    • Free to download with an account

    Listed1 day ago

    What's inside

    Frequently Asked Questions