Claude MarketplacesSubmit
wordpress avatar

Wp Interactivity Api

wordpress/agent-skillsOfficial

This one's built for anyone wrestling with WordPress's Interactivity API, the data-wp-* directive system that powers modern interactive blocks. It walks you through the full stack: detecting existing usage, wiring up stores and actions, server-side rendering with wp_interactivity_state() to avoid hydration flicker, and debugging when directives just sit there doing nothing. The guidance on PHP-side derived state is especially solid, it prevents that annoying layout shift when something like a visibility toggle depends on computed values. Covers WordPress 6.9 changes too, including the deprecation of data-wp-ignore and new async action types. If you're building or fixing interactive blocks and keep Googling hydration problems, this will save you hours.

skills.sh installs
4.5K
GitHub stars
2.3K
last updated
Aug 21, 2026
View on GitHub

Install

$ npx -y skills add wordpress/agent-skills --skill wp-interactivity-api --agent claude-code

Installs into .claude/skills of the current project.

Files

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:

SKILL.md on GitHub

Sponsors

Promote your product hereReach 125k+ visitors monthlyPromote your product hereReach 125k+ visitors monthlyAgent CaffeineSponsoredClose your lid, come back to finished workSnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthlyWaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthlyknobsSponsoredSee your site on any phone, any day, in any language

Details

Repository
github.com/wordpress/agent-skills
Categories
Backend & APIs, AI & Agent Building, Debugging, PHP & Laravel
First seen
Apr 16, 2026

More from wordpress/agent-skills

All 17

Recommended

More Backend & APIs
1ghostsecurity avatarghost-proxyghostsecurity/skillsStarts and controls the reaper MITM proxy to capture, inspect, search, and replay HTTP/HTTPS traffic between clients and servers. Capabilities include starting/4.2Kskills.sh installs
2yaklang avatarapi-secyaklang/hack-skillsEntry P1 category router for API security. Use when choosing between API recon, authorization, token abuse, and hidden-parameter workflows before any deeper API4.1Kskills.sh installs
3yaklang avatarauthbypass-authentication-flawsyaklang/hack-skillsAuthentication bypass testing playbook. Use when assessing login flows, password reset logic, account recovery, MFA bypass, token predictability, brute-force re4Kskills.sh installs
4yaklang avatarwebsocket-securityyaklang/hack-skillsWebSocket handshake, CSWSH, tooling (wsrepl, ws-harness, Burp), and common flaws. Use when apps use real-time channels, chat, notifications, or WS-backed APIs.4Kskills.sh installs
5yaklang avatarapi-authorization-and-bolayaklang/hack-skillsAPI authorization and BOLA testing playbook. Use when APIs expose object identifiers, nested resources, hidden writable fields, or weak function-level authoriza3.9Kskills.sh installs
6yaklang avatarssti-server-side-template-injectionyaklang/hack-skillsSSTI playbook. Use when template expressions, server-side rendering, preview features, or templating engines may evaluate attacker-controlled content.3.8Kskills.sh installs