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 구성 요소 만들기", "상호 작용 추가", "hyva용 alpine", "x-data 구성 요소", "csp 호환성", "csp 호환 javascript"가 포함됩니다. 출처: hyva-themes/hyva-ai-tools.

원본 보기