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 |

在 Magento 2 中為 Hyvä 主題編寫與 CSP 兼容的 Alpine.js 組件。當用戶想要創建 Alpine 組件、向 Hyvä 模板添加交互性、為 Hyvä 主題編寫 JavaScript 或需要與內容安全策略配合使用的 Alpine.js 模式方面的幫助時，應使用此技能。觸發短語包括“創建 alpine 組件”、“添加交互性”、“alpine for hyva”、“x-data 組件”、“csp 兼容性”、“csp 兼容 javascript”。 來源：hyva-themes/hyva-ai-tools。

查看原文