Wp Interactivity Api
This one's for building interactive WordPress blocks with the Interactivity API, the data-wp-* directive system that shipped in WordPress 6.5+. It covers the full lifecycle: scaffolding stores and actions, wiring up directives like data-wp-on and data-wp-bind, server-side rendering with wp_interactivity_state() to avoid hydration mismatches, and debugging when directives just sit there doing nothing. The procedure emphasizes pre-rendering state in PHP so your markup is correct before JavaScript loads, which is the right way to do this but easy to skip. Targets WordPress 6.9+ and assumes you're working in a filesystem agent with WP-CLI access. Solid if you're moving beyond static blocks or trying to figure out why your interactive block flickers on load.
- skills.sh installs
- 327
- GitHub stars
- 211
- last updated
- Jun 3, 2026
Install
$ npx -y skills add automattic/agent-skills --skill wp-interactivity-api --agent claude-codeInstalls 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/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:
Sponsors
Agent CaffeineSponsoredClose your lid, come back to finished work
SnugSponsoredThe clipboard manager for the AI eraPromote your product hereReach 125k+ visitors monthly
WaxSponsoredBlock anything with supervision, without erasing your iPhonePromote your product hereReach 125k+ visitors monthly
knobsSponsoredSee your site on any phone, any day, in any languageDetails
- Repository
- github.com/automattic/agent-skills
- Categories
- Backend & APIs, AI & Agent Building
- First seen
- Jun 3, 2026
More from automattic/agent-skills
All 12Recommended
More Backend & APIs
alphafold-databasedavila7/claude-code-templatesAccess AlphaFold's 200M+ AI-predicted protein structures. Retrieve structures by UniProt ID, download PDB/mmCIF files, analyze confidence metrics (pLDDT, PAE), 326skills.sh installs
tikhub-api-helperliangdabiao/tikhub_api_skillSearch and query TikHub APIs for TikTok, Douyin, Xiaohongshu, Lemon8, Instagram, YouTube, Twitter, Reddit, and more. Use when user asks about needs to fetch dat309skills.sh installs
nextjs-server-navigationwsimmonds/claude-nextjs-skillsGuide for implementing navigation in Next.js Server Components using Link component and redirect() function. Covers the difference between server and client nav305skills.sh installs
firebase-storagejezweb/claude-skillsBuild with Firebase Cloud Storage - file uploads, downloads, and secure access. Use when: uploading images/files, generating download URLs, implementing file pi296skills.sh installs
chembl-databasedavila7/claude-code-templatesQuery ChEMBL's bioactive molecules and drug discovery data. Search compounds by structure/properties, retrieve bioactivity data (IC50, Ki), find inhibitors, per278skills.sh installs