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/icons.blade.php

@@ -25,6 +25,10 @@
         the 20 cut: <code>&lt;x-icon name="…" optical="20" class="size-5" /&gt;</code>.
     </p>
 
+    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+        <code>filled</code> means active or selected; <code>optical="20"</code> 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.
+    </p>
+
     <div class="flex flex-wrap items-center gap-4">
         <label class="flex min-w-72 flex-1 items-center gap-2 rounded-corner-xs border border-outline px-3 py-2 focus-within:outline-3 focus-within:outline-secondary">
             <x-livewire-material::icon name="search" class="size-5 text-on-surface-variant" />