Skip to main content
affpapa.org
RU EN
skill Claude Code CX Codex Cursor GitHub Copilot

wp-block-themes — Claude Code skill: what it does, how to install

Guides the agent through building WordPress block themes, editing theme.json, and organizing templates. Useful when styles fail to apply in the Site Editor.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓ 
npx skills add WordPress/agent-skills --skill wp-block-themes -a claude-code
Open on GitHub

What wp-block-themes does

This skill guides agents working on WordPress block themes. It detects active theme directories using detect_block_themes.mjs and helps structure theme.json without conflating UI controls with block-level styles. The workflow covers templates under templates/, template parts under parts/, and filesystem patterns.

Template parts must not sit inside nested subdirectories, or WordPress will fail to load them. User customizations saved in the database override theme files, which often makes file edits look completely ignored. Running the triage scripts requires Node.js and bash; the skill targets WordPress 7.0+ on PHP 7.4.0+, while specific operations require WP-CLI.

What it helps with

  • configure global settings and block styles in theme.json
  • troubleshoot style overrides between theme files and the database
  • organize HTML templates and template parts in correct folders
  • register theme patterns inside the patterns directory

Example prompts for the agent

  • Inspect theme.json and add spacing presets for our theme layout
  • Find out why the Site Editor ignores my latest block style changes
  • Create a new template part for the footer under parts/footer.html

How to install wp-block-themes

1Skills CLI (Vercel)

npx skills add WordPress/agent-skills --skill wp-block-themes -a claude-code

2Manually: put the files in place

~/.claude/skills/wp-block-themes/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/wp-block-themes/

From the same set8

The whole set →
wp-plugin-development WordPress This skill guides WordPress plugin work, from project structure and hooks to admin settings, security checks and release packaging. Claude Code CX Codex Cursor +1 7,900installs wp-performance WordPress Backend profiling skill for optimizing WordPress sites using WP-CLI, REST headers, and diagnostic scripts without browser access. Claude Code CX Codex Cursor +1 6,100installs wp-block-development WordPress A WordPress skill for Claude Code, Codex and Cursor that walks an agent through Gutenberg block work, from block.json metadata down to deprecations. Claude Code CX Codex Cursor +1 5,500installs wordpress-router WordPress Identifies the structure of a WordPress codebase and directs the agent to the appropriate workflow. Useful before starting work on plugins, themes, or core checkouts. Claude Code CX Codex Cursor +1 5,500installs wp-wpcli-and-ops WordPress A skill for WordPress operations through wp: move domains, export the database, install plugins, inspect cron. Useful when the agent has to touch a live site, not just theme files. Claude Code CX Codex Cursor +1 5,400installs wp-phpstan WordPress Sets up PHPStan static analysis in WordPress plugins and themes, while managing baselines and WordPress-specific PHPDoc types. Claude Code CX Codex Cursor +1 4,600installs wpds WordPress Feeds WordPress Design System docs to your agent through an MCP server, so UI work lands on real components and tokens instead of guesses. Claude Code CX Codex Cursor +1 4,000installs

Similar

shopify-apps sickn33 Patterns for Shopify app development with Remix and React Router. Guides App Bridge setups, Polaris UI components, billing flows, and webhooks. Claude Code CX Codex Cursor +1 1,000installs web-typography wondelai This skill helps you select and configure typefaces for web projects: from choosing a font family to optimizing size, line height, and measure. Use it when you need readable typography or want to find a well-matched font pair. Claude Code CX Codex Cursor +1 9,200installs libraries-dev Jakubantalik Selects and integrates Libraries.dev React UI effects for AI interfaces, covering loaders, voice glows, animated borders, and bot avatars. Claude Code CX Codex Cursor +1 991installs godot-ui-control gamedev-skills A Claude Code skill that teaches the agent to lay out Godot 4.7 HUDs and menus with Control nodes: anchors, containers, themes and focus. Claude Code CX Codex Cursor +1 6,400installs solid vercel-labs Skill to render JSON-specs into reactive SolidJS components. Use it when building UI catalogs, wiring providers, or debugging Solid reactivity patterns. Claude Code CX Codex Cursor +1 1,100installs redux vercel-labs A Redux adapter for json-render: it points the renderer at a store slice instead of its own state. Useful when app state already lives in Redux. Claude Code CX Codex Cursor +1 1,100installs frontend-design official anthropics This skill guides intentional visual design for new interfaces and redesigns. Use it when a generic generated UI is not enough. Claude Code Claude.ai 1,025,790installs design-taste-frontend Leonxlnx This skill directs the design of public pages and work screens, then checks the result in a browser through screenshots. Use it when an interface feels generic or unfinished. Claude Code CX Codex Cursor +1 673,100installs

Questions about wp-block-themes

How to install wp-block-themes in Claude Code?

Run npx skills add WordPress/agent-skills --skill wp-block-themes -a claude-code in your terminal.

What does the wp-block-themes skill do?

It helps agents safely edit theme.json, configure templates, and add style variations. It also troubleshoots why styling updates fail to show up in the Site Editor.

What are the environment requirements for wp-block-themes?

The environment must have Node.js and bash for directory detection scripts. The skill targets WordPress 7.0+ with PHP 7.4.0+, and several tasks require WP-CLI.

See also

Project sponsors

Companies that keep this analytics open
Gold sponsor
Nutra.Club

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor