wp-interactivity-api

Debug WordPress Interactivity API directives, store state, and actions.

2|Updated Aug 16, 2025
One-click install
npx skills add https://github.com/brigleb/claude --skill wp-interactivity-api-brigleb
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: wp-interactivity-api
Source: https://github.com/brigleb/claude/tree/main/skills/wp-interactivity-api
Command: npx skills add https://github.com/brigleb/claude --skill wp-interactivity-api-brigleb

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps developers build and debug interactive features in WordPress using the Interactivity API, ensuring smooth user experiences and efficient data handling.

Core Features & Use Cases

  • Directive Debugging: Troubleshoot issues with data-wp-* directives and their behavior.
  • State Management: Understand and implement @wordpress/interactivity store, state, and actions.
  • Performance Optimization: Ensure efficient hydration and directive execution.
  • Use Case: A user reports that a custom block's interactive elements are not responding. This Skill can help diagnose why the directives aren't firing or why the state isn't updating correctly.

Quick Start

Use the wp-interactivity-api skill to debug why data-wp-on--click directives are not triggering on the frontend.

Frequently Asked Questions about wp-interactivity-api

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I debug WordPress Interactivity API directives that are not firing on the frontend?

To debug WordPress Interactivity API directives, inspect the data-wp-* attributes to ensure they are correctly registered and check the @wordpress/interactivity store for state synchronization issues. This Skill diagnoses why directives like data-wp-on--click fail to trigger.

How does state management work in the WordPress Interactivity API?

State management in the WordPress Interactivity API uses the @wordpress/interactivity store to manage state and actions. This Skill helps implement and troubleshoot store configurations to ensure interactive block elements update correctly.

Does the WordPress Interactivity API require WP-CLI for block viewScriptModule integration?

WP-CLI is required for some WordPress Interactivity API workflows, particularly when integrating block viewScriptModule features. This Skill supports workflows that depend on WP-CLI for setting up and managing interactive block scripts.

What is the best way to optimize hydration and directive execution performance for WordPress 6.9+?

The best way to optimize hydration and directive execution is to ensure efficient state handling within the @wordpress/interactivity store. This Skill focuses on performance optimization for interactive features in WordPress 6.9+.

Why does my custom block state not update correctly when using wp_interactivity_*() functions?

Custom block state may not update due to incorrect usage of wp_interactivity_*() functions or misconfigured actions within the store. This Skill assists in troubleshooting state management and directive behavior to resolve update failures.

Can I use the WordPress Interactivity API without prior JavaScript frontend development experience?

Using the WordPress Interactivity API requires JavaScript frontend development knowledge, particularly regarding state management and directives. This Skill is designed for developers building dynamic WordPress experiences who have this foundational background.