wp-patterns — Claude Code skill: what it does, how to install
Creates and updates WordPress block patterns, then checks registration and markup. Useful for templates, starter pages, and Query Loop layouts.
npx skills add WordPress/agent-skills --skill wp-patterns -a claude-codeWhat wp-patterns does
This skill helps create and update WordPress block patterns for sections, starter pages, templates, template parts, and Query Loop layouts. It can review pattern registration, categories, inserter visibility, accessibility, i18n, and escaping. For behavior, it points to native blocks instead of adding JavaScript or arbitrary HTML.
The workflow locates the project and theme, plans the block tree, builds a PHP file with block markup, and runs design and technical checks. Local images use get_theme_file_uri() with esc_url(), while visual choices are expressed through block attributes and preset values. Verification can run in WordPress Playground, wp-env, or the WordPress Code Editor.
The practical catch is that the agent environment needs bash and node, while some workflows also use WP-CLI. The skill targets WordPress 7.0+ and PHP 7.4.0+. A project also needs its theme or plugin root, slug, text domain, and available theme.json presets before pattern work begins.
What it helps with
- create a block pattern for a starter page
- update a template or template part
- review pattern registration and block nesting
- set categories, accessibility, and i18n
- validate a Query Loop layout
Example prompts for the agent
- Create a starter-page pattern for the theme in this repository and first run
node skills/wp-project-triage/scripts/detect_wp_project.mjs. - Update the existing
wp-patternsQuery Loop pattern, keep already inserted content compatible, and review its block markup. - Test the new pattern in WordPress Playground with
npx @wp-playground/cli@latest server --auto-mountand fix block validation errors.
How to install wp-patterns
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-patterns -a claude-code2Manually: put the files in place
~/.claude/skills/wp-patterns/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/wp-patterns/
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-patterns -a codex2Manually: put the files in place
.agents/skills/wp-patterns/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-patterns -a cursor2Manually: put the files in place
.cursor/skills/wp-patterns/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install WordPress/agent-skills wp-patterns2Manually: put the files in place
.github/skills/wp-patterns/SKILL.md1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-patterns -a gemini-cli2Platform CLI
gemini skills install https://github.com/WordPress/agent-skills --path skills/wp-patternsManually: put the files in place
.devin/skills/wp-patterns/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-patterns -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about wp-patterns
How do I install wp-patterns in Claude Code?
Run npx skills add WordPress/agent-skills --skill wp-patterns -a claude-code, then run npx skills add WordPress/agent-skills --skill wp-patterns -a claude-code again. Check ~/.claude/skills/wp-patterns/SKILL.md afterward.
What does wp-patterns do?
It creates and updates WordPress block patterns, including templates, template parts, starter pages, and Query Loop layouts. It also reviews registration, block markup, categories, accessibility, and i18n/escaping.
What does wp-patterns need before it can work?
Prepare the repository root, target theme or plugin, slugs, text domain, pattern type, and a way to verify the result. The agent setup uses bash and node, and some workflows require WP-CLI.
