skills.rest
hekivo
hekivoOFFICIAL
Explore all skills by this author →
WebsiteGitHub

superpowers-sage:acorn-livewire

Build interactive WordPress interfaces with Livewire v3 in Sage themes.

13|Updated Mar 19, 2026
Search Tags:#wordpress#livewire#blade components#wire:model#sage#acorn#real-time ui
One-click install
npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-acorn-livewire-hekivo
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: superpowers-sage:acorn-livewire
Source: https://github.com/hekivo/superpowers-sage/tree/main/skills/acorn-livewire
Command: npx skills add https://github.com/hekivo/superpowers-sage --skill superpowers-sage-acorn-livewire-hekivo

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires lando, and includes scripts (resource) and references (resource) components.

What problem does it solve?

This Skill helps you build interactive, server-driven WordPress interfaces with Livewire components using the Roots Acorn/Sage workflow, without writing custom JavaScript for UI reactivity.

Core Features & Use Cases

  • Livewire component creation & conventions: Generates properly named Livewire PHP classes and Blade views in the correct locations for Sage/Acorn (e.g., PascalCase → kebab-case view tags), including guidance for use in templates.
  • Real-time and state-safe UI patterns: Uses wire:model variants (including wire:model.live and debounced live bindings), computed properties, and lifecycle hooks like mount/hydrate to keep payloads small and behavior predictable.
  • Sage integration & required layout directives: Ensures @livewireStyles and @livewireScripts are correctly placed in app layouts so Livewire endpoints and hydration work reliably.
  • Optional advanced topics: Covers Alpine.js interop (including $wire.entangle), file uploads via WithFileUploads, and common error recovery like hydration and missing root element issues.

Quick Start

Generate a Livewire component named ContactForm by running this instruction to your agent: "Create a Livewire component ContactForm in my Sage theme using Acorn, and update my layout with @livewireStyles in the head and @livewireScripts before </body>."

Frequently Asked Questions about superpowers-sage:acorn-livewire

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

FAQPage Schema
How do I build real-time UI components in a WordPress Sage theme without custom JavaScript?▼

Build real-time UIs in Sage by generating Livewire v3 PHP classes and Blade views via Acorn, using wire:model for reactive server-driven state without writing custom JavaScript.

Where do I place @livewireStyles and @livewireScripts in my Acorn Sage layout?▼

Place @livewireStyles inside the head section and @livewireScripts before the closing body tag of your Acorn Sage layout to ensure Livewire endpoints and component hydration work reliably.

How do I control request frequency for live form inputs using Livewire and Acorn?▼

Control request frequency for live form inputs by using wire:model.live with debounced bindings and #[Computed] properties in your Livewire components to keep payloads small and predictable.

Does Livewire v3 work with Roots Acorn and Sage for server-validated workflows?▼

Yes, Livewire v3 works with Roots Acorn and Sage by following PascalCase class naming, kebab-case Blade view tags, and Acorn lifecycle rules to execute server-validated workflows inside themes.

Why does my Livewire component fail hydration in a Sage theme?▼

Livewire hydration fails in Sage when layout directives are missing, the root element is absent, or component naming does not match Acorn conventions, causing reactive UI updates to break.

Can I use Alpine.js interop and file uploads with Livewire in WordPress?▼

Yes, use Alpine.js interop via $wire.entangle and handle file uploads using the WithFileUploads trait within Livewire components to extend reactive UI capabilities in Sage.

Related Skills

Explore More Software Engineering Skills→
codigodoleocodigodoleo
13

superpowers-sage:acorn-livewire

Integrate Livewire components into Sage/Acorn WordPress themes for server-driven UI.

Official
Advanced
GGEduGGEdu

livewire-patterns

Automate Livewire component lifecycle, wire directives, validation, and testing patterns.

Community
Intermediate
elab-developmentelab-development

fluxui-development

Create Flux UI components in Laravel Blade and Livewire workflows.

Official
Basic
HungNthHungNth

wp-interactivity-api

Diagnose and implement WordPress Interactivity API directives and store integration.

Community
Advanced