optimize-livewire-component（优化 Livewire 组件）

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!).