hyva-ui-component-css

Official

Build custom, reusable Hyva UI components for Magento 2 storefronts with Tailwind CSS and CSS custom properties.

AuthorInchoo
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This Skill provides the building blocks for creating reusable, themeable UI components for Hyva-based Magento 2 storefronts, offering a design system approach that simplifies component creation and theming.

Core Features & Use Cases

  • Reusable UI Components: Develop button, link, form, cookie notice, gallery, slider, and table components that follow a consistent design system.
  • Themeable: Customize the look and feel of components with Tailwind CSS and CSS custom properties for seamless integration with the theme.
  • Interactivity with Alpine.js: Use Alpine.js for interactive components that enhance user experience without additional JavaScript overhead.
  • Integration with Magento Template System: Seamlessly integrate with Magento's template system for consistent design across the storefront.

Quick Start

Generate a new button component by using the create-component skill and follow the naming and structure conventions for Hyva UI components.

Dependency Matrix

Required Modules

None required

Components

scriptsreferences

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: hyva-ui-component-css
Download link: https://github.com/Inchoo/magento-bricklayer/archive/main.zip#hyva-ui-component-css

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 620,000+ vetted skills library on demand.