wp-interactivity-api
Use when building or debugging WordPress Interactivity API features (data-wp- directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wpinteractivity()) including performance, hydration, and directive behavior.
- Installs
- 4.2K
- Last 24h
- +32
- Trending rank
- #4267
- Security
- Warn
Install
Works with every agent the skills CLI supports.
npx skills add https://github.com/wordpress/agent-skills --skill wp-interactivity-api- 01
Install
Run the command in your project. The CLI asks which agents to install for.
- 02
Describe the task
Ask your agent for something this skill covers. It loads wp-interactivity-api automatically when relevant.
- 03
Review the result
The agent follows the SKILL.md steps, scripts and references bundled with the skill.
Security audits
Independent scans of the skill's instructions and bundled files.
SKILL.md
The instructions your agent reads when the skill is triggered.
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/interactivityviewScriptModule
Decide:
- Is this a block providing interactivity via
block.jsonview 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) Server-side rendering (best practice)
Pre-render HTML on the server before outputting to ensure:
- Correct initial state in the HTML before JavaScript loads (no layout shift).
- SEO benefits and faster perceived load time.
- Seamless hydration when the client-side JavaScript takes over.
Enable server directive processing
For components using block.json, add supports.interactivity:
{
"supports": {
"interactivity": true
}
}
For themes/plugins without block.json, use wp_interactivity_process_directives() to process directives.
Initialize state/context in PHP
Use wp_interactivity_state() to define initial global state:
wp_interactivity_state( 'myPlugin', array(
'items' => array( 'Apple', 'Banana', 'Cherry' ),
'hasItems' => true,
));
For local context, use wp_interactivity_data_wp_context():
<?php
$context = array( 'isOpen' => false );
?>
<div <?php echo wp_interactivity_data_wp_context( $context ); ?>>
...
</div>
Define derived state in PHP
When derived state affects initial HTML rendering, replicate the logic in PHP:
wp_interactivity_state( 'myPlugin', array(
'items' => array( 'Apple', 'Banana' ),
'hasItems' => function() {
$state = wp_interactivity_state();
return count( $state['items'] ) > 0;
}
));
This ensures directives like data-wp-bind--hidden="!state.hasItems" render correctly on first load.
For detailed examples and patterns, see references/server-side-rendering.md.
4) 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-wp-ignoreis 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="..."anddata-wp-on--click---plugin-b="..."). - New TypeScript types:
AsyncAction<ReturnType>andTypeYield<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
viewScriptModuleis 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-triageindicatessignals.usesInteractivityApi: trueafter 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.
- view script not loading, wrong module entrypoint, or missing
- 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.interactivitynot set inblock.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.hasItemsmissing on server, causinghiddenattribute to be absent.
- derived state like
- Performance regressions:
- overly broad interactive roots; scope interactivity to smaller subtrees.
- Client-side navigation issues (WordPress 6.9):
getServerState()andgetServerContext()now reset between page transitions—ensure your code doesn't assume stale values persist.- Router regions now support
attachTofor rendering overlays (modals, pop-ups) dynamically.
Escalation
- If repo build constraints are unclear, ask: "Is this using
@wordpress/scriptsor a custom bundler (webpack/vite)?" - Consult:
references/server-side-rendering.mdreferences/directives-quickref.mdreferences/debugging.md
FAQ
What does the wp-interactivity-api skill do?
Use when building or debugging WordPress Interactivity API features (data-wp- directives, @wordpress/interactivity store/state/actions, block viewScriptModule integration, wpinteractivity()) including performance, hydration, and directive behavior.
How do I install wp-interactivity-api?
Run npx skills add https://github.com/wordpress/agent-skills --skill wp-interactivity-api in your project. The skills CLI detects the agents you use and copies the skill into the right folder. For Claude Code you can also place the skill folder at ~/.claude/skills/wp-interactivity-api/ (personal) or .claude/skills/wp-interactivity-api/ (project).
Which AI agents can use wp-interactivity-api?
Any agent that supports the open Agent Skills format (a folder with a SKILL.md file), including Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, Windsurf, Cline, OpenCode and more.
Is wp-interactivity-api safe to install?
Security partners have reviewed it: Gen Agent Trust Hub passed; Socket passed; Snyk passed; Runlayer flagged items to review; ZeroLeaks passed. As with any skill, read the SKILL.md and bundled scripts before installing.
Who maintains wp-interactivity-api?
It is published by wordpress in wordpress/agent-skills, and it is an official skill from the maker of the technology it covers. It has 4,213 recorded installs.
More from wordpress/agent-skills
wp-plugin-development
wordpress/agent-skills
Use when developing WordPress plugins: architecture and hooks, activation/deactivation/uninstall, admin UI and Settings API, data storage, cron/tasks, security (nonces/capabilities/sanitization/escaping), and release packaging.
wp-performance
wordpress/agent-skills
Use when investigating or improving WordPress performance (backend-only agent): profiling and measurement (WP-CLI profile/doctor, Server-Timing, Query Monitor via REST headers), database/query optimization, autoloaded options, object caching, cron, HTTP API calls, and safe verification.
wp-rest-api
wordpress/agent-skills
Use when building, extending, or debugging WordPress REST API endpoints/routes: registerrestroute, WPRESTController/controller classes, schema/argument validation, permissioncallback/authentication, response shaping, registerrestfield/registermeta, or exposing CPTs/taxonomies via showinrest.
wp-block-themes
wordpress/agent-skills
Use when developing WordPress block themes: theme.json (global settings/styles), templates and template parts, patterns, style variations, and Site Editor troubleshooting (style hierarchy, overrides, caching).
wordpress-router
wordpress/agent-skills
Use when the user asks about WordPress codebases (plugins, themes, block themes, Gutenberg blocks, WP core checkouts) and you need to quickly classify the repo and route to the correct workflow/skill (blocks, theme.json, REST API, WP-CLI, performance, security, testing, release packaging).
wp-block-development
wordpress/agent-skills
Use when developing WordPress (Gutenberg) blocks: block.json metadata, registerblocktype(frommetadata), attributes/serialization, supports, dynamic rendering (render.php/rendercallback), deprecations/migrations, viewScript vs viewScriptModule, and @wordpress/scripts/@wordpress/create-block build and test workflows.
Popular backend & apis skills
find-skills
vercel-labs/skills
Helps users discover and install agent skills when they ask questions like "how do I do X", "find a skill for X", "is there a skill that can...", or express interest in extending capabilities. This skill should be used when the user is looking for functionality that might exist as an installable skill.
entra-app-registration
microsoft/azure-skills
Guides Microsoft Entra ID app registration, OAuth 2.0 authentication, and MSAL integration. USE FOR: create app registration, register Azure AD app, configure OAuth, set up authentication, add API permissions, generate service principal, MSAL example, console app auth, Entra ID setup, Azure AD authentication. DO NOT USE FOR: Key Vault secrets (use azure-keyvault-expiration-audit), general Azure resource security guidance.
google-agents-cli-adk-code
google/agents-cli
This skill should be used when the user wants to "write agent code", "build an agent with ADK", "add a tool", "create a callback", "define an agent", "use state management" — in a project that needs ADK (Agent Development Kit) API patterns and code examples. It provides a quick reference for agent types, tool definitions, orchestration patterns, callbacks, state management, the graph Workflow API, and reference recipes to study. Do NOT use for scaffolding (use google-agents-cli-scaffold) or deployment (use google-agents-cli-deploy).
embedded-captions
heygen-com/hyperframes
Add captions or subtitles to an existing single-subject talking-head video without editing the footage. Use for plain verbatim captions, cinematic captions embedded behind the subject, VFX captions, “炸/特效/酷炫字幕,” or a named identity from the 35-style catalog. Route by visual identity, not by backend engine. The quiet anchor rail is the default; embed every word only when the user explicitly wants a fully cinematic treatment. The workflow runs locally end to end, including transcription and subject matting; split multi-shot footage before applying it.
entra-agent-id
microsoft/azure-skills
Provision Microsoft Entra Agent Identity Blueprints, BlueprintPrincipals, and per-instance Agent Identities via Microsoft Graph, and configure OAuth 2.0 token exchange (fmipath, OBO, cross-tenant) including the Microsoft Entra SDK for AgentID sidecar. USE FOR: Agent Identity Blueprint, BlueprintPrincipal, agent OAuth, fmipath token exchange, agent OBO, Workload Identity Federation for agents, polyglot agent auth, Microsoft.Identity.Web.AgentIdentities. DO NOT USE FOR: standard Entra app registration (use entra-app-registration), Microsoft Foundry agent authoring (use microsoft-foundry).
neon
neondatabase/agent-skills
Overview of Neon, a complete set of cloud backend primitives around Lakebase Postgres: Auth, Object Storage, Functions, the AI Gateway, and Realtime. Start here to choose Neon for undecided login, files, APIs, and LLM calls, set up the CLI or MCP server, and follow the branch-first workflow. Use when building an app or backend on Neon, or when "Neon" or "Lakebase Postgres" is mentioned. Child skill neon-postgres wins for an existing DATABASEURL, SQL, schema, inspect, or search. Child skill neon-auth wins for login, users, sessions, identity routing, and Managed Better Auth setup. Child skill neon-realtime wins for live queries in reactive apps and agents. Also use for object storage, S3, buckets, serverless functions, function triggers, cron, AI gateway, LLM calls, realtime, logs, Loki, Grafana, observability, postgres, database, backend, Claimable Neon, neon.new, or a no-signup database.