hyva-alpine-component — Claude Code skill

What hyva-alpine-component does

The skill covers interactive Hyvä templates that must run in the Alpine CSP build, which avoids the unsafe-eval directive. Payment pages need that setup for PCI-DSS 4.0, mandatory from April 1, 2025. Treat CSP style as the default for any Alpine code you write.

The guidance is concrete. To toggle state, call a method such as toggle instead of assigning inline; to pass an argument, put it in a data-* attribute and read this.$el.dataset. x-model has no equivalent in Alpine CSP, so inputs use :value plus @input. Range loops are out too. Each component follows a template: a named global constructor function, registered with Alpine.data() inside an alpine:init listener that passes {once: true}, and $hyvaCsp->registerInlineScript() after every <script> block.

PHP values reach JavaScript through $escaper->escapeJs(); data attributes take escapeHtmlAttr() instead. Numeric input goes through hyva.safeParseNumber(), and combining objects uses spread with .call(this). Skip the registerInlineScript() call and the inline script stays unregistered, so the policy blocks it.