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 |

Write CSP-compatible Alpine.js components for Hyvä themes in Magento 2. This skill should be used when the user wants to create Alpine components, add interactivity to Hyvä templates, write JavaScript for Hyvä themes, or needs help with Alpine.js patterns that work with Content Security Policy. Trigger phrases include "create alpine component", "add interactivity", "alpine for hyva", "x-data component", "csp compatibility", "csp compliant javascript". Source: hyva-themes/hyva-ai-tools.

View raw