hyva-alpine-component

Write CSP-safe Alpine.js components for Hyvä Magento 2 themes.

Updated Mar 12, 2026
One-click install
npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill hyva-alpine-component-happy-horizon
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: hyva-alpine-component
Source: https://github.com/Happy-Horizon/cursor-marketplace/tree/main/plugins/hyva-ai-tools/skills/hyva-alpine-component
Command: npx skills add https://github.com/Happy-Horizon/cursor-marketplace --skill hyva-alpine-component-happy-horizon

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

CSP constraints on Hyvä themes make interactivity hard to implement securely. This skill provides CSP-safe Alpine.js component patterns and guidance for Magento 2 storefronts using Hyvä, enabling interactive UI while respecting Content Security Policy.

Core Features & Use Cases

  • CSP-compliant patterns for Hyvä Alpine components that avoid inline scripts and unsafe-eval.
  • Guidance on safe component registration using Alpine.data within an alpine:init listener with {once: true}, proper escaping, and script management.
  • Real-world scenarios include interactive modals, tabs, and accordions in Hyvä templates that run under CSP.

Quick Start

Create a CSP-safe Alpine component that toggles a panel using Alpine.data inside an alpine:init listener with {once: true} and proper escaping.

Frequently Asked Questions about hyva-alpine-component

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I write CSP-safe Alpine.js components for a Hyvä theme in Magento 2?▼

CSP-safe Alpine.js components for Hyvä require registering constructors with Alpine.data inside an alpine:init listener using {once: true}. You must also escape values with $escaper->escapeJs() and inject scripts via $hyvaCsp->registerInlineScript() to comply with Magento 2 Content Security Policy.

Why does my Hyvä Alpine.js component fail under strict Content Security Policy?▼

Hyvä Alpine.js components fail under strict CSP when inline scripts bypass registration. You must inject scripts using $hyvaCsp->registerInlineScript() after every script block and escape values with $escaper->escapeJs() to avoid violating Magento 2 Content Security Policy constraints.

What is the best way to register Alpine.js components in Magento 2 Hyvä templates?▼

The best way to register Alpine.js components in Hyvä templates is using Alpine.data inside an alpine:init listener configured with {once: true}. This CSP-safe pattern prevents duplicate registrations and ensures UI elements function correctly under Magento 2 strict Content Security Policy.

Do I need to use $escaper methods for data attributes in Hyvä Alpine components?▼

Yes, you need $escaper methods for data attributes in Hyvä Alpine components. Apply $escaper->escapeHtmlAttr() for data attributes and $escaper->escapeJs() for JavaScript strings to ensure values are safely escaped and pass Magento 2 strict Content Security Policy checks.

Can I build interactive modals and tabs using Alpine.js in Hyvä storefronts without violating CSP?▼

Yes, you can build interactive modals and tabs in Hyvä storefronts without violating CSP. By applying CSP-compliant patterns like Alpine.data registration with {once: true} and $hyvaCsp->registerInlineScript(), interactive UI elements run safely under Magento 2 strict Content Security Policy.