Back to Skills

laravel-livewire

verified

Build reactive components with Livewire 3, wire:model, actions, lifecycle hooks, Volt, and Folio. Use when creating interactive UI without JavaScript, forms, or real-time updates.

View on GitHub

Marketplace

fusengine-plugins

fusengine/agents

Plugin

fuse-laravel

development

Repository

fusengine/agents

plugins/laravel-expert/skills/laravel-livewire/SKILL.md

Last Verified

January 22, 2026

Install Skill

Select agents to install to:

Scope:
npx add-skill https://github.com/fusengine/agents/blob/main/plugins/laravel-expert/skills/laravel-livewire/SKILL.md -a claude-code --skill laravel-livewire

Installation paths:

Claude
.claude/skills/laravel-livewire/
Powered by add-skill CLI

Instructions

# Laravel Livewire 3

## Documentation

### Livewire & Related
- [folio.md](docs/folio.md) - File-based routing
- [precognition.md](docs/precognition.md) - Live validation
- [prompts.md](docs/prompts.md) - CLI prompts
- [reverb.md](docs/reverb.md) - WebSockets

## Component Class

```php
<?php

declare(strict_types=1);

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithPagination;
use Livewire\Attributes\Rule;
use Livewire\Attributes\Computed;

final class PostList extends Component
{
    use WithPagination;

    public string $search = '';

    #[Rule('required|min:3')]
    public string $title = '';

    #[Computed]
    public function posts()
    {
        return Post::query()
            ->when($this->search, fn ($q) => $q->where('title', 'like', "%{$this->search}%"))
            ->paginate(10);
    }

    public function create(): void
    {
        $this->validate();
        Post::create(['title' => $this->title]);
        $this->reset('title');
        $this->dispatch('post-created');
    }

    public function render()
    {
        return view('livewire.post-list');
    }
}
```

## Blade View

```blade
<div>
    <input type="text" wire:model.live.debounce.300ms="search">

    <form wire:submit="create">
        <input type="text" wire:model="title">
        @error('title') <span>{{ $message }}</span> @enderror
        <button type="submit">Create</button>
    </form>

    @foreach($this->posts as $post)
        <div wire:key="{{ $post->id }}">
            {{ $post->title }}
            <button wire:click="delete({{ $post->id }})" wire:confirm="Delete?">
                Delete
            </button>
        </div>
    @endforeach

    {{ $this->posts->links() }}
</div>
```

## Volt (Single-File)

```php
<?php
use function Livewire\Volt\{state, computed};

state(['count' => 0]);
$increment = fn () => $this->count++;
$doubled = computed(fn () => $this->count * 2);
?>

<div>
    <h1>{{ $count }}</h1>
    <p>Doubled: {{ $this->doubled }}</p>
    <

Validation Details

Front Matter
Required Fields
Valid Name Format
Valid Description
Has Sections
Allowed Tools
Instruction Length:
1773 chars