wp-interactivity-api
von WordPressNutze den wp-interactivity-api Skill, um Funktionen der WordPress Interactivity API im Frontend zu bauen oder zu debuggen. Er hilft bei `data-wp-*`-Direktiven, `@wordpress/interactivity`-Store/State/Actions, der Einbindung von `viewScriptModule`, Hydration und dem Verhalten von Direktiven – mit praxisnahen Hinweisen zu Installation, Nutzung und repositoryspezifischer Fehlersuche.
Dieser Skill erreicht 82/100 und ist damit ein solides Verzeichnis-Listing für Nutzer, die an Problemen mit der WordPress Interactivity API arbeiten. Das Repository liefert Agenten einen klaren Auslöser, praktische Triage-Schritte und genug Details zu Implementierung und Debugging, um Rätselraten gegenüber einem generischen Prompt zu reduzieren. Allerdings ist es enger gefasst als ein vollständiger End-to-End-Skill für App-Entwicklung.
- Explizite Abdeckung von Interactivity-API-Markern wie `data-wp-interactive`, `@wordpress/interactivity` und der Einbindung von `viewScriptModule`.
- Gute operative Anleitung mit Ablauf, benötigten Eingaben und Debugging-Hinweisen für Hydration, Direktiven und serverseitiges Rendering.
- Nützliche Hinweise zu WordPress 6.9, darunter eindeutige Direktiv-IDs und das veraltete Verhalten von `data-wp-ignore`.
- Für einige Workflows ist WP-CLI erforderlich, und der Skill setzt einen dateisystembasierten Agenten mit bash + node voraus. Daher passt er möglicherweise nicht für leichtgewichtige Umgebungen.
- Es gibt keinen Installationsbefehl und keine Scripts; die Nutzung setzt also voraus, dass der Anwender bereits weiß, wie man den Skill ablegt und ausführt.
Überblick über die wp-interactivity-api-Skill
Was diese Skill leistet
Die wp-interactivity-api-Skill hilft dir dabei, WordPress-Interactivity-API-Funktionen zu bauen oder zu debuggen, ohne bei Directives, Store-Struktur oder dem Server-/Client-Wiring zu raten. Sie ist besonders nützlich, wenn du mit data-wp-*-Markup, @wordpress/interactivity, viewScriptModule oder wp_interactivity_*()-Funktionen arbeitest und einen praktischen Weg von einer kaputten Interaktion zu einer funktionierenden Lösung brauchst.
Für wen sie gedacht ist
Nutze die wp-interactivity-api skill, wenn du Frontend Development in einem WordPress-Block, Theme oder Plugin machst und interaktive UI brauchst, die den ersten Render sauber übersteht. Sie passt besonders gut, wenn du bereits ein Repo hast und herausfinden musst, warum Hydration fehlschlägt, warum eine Directive nicht auslöst oder wie du einen neuen interaktiven Bereich korrekt strukturierst.
Warum sich die Installation lohnt
Der Hauptnutzen ist die schnellere Entscheidungsfindung: Die Skill zeigt dir, wonach du suchen solltest, welche Eingaben relevant sind und wie du blockbasierte, theme-weite und pluginseitige Enhancement-Ansätze voneinander trennst. Dadurch ist der wp-interactivity-api-Guide hilfreicher als ein generischer Prompt, weil er die tatsächlichen Einschränkungen von WordPress 6.9+ und die Art berücksichtigt, wie diese API verdrahtet ist.
So verwendest du die wp-interactivity-api-Skill
Richtig installieren und eingrenzen
Verwende das Muster wp-interactivity-api install vom Directory-Startpunkt aus und nutze die Skill dann in einer agentengestützten Session mit Dateisystemzugriff sowie verfügbarem bash und Node. In den Repository-Hinweisen wird die Kompatibilität mit WordPress 6.9+ erwähnt und für manche Workflows auch WP-CLI; wenn deine Umgebung die Projektdateien nicht inspizieren oder WordPress-Befehle nicht ausführen kann, werden die Ergebnisse schwächer ausfallen.
Die richtigen Startdaten mitgeben
Die wp-interactivity-api usage funktioniert am besten, wenn du Folgendes lieferst:
- Repo-Root
- Triage-Ausgabe von
wp-project-triage - betroffene Oberfläche: Frontend, Editor oder beides
- WordPress-Version und eventuelle Module-/Build-Einschränkungen
Ein schwacher Prompt ist: „Fix the Interactivity API.“
Ein stärkerer Prompt ist: „Debug why data-wp-on--click does not fire in this block on the frontend, WordPress 6.9, module scripts enabled, triage attached, and the issue only appears after navigation.“
Diese Dateien zuerst lesen
Beginne mit SKILL.md und öffne dann:
references/directives-quickref.mdfür Directive-Namen und Suchankerreferences/debugging.mdfür die Fehler-Checklistereferences/server-side-rendering.mdfür PHP-Setup und Hydration-Regeln
Wenn du einschätzen willst, ob die Skill zur aktuellen Aufgabe passt, zeigen dir diese drei Dateien den echten Workflow schneller als der reine Repo-Baum.
Dem praktischen Workflow folgen
Die Skill ist um eine einfache Abfolge herum aufgebaut:
- vorhandene Nutzung über Suchen nach
data-wp-interactive,@wordpress/interactivityundviewScriptModuleerkennen - den Store-Namespace identifizieren und prüfen, ob das Markup denselben Namen erwartet
- serverseitig gerenderten Kontext und Initialzustand verifizieren
- prüfen, ob Root-Element, View-Script-Module und Event-Directives im gerenderten HTML wirklich vorhanden sind
- den Umfang so weit reduzieren, bis die fehlerhafte Directive oder der defekte State-Pfad isoliert ist
Bei neuen interaktiven Blöcken solltest du das offizielle Scaffold-Template bevorzugen, statt die Struktur von Grund auf neu zu erfinden.
FAQ zur wp-interactivity-api-Skill
Ist das nur zum Debuggen?
Nein. Die wp-interactivity-api skill deckt sowohl Build- als auch Debug-Aufgaben ab. Sie ist besonders nützlich, wenn du entscheiden musst, ob du Interaktivität über ein Block-viewScriptModule hinzufügst, bestehendes Markup in einem Plugin erweiterst oder Theme-Verhalten so verdrahtest, dass es korrekt hydriert.
Worin unterscheidet sie sich von einem normalen Prompt?
Ein normaler Prompt lässt oft die WordPress-spezifischen Details aus, die den Erfolg tatsächlich bestimmen: Directive-Namen, Übereinstimmung des Store-Namespaces, serverseitiger Kontext und Änderungen im Verhalten von WordPress 6.9. Diese Skill verankert genau diese Prüfungen, reduziert Fehlstarts und hilft dem Agenten, zuerst die richtigen Dateien zu lesen.
Ist sie anfängerfreundlich?
Ja, wenn du das Ziel beschreiben und den Agenten auf den richtigen Repo-Bereich verweisen kannst. Sie ist kein Tutorial, um die komplette API von Grund auf zu lernen, hilft Anfängern aber dabei, die häufigsten Einführungsfehler zu vermeiden: fehlender interaktiver Root, unpassende Namespaces und der falsche Rendering-Pfad.
Wann sollte ich sie nicht verwenden?
Verwende sie nicht für allgemeine JavaScript-UI-Arbeit außerhalb der WordPress Interactivity API und auch nicht, wenn deine Funktion rein statisch ist und keine serverseitig gerenderten Directives braucht. Sie passt außerdem schlecht, wenn du die tatsächlichen Repo-Dateien nicht inspizieren kannst, weil die Skill auf repositoryspezifisches Markup sowie PHP-/JS-Integrationsdetails angewiesen ist.
So verbesserst du die wp-interactivity-api-Skill
Mehr präzisen Quellkontext liefern
Die besten Ergebnisse bekommst du, wenn du die aktuelle Oberfläche des Blocks, Themes oder Plugins zusammen mit der exakten Directive oder Funktion zeigst, die geprüft werden soll. Füge Ausschnitte um data-wp-interactive, data-wp-context und den passenden Store-Namespace hinzu, damit der Agent Absicht und Implementierung direkt vergleichen kann, statt sie zu erraten.
Den Fehlerzustand benennen, nicht nur das Symptom
Für die wp-interactivity-api skill ist „Der Button macht nichts“ zu unspezifisch. Besser sind Eingaben, die den sichtbaren Fehler und das erwartete Verhalten nennen: „Der Click-Handler ist gebunden, aber der State aktualisiert sich nach dem Server-Render nicht“ oder „Hydration funktioniert beim ersten Laden, schlägt aber nach clientseitiger Navigation fehl.“ So lassen sich Directive-Probleme klarer von State-Initialisierung oder Modul-Ladeproblemen unterscheiden.
Repo-Reading-Ergebnis anfordern und dann iterieren
Ein guter wp-interactivity-api guide-Workflow ist, nach Folgendem zu fragen:
- der wahrscheinlichen Root Cause
- den genauen Dateien, die als Nächstes geprüft werden sollten
- der minimalen Codeänderung
- jedem WordPress-6.9-Kompatibilitätsrisiko
Arbeite dann mit dem ersten Ergebnis weiter. Wenn es um Server Rendering geht, liefere den relevanten PHP-Code und das gerenderte HTML. Wenn es um Event Handling geht, füge das Directive-Markup und die Datei mit den Store-Actions hinzu. So wird die Skill vom Suchhelfer zu einer brauchbaren Implementierungs-Checkliste.