skills.rest
magewirephp
magewirephpCOMMUNITY
Explore all skills by this author →
𝕏@magewirephpGitHub

magewire-theming

Create Magento 2 theme compatibility modules integrating Magewire with Hyvä, Luma, Breeze, or Backend themes.

262|47|Updated Oct 8, 2021
Search Tags:#theming#layout#tailwind#alpine#magento#magewire
One-click install
npx skills add https://github.com/magewirephp/magewire --skill magewire-theming
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: magewire-theming
Source: https://github.com/magewirephp/magewire/tree/main/.claude/skills/magewire-theming
Command: npx skills add https://github.com/magewirephp/magewire --skill magewire-theming

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Magewire theming provides a structured approach for building, extending, or debugging theme-specific Magewire integrations in Magento 2. It covers creating theme compatibility modules that connect Magewire to a target theme (Hyvä, Luma, Breeze, or Backend) and adjusting Alpine loading order, layout containers, and Tailwind pipelines as needed.

Core Features & Use Cases

  • Learn Magewire's three-layer architecture (core, global view, and per-theme compatibility modules) and how to map it to a Magento theme.
  • Create minimal compatibility modules (registration.php + etc/module.xml) or more complete theme modules that wire DI, observers, layout references, and Tailwind/Tailwind-like pipelines.
  • Reuse extension-examples like Bare compatibility, Theme-scoped Features, observers bridging theme builds, and Alpine-load-order tweaks to adapt Magewire to a theme.

Quick Start

Create a theme compatibility module under themes/{Theme}, declare its module, and copy a starter pattern from the extension-examples to wire Alpine, layout, and assets for your theme.

Frequently Asked Questions about magewire-theming

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

FAQPage Schema
How do I integrate Magewire with a custom Magento 2 theme?▼

To integrate Magewire with a Magento 2 theme, you create a compatibility module under themes/{Theme} that wires frontend store components, layout references, and asset pipelines for that specific theme.

What is Magewire's three-layer architecture for Magento theming?▼

Magewire's three-layer architecture for Magento theming separates the core, global view, and per-theme compatibility modules, allowing you to map Magewire functionality accurately to a target theme's structure.

How do I adjust the Alpine loading order when using Magewire in Magento?▼

You adjust the Alpine loading order by creating a Magewire theme compatibility module that applies specific Alpine-load-order tweaks, ensuring Magewire initializes correctly within your Magento theme's JavaScript stack.

Does Magewire theming support Tailwind integration for Hyvä themes?▼

Yes, Magewire theming supports Tailwind integration, allowing you to wire dependency injection for theme features and adjust Tailwind pipelines when connecting Magewire to Hyvä or similar Tailwind-based Magento themes.

Do I need PSR-4 autoloading for a Magewire theme compatibility module?▼

Yes, proper PSR-4 autoloading is enforced for Magewire theme compatibility modules to ensure that extension patterns, theme-scoped features, and layout overrides are correctly recognized and loaded by Magento 2.

What is the best way to create a minimal Magewire compatibility module?▼

The best way to create a minimal Magewire compatibility module is to declare it with registration.php and etc/module.xml, then copy a bare compatibility starter pattern from extension-examples to wire your theme assets.

Related Skills

Explore More Software Engineering Skills→
caravanglorycaravanglory
2

module-scaffold

Create Magento 2 module skeleton files with registration.php, module.xml, and composer.json.

Community
Intermediate
InchooInchoo
18

Theme Development: Structure & Layout

Create and modify Magento 2 storefront and admin themes.

Official
Intermediate
InchooInchoo
18

Hyvä Theme: Setup & Alpine.js Components

Create Hyvä child themes and Alpine.js components in Magento 2.

Official
Intermediate
magewirephpmagewirephp
262

magewire

Build reactive, server-driven Magento 2 UI components with PHP and Alpine.js via AJAX updates.

Community
Advanced