Does this skill support both Livewire 3 and 4?

While the skill is optimized for Livewire 4's new features like Single-File Components and Islands, it understands the core patterns of Livewire and can assist in upgrading version 3 codebases.

How does it handle reactivity and state management?

The skill provides guidance on using wire:model.live for instant updates, wire:key for DOM diffing accuracy, and handling deferred loading for optimized performance.

Does it provide support for testing Livewire components?

Yes, it includes standardized snippets for writing tests that assert component state, method calls, and view rendering.

Can I use this skill for full-page Livewire components?

Yes, it includes specific patterns for Route::livewire() and updated configuration keys like component_layout and component_placeholder.

Livewire 4 Development

Name: Livewire 4 Development
Author: ndeblauw

byndeblauw

•

디자인 도구

Builds and manages high-performance, reactive UI components using Livewire 4's latest patterns and features.

This skill equips Claude with specialized knowledge for building modern Laravel applications using the Livewire 4 framework. It provides expert guidance on the transition from Livewire 3, focusing on new features like single-file components (SFC), isolated islands, and async actions. Whether you are scaffolding reactive interfaces with Artisan, debugging complex component lifecycles, or writing robust integration tests, this skill ensures implementation follows the latest performance and security best practices.

주요 기능

01Performance optimization using isolated @island regions and non-blocking async actions

02Standardized testing patterns for validating component state and interactions

03Implementation of advanced Livewire 4 directives including wire:sort, wire:intersect, and wire:ref

04Expertise in Single-File (SFC), Multi-File (MFC), and View-based component architectures

053 GitHub stars

06Guidance on the updated Livewire 4 JavaScript hooks and View Transitions API

사용 사례

01Building complex, real-time dashboards with parallel async actions and loading states

02Implementing interactive UI elements like drag-and-drop lists and viewport intersection triggers

03Migrating legacy Livewire 3 components to the modern Livewire 4 single-file format

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ndeblauw/boniato livewire-development

For use in Claude.ai and ChatGPT

Download Skill