Hyva Alpine Component

If you're building on Hyvä themes for Magento 2, you'll need to write Alpine.js components that respect Content Security Policy rules, especially with PCI-DSS 4.0 compliance coming due. This skill walks you through the CSP-compatible patterns: no inline mutations or arguments, use methods instead of expressions, replace x-model with manual bindings, and always register components with Alpine.data inside the alpine:init event. The most useful bit is the practical reference for two-way binding on inputs, checkboxes, and selects without x-model, plus the dataset pattern for passing arguments to methods. It's structured as a reference guide with side-by-side comparisons of what breaks CSP and what works.

skills.sh installs: 1.3K
GitHub stars: 85
last updated: Aug 21, 2026

View on GitHub

Install

$ npx -y skills add hyva-themes/hyva-ai-tools --skill hyva-alpine-component --agent claude-code

Installs into .claude/skills of the current project.

Files

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