Laravel Livewire

laravel-livewire

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

majiayu000/claude-skill-registry·0installs663starsSecurity

SKILL.md

Full skill instructions

Laravel Livewire

Agent Workflow (MANDATORY)

Before ANY implementation, launch in parallel:

fuse-ai-pilot:explore-codebase - Check existing Livewire components
fuse-ai-pilot:research-expert - Verify Livewire 3 patterns via Context7
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

Always use wire:key in loops
Use wire:model.blur for validation, not .live everywhere
Debounce search inputs with .debounce.300ms
#[Locked] for sensitive IDs
authorize() in destructive actions
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	Creating components
Wire Directives	wire-directives.md	Data binding, events
Lifecycle	lifecycle.md	Hooks, mount, hydrate
Forms	forms-validation.md	Validation, form objects
Events	events.md	Dispatch, listen
Alpine	alpine-integration.md	$wire, @entangle
File Uploads	file-uploads.md	Upload handling
Nesting	nesting.md	Parent-child
Loading	loading-states.md	wire:loading, lazy
Navigation	navigation.md	SPA mode
Testing	testing.md	Component tests
Security	security.md	Auth, rate limit
Volt	volt.md	Single-file components

Advanced Features

Topic	Reference	When to Consult
Folio	folio.md	File-based routing
Precognition	precognition.md	Live validation
Reverb	reverb.md	WebSockets

Templates (Complete Code)

Template	When to Use
BasicComponent.php.md	Standard component
FormComponent.php.md	Form with validation
VoltComponent.blade.md	Volt patterns
DataTableComponent.php.md	Table with search/sort
FileUploadComponent.php.md	File uploads
NestedComponents.php.md	Parent-child
ComponentTest.php.md	Testing patterns

Quick Reference

Basic Component

class Counter extends Component
{
    public int $count = 0;

    public function increment(): void
    {
        $this->count++;
    }

    public function render()
    {
        return view('livewire.counter');
    }
}

Volt Functional

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

state(['count' => 0]);

$increment = fn() => $this->count++;
?>

<button wire:click="increment">{{ $count }}</button>

Wire Directives

<input wire:model.blur="email">
<input wire:model.live.debounce.300ms="search">
<button wire:click="save" wire:loading.attr="disabled">Save</button>

Best Practices

DO

Use wire:key in @foreach loops
Debounce search/filter inputs
Use Form Objects for reusable logic
Test with Livewire::test()
#[Locked] for IDs, #[Computed] for derived data

DON'T

wire:model.live on every field
Query in render() method
Forget authorization in actions
Skip wire:key in loops
Store sensitive data in public properties

Install skill

Copy and run in your terminal

npx -y skills add https://github.com/majiayu000/claude-skill-registry --skill laravel-livewire

View on GitHub

skills/data/laravel-livewire/SKILL.md

More Security skills

View all

Security

supabase

Handles the full Supabase workflow from schema changes to deployment, with built-in security guardrails that catch common traps like RLS...

2.7K 308.9K

View

Security

neon-postgres

Comprehensive guides and best practices for Neon Serverless Postgres, covering setup, connection methods, authentication, and platform APIs.

98 216.2K

View

Security

firebase-auth-basics

Guide for setting up and using Firebase Authentication. Use this skill when the user's app requires user sign-in, user management, or secure data access using auth rules.

462 163.8K

View

Security

firebase-security-rules-auditor

A skill to evaluate how secure Firestore security rules are. Use this when Firestore security rules are updated to ensure that the generated rules are extremely secure and robust.

462 127.7K

View

Security

firebase-ai-logic-basics

Official skill for integrating Firebase AI Logic (Gemini API) into web applications. Covers setup, multimodal inference, structured output, and security.

462 125.1K

View

Security

better-auth-best-practices

Complete Better Auth server and client setup with database adapters, session management, plugins, and security configuration.

222 118.2K

View

Security

Deploy and manage projects on Vercel using token-based authentication. Use when working with Vercel CLI using access tokens rather than interactive login — e.g. "deploy to vercel", "set up vercel", "add environment variables to vercel".

31.9K 116.1K

View

Security

cloudflare

Complete Cloudflare platform integration with decision trees for compute, storage, AI, networking, security, and infrastructure-as-code.

3K 110.7K

View

Security

azure-compliance

Run Azure compliance and security audits with azqr plus Key Vault expiration checks. Covers best-practice assessment, resource review, policy/compliance validation, and security posture checks. WHEN: compliance scan, security audit, BEFORE running azqr (compliance cli tool), Azure best practices, Key Vault expiration check, expired certificates, expiring secrets, orphaned resources, compliance assessment.

253 103K

View