SKILL.md
Hyvä Alpine Component
Overview
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.
CSP Constraints Summary
| Capability | Standard Alpine | Alpine CSP |
|---|---|---|
| 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 |
| Range iteration | x-for="i in 10" |
Not supported |