frontend-patternslisted

## Constraints - Apply `@rules/laravel/livewire.mdc` — class in `app/Livewire`, view in `resources/views/livewire`, extend `Livewire\Component`; components are slim entry points; delegate business logic to Actions/Services; inject dependencies via `boot()`, never as method params; Blade stays presentation-only. - Apply `@rules/laravel/filament.mdc` — prefer Filament form/table components for admin UIs; custom Blade+Tailwind needs a registered theme. - Apply `@rules/laravel/architecture.mdc` — keep query/business logic out of views and components. - Apply `@rules/sql/optimalize.mdc` — eager-load to avoid N+1 in loops rendered by Blade. - Stack is Blade + Livewire + Alpine.js + Filament + Tailwind. No React/Vue/Next — never output `useState`/`useEffect`/`useMemo`/JSX/Framer Motion/React Query. ## Use when - Composing UI from Blade/Livewire components. - Deciding where state lives (Livewire vs Alpine). - Optimizing render/network cost of a Livewire view. - Building forms with validation. - Handling loading, empty, error, and offline states. --- ## Component composition Compose; do not inherit. Prefer small components with slots over big configurable ones. ```blade {{-- resources/views/components/card.blade.php (anonymous component) --}} @props(['variant' => 'default']) <div {{ $attributes->class(['card', 'card-outlined' => $variant === 'outlined']) }}> {{ $slot }} </div> ``` ```blade <x-card variant="outlined"> <x-slot:header>Title</x-slot:header> Content </x-c