--- name: livewire-material-development description: Build Laravel and Livewire views with Livewire Material's Material 3 Expressive Blade components — props, slots, colour roles, type, shape, motion, theming, toasts, the design guard, 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 Composer packages must be installed before the Vite build (in Dockerfiles and CI alike), because the application's build imports from `vendor/`: ```css /* resources/css/app.css */ @import 'tailwindcss'; @import '../../vendor/nonameweb/livewire-material/resources/css/material.css'; @import './material-scheme.css'; @source '../../vendor/nonameweb/livewire-material/resources/views'; @source '../../vendor/nonameweb/livewire-material/src'; ``` ```js // resources/js/app.js import '../../vendor/nonameweb/livewire-material/resources/js/material.js' ``` Every layout puts the theme script in `
`, before `@vite`: ```blade