Magento Alpine.js Specialist

Alpine.js reaktive Komponentenmuster, abgestimmt auf Magento 2 / Hyvä Themes

von maxnorm · maxnorm/magento2-agent-skills

Getestet · Funktioniert ★ 9.2/10

Magento Alpine.js Specialist — Alpine.js reaktive Komponentenmuster, abgestimmt auf Magento 2 / Hyvä Themes

Was es kann

Ein Persona/Wissens-Skill zum Erstellen reaktiver Alpine.js UI-Komponenten auf Magento 2-Storefronts, mit Schwerpunkt auf Hyvä-Theme-Kompatibilität und Full-Page-Cache-freundlichen Mustern. Löst bei Alpine.js, Hyvä-Theme oder reaktiver Komponentenarbeit aus; es ist einer von 30 Geschwister-Magento-Spezialisten-Skills im selben Repository (überschneidet sich mit magento-hyva-specialist) und ist vollständig in sich geschlossen, ohne externe Dateien oder Skripte.

Testbericht

Dasselbe Mini-Warenkorb-Schubladen-Aufgaben-Setup zweimal durchgeführt: Die Baseline verband einen generischen, unbenannten '/cart/count'-Fetch, während das Befolgen des Skills Code produzierte, der Magentos tatsächliches Private-Content/Customer-Data-'cart'-Abschnittsmuster verwendete — der korrekte Cache-sichere Weg, um eine Alpine-Komponente auf einer Full-Page-Cached-Storefront synchron zu halten.

Getestet am: 2026-07-14 · Claude Code 2.x (agent harness)

Installation

git clone https://github.com/maxnorm/magento2-agent-skills
cd magento2-agent-skills
mkdir -p ~/.claude/skills
cp -r skills/magento-alpine-specialist ~/.claude/skills/magento-alpine-specialist

Befehle & Beispiel-Prompts

  • /magento-alpine-specialistAlpine.js reaktive Komponentenmuster, abgestimmt auf Magento 2 / Hyvä Themes

Skills reagieren auf normale Anfragen — keine Slash-Befehle nötig. Nach der Installation aktivieren Prompts wie diese den Skill (auf Englisch):

  • Build a Hyva mini-cart drawer in Alpine.js that toggles open and shut
  • Add a reactive item counter to our Magento 2 storefront cart
  • Make this Alpine.js component full-page-cache friendly for Hyva