# wp-interactivity-api

Guides AI agents through WordPress Interactivity API implementation and debugging. Helps configure directives, connect script modules, and eliminate hydration mismatches.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 4200 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-interactivity-api/SKILL.md
- Updated: 2026-10-21
- HTML: https://affpapa.org/en/nevibecode/skills/wp-interactivity-api

## What it does

This skill instructs coding agents on how to construct and troubleshoot WordPress Interactivity API components. It checks block metadata for `viewScriptModule` references, inspects `data-wp-*` attributes, and validates store setups under `@wordpress/interactivity`. When scaffolding new blocks, it points toward `@wordpress/create-block-interactive-template`.

Visual flickers and broken clicks usually trace back to mismatched server markup. To keep initial loads clean, the skill replicates derived state in PHP using `wp_interactivity_state()` and injects local context via `wp_interactivity_data_wp_context()`. In WordPress 6.9, `data-wp-ignore` is deprecated, while elements with repeated directive types rely on the `---` separator.

The environment requires Node.js, Bash, WordPress 7.0+, and PHP 7.4.0+. Some workflows also call for WP-CLI. Without `supports.interactivity` set in `block.json`, server-side directive processing fails silently.

## Install

### Claude Code (native platform)

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

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

### Codex

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

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

### Cursor

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

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

### GitHub Copilot

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

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

### Gemini CLI

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

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

### Windsurf (Devin Desktop)

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

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add WordPress/agent-skills --skill wp-interactivity-api -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-interactivity-api/SKILL.md

## When to use it
- align server-rendered HTML with client stores using `wp_interactivity_state`
- troubleshoot unresponsive `data-wp-on` directives and hydration mismatches
- declare `viewScriptModule` and interactivity support inside `block.json`
- handle repeated directives on a single element with the `---` syntax

## Example prompts
- Why are my `data-wp-on--click` directives ignored after the block loads?
- Write the PHP logic to pre-render derived state for my interactive block.
- Verify whether `block.json` properly registers the view script module.

## Similar
- [wordpress-pro](https://affpapa.org/en/nevibecode/skills/wordpress-pro.md) — skill · 9700 installs
- [wordpress-master](https://affpapa.org/en/nevibecode/agents/wordpress-master.md) — subagent · 763 installs
- [woocommerce-code-review](https://affpapa.org/en/nevibecode/skills/woocommerce-code-review.md) — skill · 1800 installs
- [wordpress-plugin-to-emdash](https://affpapa.org/en/nevibecode/skills/wordpress-plugin-to-emdash.md) — skill · 688 installs
- [wp-guard](https://affpapa.org/en/nevibecode/skills/wp-guard.md) — skill · 2600 installs
- [wordpress](https://affpapa.org/en/nevibecode/skills/wordpress.md) — skill · 894 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