Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, hydration, and directive behavior.
Installs just this skill. Get the whole plugin for auto-invocation.
ā” How it fires
How this skill gets triggered: by you, by Claude, or both.
Fires itselfClaude auto-loads it when your prompt matches the work.
You can call itInvoke it directly when you want it.
Slash command/wp-interactivity-api
šļø Context preview
The summary Claude sees to decide when to auto-load this skill.
Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wp_interactivity_*()) including performance, hydration, and directive behavior.
- **`data-wp-ignore` is deprecated** and will be removed in future versions. It broke context inheritance and caused issues with client-side navigation. Avoid using it.
- **Unique directive IDs**: Multiple directives of the same type can now exist on one element using the `---` separator (e.g., `data-wp-on--click---plugin-a="..."` and `data-wp-on--click---plugin-b="..."`).
- **New TypeScript types**: `AsyncAction<ReturnType>` and `TypeYield<T>` help with async action typing.
For quick directive reminders, see `references/directives-quickref.md`.
### 5) Build/tooling alignment
Verify the repo supports the required module build path:
- if it uses `@wordpress/scripts`, prefer its conventions.
- if it uses custom bundling, confirm module output is supported.
### 6) Debug common failure modes
If ānothing happensā on interaction:
- confirm the `viewScriptModule` is enqueued/loaded,
- confirm the DOM element has `data-wp-interactive`,
- confirm the store namespace matches the directiveās value,
- confirm there are no JS errors before hydration.
See `references/debugging.md`.
## Verification
- `wp-project-triage` indicates `signals.usesInteractivityApi: true` after your change (if applicable).
- Manual smoke test: directive triggers and state updates as expected.
- If tests exist: add/extend Playwright E2E around the interaction path.
## Failure modes / debugging
- Directives present but inert:
- view script not loading, wrong module entrypoint, or missing `data-wp-interactive`.
- Hydration mismatch / flicker:
- server markup differs from client expectations; simplify or align initial state.
- derived state not defined in PHP: use `wp_interactivity_state()` with closures.
- Initial content missing or wrong:
- `supports.interactivity` not set in `block.json` (for blocks).
- `wp_interactivity_process_directives()` not called (for themes/plugins).
- state/context not initialized in PHP before render.
- Layout shift on load:
- derived state like `state.hasItems` missing on server, causing `hidden` attribute to be absent.
- Performance regressions:
- overly broad interactive roots; scope interactivity to smaller subtrees.
- Client-side navigation issues (WordPress 6.9):
- `getServerState()` and `getServerContext()` now reset between page transitionsāensure your code doesn't assume stale values persist.
- Router regions now support `attachTo` for rendering overlays (modals, pop-ups) dynamically.
## Escalation
- If repo build constraints are unclear, ask: "Is this using `@wordpress/scripts` or a custom bundler (webpack/vite)?"
