# wp-patterns

Creates and updates WordPress block patterns, then checks registration and markup. Useful for templates, starter pages, and Query Loop layouts.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 2200 installs · ★ 2298
- Author: WordPress
- License: LicenseRef-Unknown · policy=link-only · description only; the file stays with the author
- Source: https://github.com/WordPress/agent-skills/tree/HEAD/skills/wp-patterns/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/wp-patterns

## What it 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.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-patterns -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/wp-patterns/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/wp-patterns/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-patterns -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/wp-patterns/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-patterns -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/wp-patterns/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install WordPress/agent-skills wp-patterns
```

2. **Manually: put the files in place**
- File: `.github/skills/wp-patterns/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-patterns -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/WordPress/agent-skills --path skills/wp-patterns
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/wp-patterns/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-patterns -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/WordPress/agent-skills/tree/HEAD/skills/wp-patterns/SKILL.md

## When to use it
- 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
- 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-patterns` Query 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-mount` and fix block validation errors.

## Similar
- [wordpress-pro](https://affpapa.org/en/nevibecode/skills/wordpress-pro.md) — skill · 9700 installs
- [wordpress-advanced-architecture](https://affpapa.org/en/nevibecode/skills/wordpress-advanced-architecture.md) — skill · 441 installs
- [wordpress-elementor](https://affpapa.org/en/nevibecode/skills/wordpress-elementor.md) — skill · 2900 installs
- [wordpress-theme-to-emdash](https://affpapa.org/en/nevibecode/skills/wordpress-theme-to-emdash.md) — skill · 691 installs
- [wordpress-setup](https://affpapa.org/en/nevibecode/skills/wordpress-setup.md) — skill · 1500 installs
- [woocommerce-code-review](https://affpapa.org/en/nevibecode/skills/woocommerce-code-review.md) — skill · 1800 installs

From the same set: [wordpress/agent-skills](https://affpapa.org/en/nevibecode/by/wordpress/agent-skills.md) — 19 cards

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md