livewire-development
This skill guides you through building reactive Livewire 4 components using wire directives like wire:model, wire:click, and wire:loading. It covers component creation in single-file, multi-file, and class-based formats, plus Livewire 4's new features including islands, async actions, and deferred loading. Learn best practices for testing, validation, and debugging interactive components.
Livewire Development helps you build reactive Livewire 4 components with wire directives and real-time UI updates.
AI-generated summary based on this skill's SKILL.md
Install
spatie/freek.dev/livewire-development · repository language: PHP
git clone https://github.com/spatie/freek.dev
cp -r freek.dev/.claude/skills/livewire-development ~/.claude/skills/livewire-developmentnpx skillfed install spatie/freek.dev/livewire-developmentFrequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I create Livewire components?
Livewire-development teaches you to build reactive components in single-file, multi-file, and class-based formats. Start by defining a Livewire class with public properties and methods, then render a Blade view. Use wire:model to bind form inputs, wire:click for event handling, and wire:loading to show loading states during async operations. The skill covers both traditional and Livewire 4's new islands and async actions patterns.
What are wire directives and how do I use them?
Livewire-development explains that wire directives enable real-time reactivity without page reloads. Key directives include wire:model (two-way data binding), wire:click (event listeners), wire:loading (conditional rendering during requests), wire:intersect (lazy loading), and wire:sort (sorting). You'll learn the difference between wire:model.live (immediate updates) and debounced versions, plus how to chain directives for complex interactions.
How do I test and debug Livewire component behavior?
Livewire-development covers testing strategies including unit tests for component logic and feature tests for user interactions. Debug using Laravel's built-in tools and Livewire's debugging output. The skill teaches you to identify and fix re-rendering issues, validate component state changes, and optimize performance. Learn best practices for form validation, error handling, and tracing async action execution.
What's new in Livewire 4 and how do I migrate?
Livewire-development includes a migration guide for Livewire v4's breaking changes and new features like islands, async actions, and deferred loading. Understand how to convert between component formats, update wire directives syntax, and leverage performance improvements. The skill helps you adopt new patterns while maintaining backward compatibility where possible.
How do I build real-time updates with Livewire?
Livewire-development shows how to create interactive, responsive UIs using reactive properties and wire directives. Combine wire:model.live for immediate input binding with wire:click for button actions and wire:loading for user feedback. Learn to implement form validation, multi-step wizards, and dynamic lists. The skill covers Alpine.js integration for enhanced interactivity and best practices for maintaining performance at scale.
What's the difference between wire:model.live and debounced?
Livewire-development explains that wire:model.live updates component state immediately on every keystroke, ideal for instant feedback. Debounced versions (wire:model.debounce or wire:model.throttle) delay updates by a set interval, reducing server requests during rapid input changes. Choose live for critical validations, debounce for search or autocomplete to balance responsiveness with server load.
SKILL.md
rendered from the published skill — quoted content, verbatim
Livewire Development
When to Apply
Activate this skill when:
- Creating or modifying Livewire components
- Using wire: directives (model, click, loading, sort, intersect)
- Implementing islands or async actions
- Writing Livewire component tests
Documentation
Use search-docs for detailed Livewire 4 patterns and documentation.
Basic Usage
Creating Components
<code-snippet name="Component Creation Commands" lang="bash">
Single-file component (default in v4)
{{ $assist->artisanCommand('make:livewire create-post') }}
Multi-file component
{{ $assist->artisanCommand('make:livewire create-post --mfc') }}
Class-based component (v3 style)
{{ $assist->artisanCommand('make:livewire create-post --class') }}
With namespace
{{
(truncated - see the full file via the links below)
Read as markdown · JSON record · Browse the source repository
File tree — 2 files
.claude/skills/livewire-development/SKILL.md
.claude/skills/livewire-development/reference/javascript-hooks.md