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
Decision gist · record as of 2026-07-22
Livewire Development helps you build reactive Livewire 4 components with wire directives and real-time UI updates. 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.
Use it when
- Livewire-development explains that wire directives enable real-time reactivity without page reloads.
- Livewire-development covers testing strategies including unit tests for component logic and feature tests for user interactions.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
spatie/freek.dev/livewire-development · repository language: PHP
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently 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)
File tree — 2 files
.claude/skills/livewire-development/SKILL.md
.claude/skills/livewire-development/reference/javascript-hooks.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Create and develop interactive Livewire 4 components with reactive UI”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill guides you through testing Laravel applications with Pest 4, covering unit and feature tests, browser testing with real browsers, and architecture validation. It handles test organization, assertions, mocking, datasets, and debugging—activating whenever you're writing tests, adding assertions, or verifying functionality.
Laravel Specialist guides you through designing and maintaining Laravel applications at production scale. It covers the full ecosystem—Eloquent relationships and query optimization, Blade and Livewire components, queue systems, middleware pipelines, and Pest testing—with a structured five-phase process from context discovery through optimization.
Testing generates comprehensive Pest test suites for FilamentPHP v4 components including resources, forms, tables, and authorization. It provides ready-to-use test patterns for list, create, edit, and view pages with built-in validation and bulk action testing.
Laravel Specialist guides you through building production-ready Laravel 10+ applications with type-safe Eloquent models, queue workers, API resources, and Livewire components. It enforces modern PHP 8.2+ patterns, eager loading, dependency injection, and >85% test coverage across feature and unit tests. Use it for architecting database schemas, implementing authentication flows, optimizing queries, and validating code against PSR-12 standards.
Dynamic-workflows is a comprehensive orchestration framework that enables teams to coordinate multiple specialized agents across diverse technology stacks. Built for Claude Code adoption at scale, it combines sprint-based workflows, automated browser testing, and intelligent code review systems to streamline development cycles and reduce rework.
LiveComponent lets you create interactive UI components in PHP and Twig that automatically re-render when users interact with them, all without writing JavaScript. Each user action triggers a server round-trip that updates the component and morphs the DOM, making it ideal for live search, real-time validation, dynamic filtering, and dependent form fields. Use it when your component's output depends on user input and requires server-side logic.