wp-interactivity-api — Claude Code skill: what it does & setup
Guides AI agents through WordPress Interactivity API implementation and debugging. Helps configure directives, connect script modules, and eliminate hydration mismatches.
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-codeWhat wp-interactivity-api 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.
What it helps with
- align server-rendered HTML with client stores using
wp_interactivity_state - troubleshoot unresponsive
data-wp-ondirectives and hydration mismatches - declare
viewScriptModuleand interactivity support insideblock.json - handle repeated directives on a single element with the
---syntax
Example prompts for the agent
- Why are my
data-wp-on--clickdirectives ignored after the block loads? - Write the PHP logic to pre-render derived state for my interactive block.
- Verify whether
block.jsonproperly registers the view script module.
How to install wp-interactivity-api
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-code2Manually: put the files in place
~/.claude/skills/wp-interactivity-api/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/wp-interactivity-api/
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a codex2Manually: put the files in place
.agents/skills/wp-interactivity-api/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a cursor2Manually: put the files in place
.cursor/skills/wp-interactivity-api/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install WordPress/agent-skills wp-interactivity-api2Manually: put the files in place
.github/skills/wp-interactivity-api/SKILL.md1Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -a gemini-cli2Platform CLI
gemini skills install https://github.com/WordPress/agent-skills --path skills/wp-interactivity-apiManually: put the files in place
.devin/skills/wp-interactivity-api/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add WordPress/agent-skills --skill wp-interactivity-api -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-interactivity-api
How do I install wp-interactivity-api in Claude Code?
Run npx skills add WordPress/agent-skills --skill wp-interactivity-api -a claude-code in your terminal. This downloads and links the skill to your agent configuration.
What does wp-interactivity-api do?
It provides workflow guidelines for building and debugging WordPress Interactivity API directives, server-side state generation, and block module scripts.
What environment requirements does this skill expect?
The setup targets WordPress 7.0+ with PHP 7.4.0+, running in an environment with Node.js and Bash. Some advanced triage steps also need WP-CLI.
