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 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Qwx5USif3wFFmxtHg5U1g9

resources/views/showcase/sections/colour.blade.php

@@ -37,6 +37,10 @@
         <code>php artisan material:scheme</code>. Both themes side by side, whatever the page is showing.
     </p>
 
+    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+        When to use which: <code>primary</code> is the one key action on a screen; <code>secondary-container</code> is the quiet fill (tonal buttons, selected navigation and chips); <code>tertiary</code> is a rare accent; <code>error</code>, <code>success</code>, <code>warning</code> and <code>info</code> mean state — the <code>-container</code> for a tinted panel, the role itself for its text and icon. Pair a role only with its <code>on-</code> partner. Ink is <code>on-surface</code>, lower emphasis <code>on-surface-variant</code>, decoration <code>outline</code>; never an opacity, because 38% means disabled. Every role changes with the contrast level below, which is why only roles are allowed.
+    </p>
+
     <p class="max-w-3xl type-body-md text-on-surface-variant">
         With colour profiles in <code>livewire-material.profiles</code>, the command generates each one under
         <code>&lt;html data-scheme&gt;</code>, and <code>&lt;x-scheme-picker&gt;</code> chooses between them. Without