Internals and extension guide for the Magewire framework: directory layout (src/lib/dist/portman), Mechanisms vs Features, area-scoped DI (frontend/adminhtml), snapshot/state flow, layout containers, JS extension points, and Facades. Use when extending Magewire, creating custom Features or Mechanisms, debugging the framework itself, or understanding how the codebase is structured.
Reference for Magewire's framework-level backwards compatibility system. Use when migrating Magewire v1 (Livewire v2) code to v3, enabling BC on components, understanding wire:model / entangle / hook behavioral changes between v2 and v3, or working with the BC memo flag, deprecated v1 component APIs, and the #[HandleBackwardsCompatibility] attribute. Theme-agnostic — BC applies to any Magewire component in any Magento theme. For theme-specific BC JS implementations (e.g. Hyvä Checkout), see the matching theme's BC skill.
Use when writing, reviewing, or refactoring Magewire code for Magento 2 — components, PHTML templates, layout XML, DI configuration, Features, Mechanisms, synthesizers, lifecycle hooks, event handling, and JavaScript integration. Trigger phrases include: component design, property handling, security patterns, template rendering, DI registration, snapshot serialization, state management, architectural decisions. Also use for Magewire code reviews and refactoring. Covers any task involving Magewire PHP or JS patterns within Magento 2.
Use this skill whenever writing JavaScript for Magento 2 themes that are not RequireJS-driven. Covers CSP-compatible components, PHP-driven reactivity via Magewire, AlpineJS integration with Magewire lifecycle hooks, and reusable multi-theme JavaScript structure. Always apply as the default JS convention for non-RequireJS Magento 2 themes. Do NOT use for RequireJS-driven themes or server-side PHP Magewire component logic.
Reference for Portman — the dev-only CLI tool that ports Livewire PHP into Magewire by downloading upstream source, merging augmentations, transforming namespaces, and writing the result to dist/. Use when syncing Magewire with a new Livewire release, writing augmentation files in portman/Livewire/, running portman build/watch, or understanding the relationship between lib/Livewire, portman/, and dist/.
Reference for Magewire — Magento 2's reactive component framework inspired by Laravel Livewire v3. Use when building, debugging, or explaining Magewire components, wire:* directives, lifecycle hooks, events, loading states, or any PHP/JS component API. Auto-load when working in a Magewire component class or PHTML template.
Use when building, extending, or debugging a theme-specific Magewire integration for Magento 2 — creating a new theme compatibility module, overriding Magewire layout containers for a theme, registering theme-scoped Features/observers/directives, wiring Alpine loading order for Hyvä/Luma/Breeze/Backend themes, or packaging theme-specific Tailwind CSS. Trigger phrases include: theme module, compatibility module, theme integration, `themes/Hyva`, `themes/Luma`, Hyvä Magewire integration, adminhtml Magewire theming, theme layout override, per-theme Feature, theme-scoped DI, Tailwind in a Magewire theme. Apply whenever the user mentions anything under `themes/` or asks how to make Magewire work with a specific Magento theme. Distinguish from `magewire-javascript` (which is about writing CSP-safe JS for any theme) — this skill is about the **module plumbing** around a theme.
Hyvä Checkout-specific backwards compatibility layer for Magewire. Use when migrating Hyvä Checkout v1 (Livewire v2) components to Magewire v3, debugging the hyva-checkout-main auto-enable rule, or editing the JS BC shims under themes/Hyva (wire:model rewriting, entangle live-by-default, deprecated hook/event re-triggering, component $wire proxy). Triggers: Hyvä Checkout BC, SupportHyvaCheckoutBackwardsCompatibility, hyva-checkout-main, makeComponentBackwardsCompatible, themes/Hyva BC templates.