Does this skill support Livewire 4 specifically?

Yes, it is specifically optimized for Livewire 4 features, including single-file components, islands, and the updated View Transitions API integration.

Can I convert between different component formats?

Yes, the skill provides specific commands and structural guidance for converting between single-file (SFC), multi-file (MFC), and class-based component styles.

How does it handle real-time UI updates?

It implements reactive patterns using wire:model.live and async actions to ensure high-performance, non-blocking UI updates without manual JavaScript.

Does it manage Alpine.js interactions?

Yes, it handles the integration of Alpine.js, which is bundled with Livewire 4, for managing client-side state and transitions.

Does it include testing support for components?

Yes, it provides boilerplate and best practices for writing Livewire component tests using the built-in Livewire::test() utility.

Livewire Reactive Development

Name: Livewire Reactive Development
Author: cardhouse

bycardhouse

0•

デザインツール

Builds and optimizes reactive full-stack components using Livewire 4 and Laravel.

This skill equips Claude with the specific patterns, directives, and architectural nuances of Livewire 4 to build dynamic, real-time user interfaces within the Laravel ecosystem. It streamlines the creation of components across multiple formats—including Single-File (SFC), Multi-File (MFC), and Class-based styles—while implementing advanced v4 features like islands and non-blocking async actions. By applying best practices for state management, testing, and performance optimization, this skill ensures your reactive UI is both robust and performant.

主な機能

01Standardized unit and integration testing patterns for components

02Implementation of Livewire 4 islands and non-blocking async actions

03Automated conversion between different Livewire component formats

040 GitHub stars

05Support for Single-File (SFC) and Multi-File (MFC) component architectures

06Advanced directive guidance for wire:model, wire:sort, and wire:intersect

ユースケース

01Building real-time dashboards and interactive data tables with minimal JavaScript

02Implementing optimized, deferred-loading UI elements for improved core web vitals

03Modernizing legacy Livewire 3 applications to utilize Livewire 4 performance features

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add cardhouse/what-did-they-call-music livewire-development

For use in Claude.ai and ChatGPT

Download Skill