motion-ui-skill 2.0.0

package/references/craft/sheen-pill-button.md

@@ -0,0 +1,51 @@
+---
+title: "Sheen Pill"
+description: "Frosted pill with layered shade veil, light band, and rim wire — hover brightens the sheen and clears the fill. Pass width, height, and highlight to tune the frame."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/sheen-pill-button.md"
+markdown: "references/craft/sheen-pill-button.md"
+license: "MIT"
+---
+
+# Sheen Pill
+
+> Frosted pill with layered shade veil, light band, and rim wire — hover brightens the sheen and clears the fill. Pass width, height, and highlight to tune the frame.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py sheen-pill-button --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SheenPillButton } from "@/components/buttons/sheen-pill-button";
+
+export function SheenPillButtonDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SheenPillButton />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SheenPillButton
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/slate-chip-switch.md

@@ -0,0 +1,51 @@
+---
+title: "Slate Chip Switch"
+description: "Smooth pill chip switch with a white thumb and sky on-state fill — a cleaner alternative to textured toggles."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/slate-chip-switch.md"
+markdown: "references/craft/slate-chip-switch.md"
+license: "MIT"
+---
+
+# Slate Chip Switch
+
+> Smooth pill chip switch with a white thumb and sky on-state fill — a cleaner alternative to textured toggles.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py slate-chip-switch --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SlateChipSwitch } from "@/components/buttons/slate-chip-switch";
+
+export function SlateChipSwitchDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SlateChipSwitch />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SlateChipSwitch
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/sleep-score.md

@@ -0,0 +1,52 @@
+---
+title: "Sleep Score"
+description: "Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/sleep-score.md"
+markdown: "references/craft/sleep-score.md"
+license: "MIT"
+---
+
+# Sleep Score
+
+> Sleep score in the DND face layout — sleeping mascot at the bottom, score and quality above, duration tucked below.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py sleep-score --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SleepScoreWidget } from "@/components/widgets/sleep-score-widget";
+
+export function SleepScoreWidgetDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SleepScoreWidget />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SleepScoreWidget
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/slide-to-confirm-button.md

@@ -0,0 +1,52 @@
+---
+title: "Slide to Confirm"
+description: "Drag the knob across the track to commit an action — snaps back if you release early, locks green when confirmed. Great for irreversible or high-intent actions."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/slide-to-confirm-button.md"
+markdown: "references/craft/slide-to-confirm-button.md"
+license: "MIT"
+---
+
+# Slide to Confirm
+
+> Drag the knob across the track to commit an action — snaps back if you release early, locks green when confirmed. Great for irreversible or high-intent actions.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py slide-to-confirm-button --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SlideToConfirmButton } from "@/components/buttons/slide-to-confirm-button";
+
+export function SlideToConfirmButtonDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SlideToConfirmButton />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SlideToConfirmButton
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/slow-living-polaroid.md

@@ -0,0 +1,52 @@
+---
+title: "Slow Living Polaroid"
+description: "Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/slow-living-polaroid.md"
+markdown: "references/craft/slow-living-polaroid.md"
+license: "MIT"
+---
+
+# Slow Living Polaroid
+
+> Dark editorial layout with a taped, tilted polaroid and lowercase lifestyle copy. Slow living, coffee brands, quiet product launches.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py slow-living-polaroid --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SlowLivingPolaroidCard } from "@/components/gallery/slow-living-polaroid-card";
+
+export function SlowLivingPolaroidCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SlowLivingPolaroidCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SlowLivingPolaroidCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/soft-pill-button.md

@@ -0,0 +1,51 @@
+---
+title: "Floating Pill"
+description: "Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/soft-pill-button.md"
+markdown: "references/craft/soft-pill-button.md"
+license: "MIT"
+---
+
+# Floating Pill
+
+> Floating rounded pill with a soft drop shadow — light or dark. Pass any children. Nudges down slightly on press.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py soft-pill-button --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SoftPillButton } from "@/components/buttons/soft-pill-button";
+
+export function SoftPillButtonDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SoftPillButton />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SoftPillButton
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/soft-spotlight-background.md

@@ -0,0 +1,51 @@
+---
+title: "Soft Spotlight"
+description: "Gallery stage light from above with a gentle vignette — product reveals, keynote heroes, and museum-style layouts."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/soft-spotlight-background.md"
+markdown: "references/craft/soft-spotlight-background.md"
+license: "MIT"
+---
+
+# Soft Spotlight
+
+> Gallery stage light from above with a gentle vignette — product reveals, keynote heroes, and museum-style layouts.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py soft-spotlight-background --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SoftSpotlightBackground } from "@/components/background-gradient/soft-spotlight-background";
+
+export function SoftSpotlightBackgroundDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SoftSpotlightBackground />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SoftSpotlightBackground
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/soft-ui-button.md

@@ -0,0 +1,51 @@
+---
+title: "Neumorphic Soft UI"
+description: "Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/soft-ui-button.md"
+markdown: "references/craft/soft-ui-button.md"
+license: "MIT"
+---
+
+# Neumorphic Soft UI
+
+> Universal soft-UI / neumorphic button — even light and dark shadows. Pass any children. Press flips to an inset look.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py soft-ui-button --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SoftUiButton } from "@/components/buttons/soft-ui-button";
+
+export function SoftUiButtonDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SoftUiButton />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SoftUiButton
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/spin-loader.md

@@ -0,0 +1,52 @@
+---
+title: "Spin Loader"
+description: "Minimal spinning loader built on a lucide icon — defaults to Loader, but pass any icon prop. Sizes: sm, md, lg."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/spin-loader.md"
+markdown: "references/craft/spin-loader.md"
+license: "MIT"
+---
+
+# Spin Loader
+
+> Minimal spinning loader built on a lucide icon — defaults to Loader, but pass any icon prop. Sizes: sm, md, lg.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py spin-loader --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SpinLoader } from "@/components/loaders/spin-loader";
+
+export function SpinLoaderDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SpinLoader />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SpinLoader
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/spotlight-bar.md

@@ -0,0 +1,52 @@
+---
+title: "Spotlight Bar"
+description: "Spotlight-style command search in the frosted dock shell — keyboard nav and suggestions."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/spotlight-bar.md"
+markdown: "references/craft/spotlight-bar.md"
+license: "MIT"
+---
+
+# Spotlight Bar
+
+> Spotlight-style command search in the frosted dock shell — keyboard nav and suggestions.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py spotlight-bar --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { SpotlightBar } from "@/components/docks/spotlight-bar";
+
+export function SpotlightBarDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <SpotlightBar />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### SpotlightBar
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/stacked-cards-effect.md

@@ -0,0 +1,52 @@
+---
+title: "Stacked Cards Effect"
+description: "Three skewed cards fanned behind a front hero card — hover brings subtle motion. Collection and portfolio layouts with depth, no Three.js required."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/stacked-cards-effect.md"
+markdown: "references/craft/stacked-cards-effect.md"
+license: "MIT"
+---
+
+# Stacked Cards Effect
+
+> Three skewed cards fanned behind a front hero card — hover brings subtle motion. Collection and portfolio layouts with depth, no Three.js required.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py stacked-cards-effect --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { StackedCardsEffect } from "@/components/others/stacked-cards-effect";
+
+export function StackedCardsEffectDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <StackedCardsEffect />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### StackedCardsEffect
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/stacked-folder-card.md

@@ -0,0 +1,52 @@
+---
+title: "Stacked Folder Card"
+description: "Three stacked folder cards with thick white borders and smooth hover rotation — back and middle peeks bring any card to the front."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/stacked-folder-card.md"
+markdown: "references/craft/stacked-folder-card.md"
+license: "MIT"
+---
+
+# Stacked Folder Card
+
+> Three stacked folder cards with thick white borders and smooth hover rotation — back and middle peeks bring any card to the front.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py stacked-folder-card --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { StackedFolderCard } from "@/components/files/stacked-folder-card";
+
+export function StackedFolderCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <StackedFolderCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### StackedFolderCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/stamp-postcard.md

@@ -0,0 +1,52 @@
+---
+title: "Stamp Postcard"
+description: "Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/stamp-postcard.md"
+markdown: "references/craft/stamp-postcard.md"
+license: "MIT"
+---
+
+# Stamp Postcard
+
+> Vintage postcard with landscape photo, postage stamp overlay, handwritten message, and posted-from address. Travel and lifestyle brands love this one.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py stamp-postcard --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { StampPostcardCard } from "@/components/gallery/stamp-postcard-card";
+
+export function StampPostcardCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <StampPostcardCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### StampPostcardCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |