Livewire Optimization Skill

Use this skill when creating or refactoring Livewire components to ensure they are performant and visually consistent with Flux UI.

When to use this skill

• When refactoring “slow” components.
• When creating new interactive UI elements.
• When working with search/filtering capabilities.

Workflow

1. Performance Attributes (Livewire 3)

• Computed Properties: Use #[Computed] instead of methods for expensive logic.

  #[Computed]
  public function users() {
      return User::where(...)->get(); // Cached for the request
  }
  

• URL Binding: Use #[Url] for filters to persist state.

  #[Url(history: true)]
  public $search = '';
  

• Security: Use #[Locked] for properties that should not be modified by the frontend (like IDs).

  #[Locked]
  public $postId;
  

• Real-time: Use wire:model.live.debounce.300ms="..." for search inputs to reduce server load.

2. UI Components (Flux UI)

The project uses Flux UI Free. Always prefer Flux components over manual HTML.

3. Javascript Integration

• Alpine.js: Do NOT load Alpine manually.
• Entanglement: Use @entangle only when necessary. Prefer $wire content.
• Hooks: Use livewire:init for global listeners.

4. Code Structure

• Methods: Keep them focused.
• Authorization: Always add authorize() checks or Gate calls inside methods (Livewire actions are public endpoints!).