---
name: "laravel-livewire-3-reactive-components"
description: "Build reactive, dynamic user interfaces without writing JavaScript using Laravel Livewire 3."
metadata:
  author: "Caleb Porzio"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "create livewire 3 component"
  - "wire:model live livewire"
  - "lazy load component livewire"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

# Livewire 3 Dynamic Frontend Interfaces in Blade

Implements Livewire 3: component classes with public properties, wire:model live binding, wire:click actions, lazy loading components (#[Lazy]), file uploads with wire:model='photo', and Alpine.js integration.

## When to Invoke
Invoke this skill whenever you need to:
- create livewire 3 component
- wire:model live livewire
- lazy load component livewire

## Execution SOP & Rules
1. Create component: php artisan make:livewire SearchUsers.
2. Define properties and actions in PHP class: public string $query = ''; public function search() { ... }.
3. Render in Blade: <input wire:model.live.debounce.300ms='query' />.
4. Add lazy placeholder: public function placeholder() { return view('skeletons.search'); }.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.