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

@@ -6,6 +6,10 @@
         <code>--md-sys-motion-*-duration</code>. Reduced motion makes all of them instant.
     </p>
 
+    <p class="max-w-3xl type-body-md text-on-surface-variant" data-test="when-to-use">
+        Position, size and shape move on the spatial springs, which overshoot — <code>fast</code> for small elements, <code>slow</code> for large ones. Colour and opacity move on the effects springs, which never overshoot. Always pair an easing with its duration; everything that moves goes through these tokens, so reduced motion makes it instant. The Standard scheme (<code>motion.scheme</code>) swaps the spatial springs for a restrained set.
+    </p>
+
     <button type="button" class="state-layer focus-ring rounded-corner-full bg-primary px-6 py-2.5 type-label-lg text-on-primary" x-on:click="moved = ! moved">
         Move
     </button>