← ClaudeAtlas

wp-interactivity-apilisted

Use when building or debugging WordPress Interactivity API features (data-wp-* directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration) including performance, hydration, and directive behavior.
aiskillstore/marketplace · ★ 329 · API & Backend · score 82
Install: claude install-skill aiskillstore/marketplace
# WP Interactivity API ## When to use Use this skill when the user mentions: - Interactivity API, `@wordpress/interactivity`, - `data-wp-interactive`, `data-wp-on--*`, `data-wp-bind--*`, `data-wp-context`, - block `viewScriptModule` / module-based view scripts, - hydration issues or “directives don’t fire”. ## Inputs required - Repo root + triage output (`wp-project-triage`). - Which block/theme/plugin surfaces are affected (frontend, editor, both). - Any constraints: WP version, whether modules are supported in the build. ## Procedure ### 1) Detect existing usage + integration style Search for: - `data-wp-interactive` - `@wordpress/interactivity` - `viewScriptModule` Decide: - Is this a block providing interactivity via `block.json` view script module? - Is this theme-level interactivity? - Is this plugin-side “enhance existing markup” usage? If you’re creating a new interactive block (not just debugging), prefer the official scaffold template: - `@wordpress/create-block-interactive-template` (via `@wordpress/create-block`) ### 2) Identify the store(s) Locate store definitions and confirm: - state shape, - actions (mutations), - callbacks/event handlers used by `data-wp-on--*`. ### 3) Implement or change directives safely When touching markup directives: - keep directive usage minimal and scoped, - prefer stable data attributes that map clearly to store state, - ensure server-rendered markup + client hydration align. **WordPress 6.9 changes:** - **`data-