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.
/plugin marketplace add fusengine/claude-code-plugins/plugin install fuse:laravel@fusengine-pluginsThis skill inherits all available tools. When active, it can use any tool Claude has access to.
docs/folio.mddocs/precognition.mddocs/prompts.mddocs/reverb.md<?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');
}
}
<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>
<?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>
<button wire:click="increment">+</button>
</div>
This skill should be used when the user asks about libraries, frameworks, API references, or needs code examples. Activates for setup questions, code generation involving libraries, or mentions of specific frameworks like React, Vue, Next.js, Prisma, Supabase, etc.
Applies Anthropic's official brand colors and typography to any sort of artifact that may benefit from having Anthropic's look-and-feel. Use it when brand colors or style guidelines, visual formatting, or company design standards apply.
Creating algorithmic art using p5.js with seeded randomness and interactive parameter exploration. Use this when users request creating art using code, generative art, algorithmic art, flow fields, or particle systems. Create original algorithmic art rather than copying existing artists' work to avoid copyright violations.