frontend-patterns

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.

{{-- resources/views/components/card.blade.php (anonymous component) --}}
@props(['variant' => 'default'])
<div {{ $attributes->class(['card', 'card-outlined' => $variant === 'outlined']) }}>
    {{ $slot }}
</div>

<x-card variant="outlined">
    <x-slot:header>Title</x-slot:header>
    Content
</x-card>

• Anonymous components (view-only, in resources/views/components) for pure presentation.
• Class components (app/View/Components) only when the component needs PHP logic to prepare data.
• {{ $attributes }} forwards caller classes/attributes — merge, don't overwrite.
• Named slots (<x-slot:header>) replace prop-drilling content.

Livewire nesting

A "compound" UI is a parent Livewire component holding child Livewire components. Children are independent; pass data down via props and communicate up via events/listeners — never tight coupling.