Build and debug WordPress Interactivity API features - data-wp-* directives, @wordpress/interactivity stores, server-side rendering with wp_interactivity_state(), and hydration fixes.
---
name: wp-interactivity-api
description: Use when building or debugging WordPress Interactivity API features - data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*() server APIs, hydration, and directive behavior. Targets WordPress 6.9+.
---
Wire up interactive WordPress frontends with correct server pre-rendering and clean hydration.
## Workflow
1. Detect existing usage by searching for `data-wp-interactive`, `@wordpress/interactivity`, and `viewScriptModule`; for new blocks use `@wordpress/create-block-interactive-template`.
2. Locate the store(s) and confirm state shape, actions, and event callbacks used by `data-wp-on--*`.
3. Pre-render on the server: set `supports.interactivity` in block.json (or call `wp_interactivity_process_directives()`), and seed state with `wp_interactivity_state()` / `wp_interactivity_data_wp_context()`, replicating derived state in PHP to avoid layout shift.
4. Keep directives minimal and scoped; note WP 6.9 changes (`data-wp-ignore` deprecated, unique directive IDs via `---`).
5. Debug inert directives: confirm the view module loads, the element has `data-wp-interactive`, and store namespaces match.
Full skill & source: https://github.com/WordPress/agent-skills/tree/aa735ea7111c7924ee988306bcef70439e17dec9/skills/wp-interactivity-api