Claude Skills
CollectionsCompareWorkflowsNominate
Sign inSign up
© 2026 Curated Agent Skills·Learn more about Agent Skills
Back to repository

laravel-livewire

verified

Livewire 3 reactive components - wire:model, actions, events, Volt, Folio. Use when building reactive UI without JavaScript.

View on GitHub

Marketplace

fusengine-plugins

fusengine/agents

Plugin

fuse-laravel

development

Repository

fusengine/agents
3stars

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

Last Verified

February 2, 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

## Agent Workflow (MANDATORY)

Before ANY implementation, launch in parallel:

1. **fuse-ai-pilot:explore-codebase** - Check existing Livewire components
2. **fuse-ai-pilot:research-expert** - Verify Livewire 3 patterns via Context7
3. **mcp__context7__query-docs** - Check specific Livewire features

After implementation, run **fuse-ai-pilot:sniper** for validation.

---

## Overview

| Feature | Description |
|---------|-------------|
| **Components** | Reactive PHP classes with Blade views |
| **wire:model** | Two-way data binding |
| **Actions** | Call PHP methods from frontend |
| **Events** | Component communication |
| **Volt** | Single-file components |
| **Folio** | File-based routing |

---

## Critical Rules

1. **Always use wire:key** in loops
2. **Use wire:model.blur** for validation, not .live everywhere
3. **Debounce search inputs** with .debounce.300ms
4. **#[Locked]** for sensitive IDs
5. **authorize()** in destructive actions
6. **protected methods** for internal logic

---

## Decision Guide

### Component Type

```
Component choice?
├── Complex logic → Class-based component
├── Simple page → Volt functional API
├── Medium complexity → Volt class-based
├── Quick embed → @volt inline
└── File-based route → Folio + Volt
```

### Data Binding

```
Binding type?
├── Form fields → wire:model.blur
├── Search input → wire:model.live.debounce.300ms
├── Checkbox/toggle → wire:model.live
├── Select → wire:model
└── No sync → Local Alpine x-data
```

---

## Reference Guide

### Core Concepts (WHY & Architecture)

| Topic | Reference | When to Consult |
|-------|-----------|-----------------|
| **Components** | [components.md](references/components.md) | Creating components |
| **Wire Directives** | [wire-directives.md](references/wire-directives.md) | Data binding, events |
| **Lifecycle** | [lifecycle.md](references/lifecycle.md) | Hooks, mount, hydrate |
| **Forms** | [forms-validation.md](references/forms-validation.md) | Validation, f

Validation Details

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