livewire-material/resources/boost/skills/livewire-material-development/SKILL.md

name, description

name	description
livewire-material-development	Build Laravel and Livewire views with Livewire Material's Material 3 Expressive Blade components — props, slots, theming and the Livewire traps each component handles.

Livewire Material Development

When to use this skill

Use this skill when writing or changing any Blade view, Livewire component view or layout in an application that requires nonameweb/livewire-material, and when styling, theming or testing such views.

Setup

The package ships CSS and JavaScript that the application imports from vendor/, after Tailwind:

/* resources/css/app.css */
@import 'tailwindcss';
@import '../../vendor/nonameweb/livewire-material/resources/css/material.css';
@source '../../vendor/nonameweb/livewire-material/resources/views';
@source '../../vendor/nonameweb/livewire-material/src';

// resources/js/app.js
import '../../vendor/nonameweb/livewire-material/resources/js/material.js'

Composer packages must be installed before the Vite build (in Dockerfiles and CI alike), or these imports have nothing to read.

Conventions

• Components are anonymous Blade components: <x-name> without a prefix, or <x-{prefix}name> when config('livewire-material.prefix') is set.
• The showcase at /material (local only, MATERIAL_SHOWCASE to force it) renders every component with its Blade snippet.

Components

Each component the package ships is listed here with its props and slots.

Livewire traps

• Blade directives do not compile inside a component tag's attributes: <x-foo x-show="ok(@js($value))"> reaches the browser as literal text. On a component tag use {{ }} and :prop bindings, or put the Alpine on a plain element inside the slot.
• Never pass hidden, a display utility or a position (absolute, relative) to a component: it is merged beside the component's own and whichever Tailwind emits last wins. Wrap the component in an element that carries it. A variant that only hides (max-sm:hidden) is safe.
• $attributes->wire('model')->value() is false, not null, when there is no wire:model, and filled(false) is true. Normalise with ?: null.
• End every statement in a multi-line Alpine attribute with ;: an inline @if … @endif inside it swallows the newline after it.