Works with the AI Agents you already use

    Claude CodeClaude CodeCursorCursorCodex CLICodex CLIMuseMuseDotsDots+21 more

    WordPress FSE Theme Builder

    1

    Professional WordPress Theme Architecture Transform brand briefs into production-ready WordPress Full Site Editing (FSE) block themes.

    $12.99

    Secure checkout via Stripe

    Money-back guarantee

    Converts to your local currency at checkout

    Security scanned
    WordPress FSE Theme Builder

    WordPress FSE Theme Builder

    Example session with this skill installed

    Review my bakery block theme's theme.json. It's version 2, the palette is cream #FFF8EE, brown #5A3A22 and orange #F28C28 (used for link text), font sizes are fixed px with no fluid settings, defaultPalette is still on, contentSize is 720px, and Google Fonts are enqueued from functions.php. style.css only has the theme header.

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

    Mode: REVIEW. Solid layout base, but the link color fails contrast and the token setup is outdated.

    #DimensionFindingScoreFix
    1Token architectureVersion 2, core palette still exposed2/5"version": 3, defaultPalette: false
    2ContrastOrange links on cream 2.33:1 (fail). Brown on cream 9.65:1 (pass)2/5Links to #A85400 (5.06:1)
    3Fluid typeFixed px, no fluid1/5rem sizes with min/max, body 1rem
    4AccessibilityNo :focus-visible rule in style.css2/5Add a visible focus outline
    5PerformanceRemote fonts enqueued; layout set3/5Self-host via fontFace, font-display: swap

    Total: 10/25. Verdict: Rebuild advised. Most fixes live in theme.json, so this is a token rewrite, not new templates.

    Top 3 fixes

    1. Add an orange-ink slug #A85400 for link text. Keep #F28C28 for decoration only.
    2. Move to version 3 and disable the core defaults you replace.
    3. Convert sizes to a fluid scale, for example h1 "fluid": {"min": "2.2rem", "max": "3.4rem"}.
    "elements": {
  "link": { "color": { "text": "var(--wp--preset--color--orange-ink)" } }
}

    Next steps

    • Re-check link hover and button colors against cream after the swap.
    • Paste the full theme.json and I will return the corrected file.

    style.css

    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

    Professional WordPress Theme Architecture

    Transform brand briefs into production-ready WordPress Full Site Editing (FSE) block themes. This skill functions as a senior theme architect, delivering a complete, runnable file structure including theme.json, templates, parts, and localized patterns. Instead of producing generic tutorials, it generates specific, paste-ready code optimized for modern WordPress standards (WP 6.4+).

    What it does

    • Design System Generation: Crafts a theme.json (v3) with WCAG-checked palettes, fluid typography scales, and spacing tokens.
    • Full Template Suite: Builds all core templates (index, single, page, archive, search, 404) and template parts (header, footer).
    • Custom Patterns: Creates brand-specific PHP patterns for heroes, feature grids, and CTAs.
    • Performance & Accessibility: Implements system-font stacks for Core Web Vitals and ensures keyboard focus-visible states.
    • Audit Mode: Reviews existing theme.json files against 25-point professional criteria for token architecture and accessibility.

    Why use this skill?

    Prompting an AI yourself often results in "classic" PHP code or incomplete JSON. This skill enforces strict FSE discipline: zero hardcoded hex values, proper settings-vs-styles split, and separation of presentation from business logic. It ensures your theme is accessible (WCAG 2.1 AA) and performance-optimized out of the box, saving hours of manual boilerplate setup.

    • Does not handle PHP business logic or custom post type registration.
    • Design outputs are CSS/JSON based, not image assets.
    • Limited to WordPress 6.4+ FSE standards.

    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 automates the creation of professional-grade WordPress block themes by generating the complete file structure, including a optimized theme.json, WCAG-compliant design systems, and block templates. It eliminates manual boilerplate setup and ensures your code adheres to modern Full Site Editing (FSE) standards.

    The skill is engineered for WordPress 6.4 and higher, utilizing Version 3 of the theme.json schema. It generates standard block-based file structures compatible with any modern WordPress installation and the Gutenberg editor.

    You receive specific, paste-ready code for a production-ready theme, including global settings (theme.json), core templates (index, single, archive), header/footer parts, and localized PHP patterns for brand-specific layouts.

    Accessibility is built-in; the skill generates WCAG 2.1 AA compliant color palettes, ensures proper keyboard focus-visible states in the JSON styles, and utilizes semantic HTML structures within block templates.

    Yes, the skill features an "Audit Mode" where you can provide an existing theme.json or template file for a 25-point professional review focused on token architecture, performance, and accessibility compliance.

    Connect your AI agent to Agensi through MCP, then ask it to use WordPress FSE Theme Builder on your task. Your agent loads the latest approved version each time. Paid skills require a purchase or active subscription. Skill files are not available for download; your licence does not allow you to save, copy or export any part of a skill.