Add runtime skin contract and docs

apps/docs/.storybook/preview.ts

@@ -1,6 +1,12 @@
 import "../src/preview.css";
 
 import type { Preview } from "@storybook/react";
+import {
+  defaultSkin,
+  setSkin,
+  skinDetails,
+  skinNames
+} from "@ai-ui/ui";
 import {
   defaultMotionMode,
   defaultTheme,
@@ -34,10 +40,22 @@ const preview: Preview = {
           title: modeName === "system" ? "Motion / System" : "Motion / Reduced"
         }))
       }
+    },
+    skin: {
+      description: "Preview component skin",
+      toolbar: {
+        icon: "mirror",
+        dynamicTitle: true,
+        items: skinNames.map((skinName) => ({
+          value: skinName,
+          title: skinDetails[skinName].label
+        }))
+      }
     }
   },
   initialGlobals: {
     motion: defaultMotionMode,
+    skin: defaultSkin,
     theme: defaultTheme
   },
   parameters: {
@@ -63,8 +81,10 @@ const preview: Preview = {
       if (typeof document !== "undefined") {
         setTheme(context.globals.theme ?? defaultTheme);
         setMotionMode(context.globals.motion ?? defaultMotionMode);
+        setSkin(context.globals.skin ?? defaultSkin);
 
         document.body.dataset.theme = context.globals.theme ?? defaultTheme;
+        document.body.dataset.skin = context.globals.skin ?? defaultSkin;
       }
 
       return Story();