Magento Alpine.js Specialist

Alpine.js reaktiva komponentmönster anpassade för Magento 2 / Hyvä-teman

av maxnorm · maxnorm/magento2-agent-skills

Testad · Fungerar ★ 9.2/10

Magento Alpine.js Specialist — Alpine.js reaktiva komponentmönster anpassade för Magento 2 / Hyvä-teman

Vad den gör

En persona/kunskapsfärdighet för att bygga reaktiva Alpine.js UI-komponenter på Magento 2 storefronts, med betoning på Hyvä-tema-kompatibilitet och mönster som är vänliga mot full-page-cache. Triggas vid Alpine.js, Hyvä-tema, eller reaktiv komponent-arbete; det är en av 30 syster Magento-specialistfärdigheter i samma repo (överlappar med magento-hyva-specialist) och är helt självförsörjande utan externa filer eller skript.

Testrapport

Byggde samma mini-cart drawer-uppgift två gånger: baslinjen kopplade en generisk namnlös '/cart/count'-hämtning, medan färdighetsföljande kod producerade kod som använde Magentos faktiska private-content/customer-data 'cart'-sektionsmönster — det korrekta cache-säkra sättet att hålla en Alpine-komponent synkroniserad på en full-page-cached storefront.

Testad: 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

Kommandon och exempelprompter

/magento-alpine-specialistAlpine.js reaktiva komponentmönster anpassade för Magento 2 / Hyvä-teman

Skills triggas av vanliga förfrågningar — inga kommandon att memorera. Efter installationen aktiverar prompter som dessa skillen (på engelska):

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

Läs hela rapporten →