livewire-development

Develop reactive Livewire 4 components with wire directives and testing.

Updated Jan 5, 2026

Search Tags:#authorization #laravel #reactivity #livewire #component-testing #wire-directives

Ready to run

npx skills add https://github.com/TijmenWierenga/fitapp --skill livewire-development-tijmenwierenga

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: livewire-development
Source: https://github.com/TijmenWierenga/fitapp/tree/main/.junie/skills/livewire-development
Command: npx skills add https://github.com/TijmenWierenga/fitapp --skill livewire-development-tijmenwierenga

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Livewire development guidance to create, modify, and debug reactive Livewire 4 components with proper use of wire directives, testing, and real-time interactivity, reducing boilerplate and errors.

Core Features & Use Cases

Reactive Livewire 4 component creation and modification with directives such as wire:model, wire:click, and wire:loading
Debugging component behavior, implementing islands and async actions, and writing component tests
Use Case: When building real-time user interfaces, leverage this skill to implement responsive components, enforce at-action authorization patterns, and ensure test coverage.

Quick Start

Follow the guidance in this skill to create and wire a Livewire 4 component and write tests.

Frequently Asked Questions about livewire-development

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

FAQPage Schema

How do I create reactive Livewire 4 components with wire:model and wire:click directives?▼

Reactive Livewire 4 components use wire directives like wire:model and wire:click to handle real-time user interactions. This approach reduces boilerplate by managing reactivity directly within the component structure.

How does Livewire enforce authorization at the action level?▼

Livewire enforces authorization at the action level by applying checks directly within component methods. This ensures user permissions are validated before executing wire directive actions like clicks or model updates.

What is the best way to test Livewire component behavior and reactivity?▼

The best way to test Livewire components is by writing dedicated component tests that simulate wire directives and reactive behavior. This ensures your real-time interfaces and at-action authorization function correctly.

Can I use Livewire debugging for async actions and islands?▼

Yes, Livewire debugging supports inspecting component behavior including async actions and islands. This allows you to identify and resolve issues in reactive data flow and real-time interactivity efficiently.

Why does my Livewire component reactivity fail when using wire:loading?▼

Livewire component reactivity may fail if wire:loading is misconfigured or disconnected from the underlying wire:model state. Debugging the component behavior helps trace directive dependencies and resolve loading state mismatches.