hyva-alpine-component

SKILL.md

This skill provides guidance for writing CSP-compatible Alpine.js components in Hyvä themes. Alpine CSP is a specialized Alpine.js build that operates without the unsafe-eval CSP directive, which is required for PCI-DSS 4.0 compliance on payment-related pages (mandatory from April 1, 2025).

Key principle: CSP-compatible code functions in both standard and Alpine CSP builds. Write all Alpine code using CSP patterns for future-proofing.

| Property reads | x-show="open" | Same | | Negation | x-show="!open" | Method: x-show="isNotOpen" | | Mutations | @click="open = false" | Method: @click="close" | | Method args | @click="setTab('info')" | Dataset: @click="setTab" data-tab="info" | | x-model | Available | Not supported - use :value + @input |

Écrivez des composants Alpine.js compatibles CSP pour les thèmes Hyvä dans Magento 2. Cette compétence doit être utilisée lorsque l'utilisateur souhaite créer des composants Alpine, ajouter de l'interactivité aux modèles Hyvä, écrire du JavaScript pour les thèmes Hyvä ou a besoin d'aide avec les modèles Alpine.js qui fonctionnent avec la politique de sécurité du contenu. Les phrases de déclenchement incluent « créer un composant alpin », « ajouter de l'interactivité », « alpin pour hyva », « composant x-data », « compatibilité csp », « javascript compatible csp ». Source : hyva-themes/hyva-ai-tools.

Voir l'original