CtrlK
BlogDocsLog inGet started
Tessl Logo

livewire-4

Build Livewire 4 components and applications. Use when creating reactive Laravel interfaces, single-file components, multi-file components, page components, forms, actions, or any Livewire-based UI. Triggers include "Livewire component", "wire:model", "wire:click", building interactive Laravel UIs, or working with Livewire 4 projects.

76

Quality

95%

Does it follow best practices?

Run evals on this skill

Adds up to 20 points to the overall score

View guide
SecuritybySnyk

Passed

No findings from the security scan

SKILL.md
Quality
Evals
Security

Livewire 4

Build dynamic, reactive interfaces with PHP — no JavaScript required.

Component Formats

Single-file (default, recommended)

<?php // resources/views/components/⚡todos.blade.php
use Livewire\Component;
new class extends Component {
    public $todos = [];
    public $todo = '';
    
    public function add()
    {
        $this->todos[] = $this->todo;
        $this->reset('todo');
    }
};
?>
<div>
    <input type="text" wire:model="todo">
    <button wire:click="add">Add</button>
    @foreach ($todos as $item)
        <li wire:key="{{ $loop->index }}">{{ $item }}</li>
    @endforeach
</div>

Multi-file (for complex components)

php artisan make:livewire post.create --mfc

Creates: resources/views/components/post/⚡create/ with separate .php, .blade.php, .js, .css files.

Page components

php artisan make:livewire pages::post.create

Route with: Route::livewire('/posts/create', 'pages::post.create');

Core Patterns

Properties

  • Public properties auto-available in Blade
  • Use $this->reset('prop') to reset
  • Use $this->fill([...]) for bulk assignment
  • Protected properties hidden from client (not persisted)

Data Binding

<input wire:model="title">           <!-- Syncs on action -->
<input wire:model.live="search">     <!-- Syncs on input -->
<input wire:model.blur="email">      <!-- Syncs on blur -->

Actions

<button wire:click="save">Save</button>
<button wire:click="delete({{ $id }})">Delete</button>
<form wire:submit="store">...</form>

Computed Properties

use Livewire\Attributes\Computed;

#[Computed]
public function posts()
{
    return Post::latest()->get();
}

Access in Blade: $this->posts

Event Modifiers

  • wire:click.prevent - preventDefault
  • wire:keydown.enter - specific key
  • wire:click.debounce.500ms - debounce
  • wire:submit.throttle - throttle

Loading States

<button wire:click="save" class="data-loading:opacity-50">
    Save
</button>
<span class="not-data-loading:hidden">Saving...</span>

Confirmation

<button wire:click="delete" wire:confirm="Are you sure?">Delete</button>

Security

Always validate and authorize — public properties can be manipulated client-side.

public function delete(Post $post)
{
    $this->authorize('delete', $post);
    $post->delete();
}

Detailed References

Load these as needed:

  • Components deep dive: See references/components.md
  • Properties & state: See references/properties.md
  • Actions & events: See references/actions.md
Repository
freekmurze/dotfiles
Path

config/claude/skills/livewire-4/SKILL.md

Commit

50345d3

Last updated
First committed

Is this your skill?

If you maintain this skill, you can claim it as your own. Once claimed, you can manage eval scenarios, bundle related skills, attach documentation or rules, and ensure cross-agent compatibility.

Claim skill