laravel-livewire_skill

Overview

This skill provides patterns and templates for building reactive Laravel Livewire 3 components using Volt and Folio, enabling server-driven UI without writing custom JavaScript. It focuses on wire:model bindings, actions, events, Volt single-file components, and Folio file-based routing. The guidance emphasizes safe defaults, performance optimizations, and security checks for production-ready components.

How this skill works

The skill inspects component types and recommends a component pattern (class-based, Volt functional, Volt class, or inline) based on complexity. It enforces key Livewire rules such as using wire:key in loops, appropriate wire:model modifiers (.blur, .live.debounce.300ms), protected methods for internal logic, and authorization for destructive actions. It also surfaces templates and lifecycle, forms, events, testing, and advanced features like Reverb and Precognition for validation and WebSockets.

When to use it

• Build reactive server-driven UI without custom JavaScript
• Create forms with validation and file uploads that run on the server
• Implement search, filtering, and data tables with debounce and loading states
• Create single-file Volt components for quick UI pieces
• Use Folio when you want file-based routing with Livewire components

Best practices

• Always set wire:key in loops to avoid diffing bugs
• Prefer wire:model.blur for form inputs and wire:model.live.debounce.300ms for search fields
• Debounce search and filter inputs to reduce server load (e.g., .debounce.300ms)
• Keep sensitive identifiers locked (#[Locked]) and authorize destructive actions
• Avoid database queries in render(); use computed properties or mount to fetch data

Example use cases

• A form component with server-side validation, file uploads, and progress UI using Volt templates
• A paginated data table with search, sort, and debounce-powered filtering
• A nested parent-child component set communicating via events and dispatch/listen patterns
• A small interactive counter or embed using @volt inline for quick UI pieces
• A Folio-based page that maps routes to Volt components for SPA-like navigation