Livewire Development

Use this skill for Laravel Livewire implementation, refactoring, debugging, security review, performance work, and tests.

This is the canonical Livewire skill in this repository. It consolidates the former livewire-patterns guidance and the public laravel-livewire topic into one version-aware workflow.

When the Livewire work is primarily UI/UX design, visual browser iteration, frontend flow shaping, or backend contract alignment, also use ui-agent-browser. Use e2e-playwright when browser behavior needs durable Playwright coverage.

Detect The Project First

1. Read composer.json and composer.lock or run composer show livewire/livewire to confirm the installed major version.
2. Inspect existing components, routes, tests, layouts, and config/livewire.php before choosing syntax.
3. Detect whether the project uses class-based components, Volt, Livewire v4 single-file components, multi-file components, or a mixture maintained for compatibility.
4. Follow the project's Blade, Alpine, Tailwind, Flux, Filament, and testing conventions when present.
5. Use documentation for the installed major version. Do not introduce v4-only attributes, directives, component paths, or routing into v2/v3 projects.

Read references/livewire-4.md when the project uses Livewire v4 or the task involves v4 migration, component formats, directives, attributes, or routing.

Implementation Workflow