Does it provide help with testing Livewire components?

Yes, it includes patterns and snippets for writing robust Livewire component tests using the fluent testing API to assert state, events, and renders.

Does this skill support the new Livewire 4 Single-File Components?

Yes, it provides full support for creating and managing Single-File Components (SFC), which are the default format in Livewire 4, allowing you to keep PHP and Blade in one file.

Can I use this for Livewire 4 performance optimization?

Absolutely. It provides guidance on using @island for isolated updates, wire:click.async for non-blocking actions, and lazy loading to improve page performance.

How does it handle reactivity and data binding?

The skill assists with wire:model, wire:model.live, and wire:click directives, ensuring correct syntax for real-time updates and debounced data synchronization.

Laravel Livewire Development

Name: Laravel Livewire Development
Author: ndeblauw

byndeblauw

0•

Herramientas de Diseño

Develops reactive Laravel Livewire 4 components using modern patterns like single-file components, islands, and async actions.

This skill empowers developers to build dynamic, real-time Laravel applications using the full power of Livewire 4. It provides comprehensive support for creating and refactoring components across various formats—including Single-File (SFC), Multi-File (MFC), and class-based components. By providing deep expertise in Livewire directives, lifecycle hooks, and performance-optimizing features like component islands and async actions, this skill ensures that your reactive interfaces are performant, well-tested, and follow the latest architectural standards in the Laravel ecosystem.

Características Principales

01Automated Artisan command generation for component creation and conversion

02Optimization with Livewire 4 features like Islands (@island) and Async actions

03Support for Single-File (SFC), Multi-File (MFC), and view-based component architectures

040 GitHub stars

05Guidance on Livewire 4 breaking changes and performance best practices

06Expert implementation of wire: directives for model binding, events, and loading states

Casos de Uso

01Implementing complex drag-and-drop or viewport intersection features using native directives

02Migrating legacy Livewire components to modern v4 patterns like Single-File Components

03Building real-time dashboards and interactive UI elements without writing custom JavaScript

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add ndeblauw/kidicalmass livewire-development

For use in Claude.ai and ChatGPT

Download Skill