{"enrichment":{"faq":[{"a":"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.","q":"How do I create Livewire components?"},{"a":"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.","q":"What are wire directives and how do I use them?"},{"a":"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.","q":"How do I test and debug Livewire component behavior?"},{"a":"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.","q":"What's new in Livewire 4 and how do I migrate?"},{"a":"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.","q":"How do I build real-time updates with Livewire?"},{"a":"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.","q":"What's the difference between wire:model.live and debounced?"}],"shadow_tags":["reactive-forms","real-time-ui","component-testing","laravel-framework","frontend-interactivity","state-management","wire-directives","performance-tuning"],"summary_rewrite":"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."},"files":[{"bytes":5324,"path":".claude/skills/livewire-development/SKILL.md","sha256":"9673d605607723d90fff24fbc6cd78416fd82f0c3a833071d9defe60d23c02dc","url":"https://skillfed.io/files/spatie/freek.dev/livewire-development/eba51161/SKILL.md"}],"id":"spatie/freek.dev/livewire-development","links":{"html":"https://skillfed.io/spatie/freek.dev/livewire-development","md":"https://skillfed.io/spatie/freek.dev/livewire-development.md","repo":"https://github.com/spatie/freek.dev"},"meta":{"agents_supported":["claude-code"],"first_seen":"2026-07-28","forks":155,"language":"PHP","last_updated":"2026-07-22","license":"MIT","name":"livewire-development","publisher":"spatie","stars":651},"relations":{"similar":[{"id":"spatie/freek.dev/pest-testing"},{"id":"spatie/freek.dev/tailwindcss-development"},{"id":"Pixel-Process-UG/superkit-agents/laravel-boost"},{"id":"Pixel-Process-UG/superkit-agents/laravel-specialist"},{"id":"mwguerra/claude-code-plugins/testing"},{"id":"Jeffallan/claude-skills/laravel-specialist"},{"id":"spatie/guidelines-skills/spatie-javascript"},{"id":"marcelorodrigo/agent-skills/filament-pro"},{"id":"spatie/guidelines-skills/spatie-version-control"},{"id":"noartem/skills/laravel-migrations-and-factories"}]},"slug":{"owner":"spatie","repo":"freek.dev","skill":"livewire-development"},"version":"eba51161"}