From 53d362622dff2e16ab55862640c6ef62533ddb62 Mon Sep 17 00:00:00 2001 From: Andreas Reinhold / reini Date: Mon, 14 Sep 2026 06:23:31 +0200 Subject: [PATCH] Say when to use each token on the showcase's foundation pages, and name both skills in the README The paragraphs restate the material-3 guideline's rules beside the tokens they govern (plan step 28); the README's AI agents section names the second guideline and skill (step 30). Co-Authored-By: Claude Fable 5.1 Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9 --- README.md | 4 ++-- resources/views/showcase/sections/colour.blade.php | 4 ++++ resources/views/showcase/sections/elevation.blade.php | 4 ++++ resources/views/showcase/sections/icons.blade.php | 4 ++++ resources/views/showcase/sections/motion.blade.php | 4 ++++ resources/views/showcase/sections/shape.blade.php | 4 ++++ resources/views/showcase/sections/type.blade.php | 4 ++++ 7 files changed, 26 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index ee4f01f5..f06ce01a 100644 --- a/README.md +++ b/README.md @@ -6,7 +6,7 @@ Material 3 Expressive components for Laravel and Livewire, built on Tailwind CSS - A colour scheme generated from one seed colour with Google's colour science (`php artisan material:scheme`), light and dark, and a theme that is chosen before the first paint. - The full Material Symbols Rounded set and the M3 Expressive shapes, drawn inline without an icon package. - Error pages and a Markdown mail theme in the same scheme. -- A showcase of every component in the application's own scheme, a design guard for tests, and Laravel Boost guidelines and a skill for AI agents. +- A showcase of every component in the application's own scheme, a design guard for tests, and for AI agents two Laravel Boost guidelines and two skills: the library's own, and Material 3's rules and tables beside its utilities. No JavaScript libraries beyond the Alpine that ships with Livewire. Browsers: Chrome 125+, Firefox 147+, Safari 18.4+. @@ -156,7 +156,7 @@ Two checks are opt-in: `forbidAbsolutes()` also fails on `bg-white` and `text-bl ## AI agents -With [Laravel Boost](https://github.com/laravel/boost), `php artisan boost:install` (or `boost:update --discover`) picks up the package's guideline and the `livewire-material-development` skill. +With [Laravel Boost](https://github.com/laravel/boost), `php artisan boost:install` (or `boost:update --discover`) picks up the package's two guidelines — the library's own, and `material-3`, a page of M3's rules an agent reads in every session — and two skills: `livewire-material-development` (every component, prop, slot and trap) and `material-3-design` (M3's colour roles, surfaces, elevation, shape, type, motion, states, window size classes and accessibility, with the library's utility beside each M3 name and Google's source page for each chapter). ## Developing the package diff --git a/resources/views/showcase/sections/colour.blade.php b/resources/views/showcase/sections/colour.blade.php index 6fa70d5c..c240d608 100644 --- a/resources/views/showcase/sections/colour.blade.php +++ b/resources/views/showcase/sections/colour.blade.php @@ -37,6 +37,10 @@ php artisan material:scheme. Both themes side by side, whatever the page is showing.

+

+ When to use which: primary is the one key action on a screen; secondary-container is the quiet fill (tonal buttons, selected navigation and chips); tertiary is a rare accent; error, success, warning and info mean state — the -container for a tinted panel, the role itself for its text and icon. Pair a role only with its on- partner. Ink is on-surface, lower emphasis on-surface-variant, decoration outline; never an opacity, because 38% means disabled. Every role changes with the contrast level below, which is why only roles are allowed. +

+

With colour profiles in livewire-material.profiles, the command generates each one under <html data-scheme>, and <x-scheme-picker> chooses between them. Without diff --git a/resources/views/showcase/sections/elevation.blade.php b/resources/views/showcase/sections/elevation.blade.php index ae4fca64..bcde41f5 100644 --- a/resources/views/showcase/sections/elevation.blade.php +++ b/resources/views/showcase/sections/elevation.blade.php @@ -5,6 +5,10 @@ Five shadow levels as shadow-elevation-*, for what floats over content.

+

+ Panels separate by tone first: the surface-container steps are a hierarchy of emphasis, not of height. Shadows are for what floats or lifts — 1 for elevated cards, buttons and modal sheets; 2 for menus, the navigation bar and a scrolled app bar; 3 for the FAB, dialogs, pickers and search; one level more on hover; nothing rests above 3. Fewer shadows carry more meaning. +

+
@foreach (['shadow-elevation-1', 'shadow-elevation-2', 'shadow-elevation-3', 'shadow-elevation-4', 'shadow-elevation-5'] as $shadow)
diff --git a/resources/views/showcase/sections/icons.blade.php b/resources/views/showcase/sections/icons.blade.php index aa7c51ed..bba669a6 100644 --- a/resources/views/showcase/sections/icons.blade.php +++ b/resources/views/showcase/sections/icons.blade.php @@ -25,6 +25,10 @@ the 20 cut: <x-icon name="…" optical="20" class="size-5" />.

+

+ filled means active or selected; optical="20" when an icon is drawn at 20px or less; one weight per group. An icon takes the size and colour of the text beside it. An icon-only control carries an accessible name; a decorative icon is hidden. +

+