wp-interactivity-api
par WordPressUtilisez le skill wp-interactivity-api pour créer ou déboguer des fonctionnalités de WordPress Interactivity API en développement frontend. Il aide à gérer les directives `data-wp-*`, le store/state/actions `@wordpress/interactivity`, l’intégration de `viewScriptModule`, l’hydratation et le comportement des directives, avec des conseils pratiques pour l’installation, l’utilisation et le dépannage spécifique au dépôt.
Ce skill obtient 82/100, ce qui en fait une bonne fiche pour les personnes qui travaillent sur des समस्यatiques WordPress Interactivity API. Le dépôt fournit aux agents un déclencheur clair, des étapes de triage concrètes et suffisamment de détails d’implémentation et de débogage pour réduire l’incertitude par rapport à un prompt générique, même s’il reste plus ciblé qu’un skill complet de bout en bout pour la construction d’applications.
- Couverture explicite des déclencheurs liés à l’Interactivity API, comme `data-wp-interactive`, `@wordpress/interactivity` et l’intégration de `viewScriptModule`.
- Bon niveau de guidance opérationnelle avec une procédure, les entrées requises et des références de débogage pour l’hydratation, les directives et le rendu côté serveur.
- Notes utiles spécifiques à WordPress 6.9, notamment les IDs de directives uniques et le comportement obsolète de `data-wp-ignore`.
- Certains workflows nécessitent WP-CLI, et le skill suppose un agent basé sur le système de fichiers avec bash + node ; il peut donc être mal adapté aux environnements légers.
- Aucune commande d’installation ni script n’est fourni ; l’adoption dépend donc du fait que l’utilisateur sache déjà comment placer et exécuter le skill.
Aperçu du skill wp-interactivity-api
Ce que fait ce skill
Le skill wp-interactivity-api vous aide à créer ou déboguer des fonctionnalités de WordPress Interactivity API sans devoir deviner les directives, la forme du store ou le câblage serveur/client. Il est particulièrement utile quand vous travaillez avec du balisage data-wp-*, @wordpress/interactivity, viewScriptModule ou les fonctions wp_interactivity_*() et que vous avez besoin d’un chemin concret pour passer d’une interaction cassée à une version fonctionnelle.
À qui il s’adresse
Utilisez le wp-interactivity-api skill si vous faites du Frontend Development dans un bloc, un thème ou une extension WordPress et que vous avez besoin d’une UI interactive qui survit proprement au premier rendu. C’est un très bon choix si vous avez déjà un dépôt et que vous devez comprendre pourquoi l’hydratation échoue, pourquoi une directive ne se déclenche pas, ou comment structurer correctement une nouvelle zone interactive.
Pourquoi il vaut la peine de l’installer
L’atout principal, c’est la rapidité de décision : il vous indique quoi chercher, quelles entrées comptent, et comment distinguer les approches au niveau du bloc, du thème et de l’extension. Le guide wp-interactivity-api est donc plus utile qu’une invite générique, parce qu’il reflète les contraintes réelles de WordPress 6.9+ et la manière dont cette API est branchée.
Comment utiliser le skill wp-interactivity-api
L’installer et le cadrer correctement
Utilisez le schéma wp-interactivity-api install depuis le point d’entrée du répertoire, puis appliquez le skill dans une session d’agent adossée au système de fichiers, avec bash et Node disponibles. La documentation du dépôt mentionne la compatibilité WordPress 6.9+ et, pour certains workflows, WP-CLI ; si votre environnement ne peut pas inspecter les fichiers du projet ou exécuter des commandes WordPress, les résultats seront moins bons.
Lui donner les bonnes informations de départ
Le wp-interactivity-api usage fonctionne mieux si vous fournissez :
- la racine du dépôt
- la sortie de triage de
wp-project-triage - la surface concernée : frontend, éditeur, ou les deux
- la version de WordPress et toute contrainte de module/build
Une mauvaise invite serait : « Répare l’Interactivity API. »
Une meilleure invite serait : « Débogue pourquoi data-wp-on--click ne se déclenche pas dans ce bloc côté frontend, WordPress 6.9, scripts de module activés, triage joint, et le problème n’apparaît qu’après navigation. »
Lire ces fichiers en priorité
Commencez par SKILL.md, puis ouvrez :
references/directives-quickref.mdpour les noms de directives et les ancres de recherchereferences/debugging.mdpour la checklist des échecsreferences/server-side-rendering.mdpour la configuration côté PHP et les règles d’hydratation
Si vous déterminez si le skill correspond au besoin actuel, ces trois fichiers montrent le vrai flux de travail plus vite que l’arborescence du dépôt seule.
Suivre le flux de travail pratique
Le skill s’organise autour d’une séquence simple :
- repérer l’usage existant avec des recherches sur
data-wp-interactive,@wordpress/interactivityetviewScriptModule - identifier l’espace de noms du store et vérifier si le balisage attend le même nom
- valider le contexte rendu côté serveur et l’état initial
- vérifier que l’élément racine, le module du script de vue et les directives d’événements sont bien présents dans le HTML rendu
- réduire le périmètre jusqu’à isoler la directive cassée ou le chemin d’état fautif
Pour de nouveaux blocs interactifs, privilégiez le template officiel de scaffold plutôt que d’inventer la structure de zéro.
FAQ du skill wp-interactivity-api
Est-ce réservé au débogage ?
Non. Le wp-interactivity-api skill couvre à la fois la création et le débogage. Il est particulièrement utile quand vous devez décider s’il faut ajouter de l’interactivité via un viewScriptModule de bloc, enrichir du balisage existant dans une extension, ou brancher un comportement au niveau du thème d’une manière qui s’hydrate correctement.
En quoi est-il différent d’une invite classique ?
Une invite classique saute souvent les détails propres à WordPress qui déterminent réellement le succès : nommage des directives, correspondance de l’espace de noms du store, contexte côté serveur et évolutions de comportement dans WordPress 6.9. Ce skill intègre ces vérifications, ce qui réduit les faux départs et aide l’agent à lire les bons fichiers en premier.
Est-il adapté aux débutants ?
Oui, si vous pouvez décrire l’objectif et orienter l’agent vers la bonne zone du dépôt. Ce n’est pas un tutoriel pour apprendre toute l’API depuis zéro, mais cela aide les débutants à éviter les erreurs d’adoption les plus courantes : racine interactive manquante, espaces de noms mal alignés et mauvais chemin de rendu.
Quand ne faut-il pas l’utiliser ?
Ne l’utilisez pas pour du travail UI JavaScript sans rapport avec WordPress Interactivity API, ni lorsque votre fonctionnalité est purement statique et n’a pas besoin de directives rendues côté serveur. C’est aussi un mauvais choix si vous ne pouvez pas inspecter les vrais fichiers du dépôt, car le skill repose sur le balisage propre au repo et sur les détails d’intégration PHP/JS.
Comment améliorer le skill wp-interactivity-api
Donner un contexte source plus précis
Les meilleurs résultats viennent du fait de montrer la surface actuelle du bloc, du thème ou de l’extension, ainsi que la directive ou la fonction exacte que vous voulez faire relire. Incluez des extraits autour de data-wp-interactive, data-wp-context et de l’espace de noms du store correspondant, afin que l’agent puisse comparer l’intention à l’implémentation au lieu de l’inférer.
Décrire le mode d’échec, pas seulement le symptôme
Pour le wp-interactivity-api skill, « le bouton ne fait rien » est trop vague. De meilleures entrées nomment la rupture observable et le comportement attendu : « le gestionnaire de clic est bien lié, mais l’état ne se met pas à jour après le rendu serveur », ou « l’hydratation fonctionne au premier chargement mais échoue après la navigation côté client ». Cela aide à distinguer un problème de directive d’un problème d’initialisation d’état ou de chargement de module.
Demander d’abord une sortie orientée lecture du dépôt, puis itérer
Un bon flux de travail avec le wp-interactivity-api guide consiste à demander :
- la cause racine la plus probable
- les fichiers exacts à inspecter ensuite
- le changement minimal de code
- tout risque de compatibilité avec WordPress 6.9
Puis itérez avec ce premier résultat sous la main. Si le problème concerne le rendu côté serveur, incluez le PHP pertinent et le HTML rendu. S’il concerne la gestion des événements, fournissez le balisage de la directive et le fichier des actions du store. Le skill passe alors d’une aide à la recherche à une vraie checklist d’implémentation.