motion-ui-skill 2.0.0

package/references/craft/twitter-post.md

@@ -0,0 +1,53 @@
+---
+title: "Twitter Post"
+description: "Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/twitter-post.md"
+markdown: "references/craft/twitter-post.md"
+license: "MIT"
+---
+
+# Twitter Post
+
+> Tweet card with avatar, handle, timestamp, hashtags, and full engagement row. For social embeds, mockups, or feed previews.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py twitter-post --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { TwitterPostCard } from "@/components/socials/twitter-post-card";
+
+export function TwitterPostCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <TwitterPostCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### TwitterPostCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/twitter-profile.md

@@ -0,0 +1,53 @@
+---
+title: "Twitter Profile"
+description: "Twitter/X profile with cover, avatar, bio, location, website link, and follower counts. Follow button included."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/twitter-profile.md"
+markdown: "references/craft/twitter-profile.md"
+license: "MIT"
+---
+
+# Twitter Profile
+
+> Twitter/X profile with cover, avatar, bio, location, website link, and follower counts. Follow button included.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py twitter-profile --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { TwitterProfileCard } from "@/components/socials/twitter-profile-card";
+
+export function TwitterProfileCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <TwitterProfileCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### TwitterProfileCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/user-menu.md

@@ -0,0 +1,53 @@
+---
+title: "User Menu"
+description: "Account pill with avatar, name, and email that opens into profile, settings, messages, and sign out. The header dropdown every SaaS app needs, with keyboard shortcut labels."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/user-menu.md"
+markdown: "references/craft/user-menu.md"
+license: "MIT"
+---
+
+# User Menu
+
+> Account pill with avatar, name, and email that opens into profile, settings, messages, and sign out. The header dropdown every SaaS app needs, with keyboard shortcut labels.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py user-menu --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { UserMenuDropdown } from "@/components/dropdowns/user-menu-dropdown";
+
+export function UserMenuDropdownDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <UserMenuDropdown />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### UserMenuDropdown
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/user-profile.md

@@ -0,0 +1,53 @@
+---
+title: "User Profile"
+description: "Author byline on warm editorial paper — square portrait, serif name, and text links. Built for personal sites and portfolio sidebars."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/user-profile.md"
+markdown: "references/craft/user-profile.md"
+license: "MIT"
+---
+
+# User Profile
+
+> Author byline on warm editorial paper — square portrait, serif name, and text links. Built for personal sites and portfolio sidebars.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py user-profile --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { UserProfileCard } from "@/components/profile/user-profile-card";
+
+export function UserProfileCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <UserProfileCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### UserProfileCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/users-select-table.md

@@ -0,0 +1,53 @@
+---
+title: "Users Select Table"
+description: "Bulk-select users table with header checkbox and live selection count. Clean white admin pattern for permissions or exports."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/users-select-table.md"
+markdown: "references/craft/users-select-table.md"
+license: "MIT"
+---
+
+# Users Select Table
+
+> Bulk-select users table with header checkbox and live selection count. Clean white admin pattern for permissions or exports.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py users-select-table --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { UsersSelectTable } from "@/components/table/users-select-table";
+
+export function UsersSelectTableDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <UsersSelectTable />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### UsersSelectTable
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/voice-assistant.md

@@ -0,0 +1,52 @@
+---
+title: "Voice Assistant"
+description: "Animated equalizer bars and a mic button that flip between idle and listening. Builds the voice-AI moment without building the whole assistant."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/voice-assistant.md"
+markdown: "references/craft/voice-assistant.md"
+license: "MIT"
+---
+
+# Voice Assistant
+
+> Animated equalizer bars and a mic button that flip between idle and listening. Builds the voice-AI moment without building the whole assistant.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py voice-assistant --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { VoiceAssistantWidget } from "@/components/widgets/voice-assistant-widget";
+
+export function VoiceAssistantWidgetDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <VoiceAssistantWidget />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### VoiceAssistantWidget
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/wallet-pass.md

@@ -0,0 +1,52 @@
+---
+title: "Wallet Pass"
+description: "Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/wallet-pass.md"
+markdown: "references/craft/wallet-pass.md"
+license: "MIT"
+---
+
+# Wallet Pass
+
+> Flippable membership pass — gradient front with tier and expiry, QR grid on the back. Tap or hover to flip between sides.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py wallet-pass --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `next`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { WalletPassCard } from "@/components/wallet/wallet-pass-card";
+
+export function WalletPassCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <WalletPassCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### WalletPassCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/weather-snapshot.md

@@ -0,0 +1,52 @@
+---
+title: "Weather Snapshot"
+description: "Compact weather card with temperature, highs/lows, humidity, and wind — clear or rain variants."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/weather-snapshot.md"
+markdown: "references/craft/weather-snapshot.md"
+license: "MIT"
+---
+
+# Weather Snapshot
+
+> Compact weather card with temperature, highs/lows, humidity, and wind — clear or rain variants.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py weather-snapshot --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { WeatherSnapshotCard } from "@/components/others/weather-snapshot-card";
+
+export function WeatherSnapshotCardDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <WeatherSnapshotCard />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### WeatherSnapshotCard
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/week-strip-calendar.md

@@ -0,0 +1,52 @@
+---
+title: "Week Strip Calendar"
+description: "Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/week-strip-calendar.md"
+markdown: "references/craft/week-strip-calendar.md"
+license: "MIT"
+---
+
+# Week Strip Calendar
+
+> Horizontal week strip for booking and scheduling apps — arrow through weeks, tap a day to select.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py week-strip-calendar --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { WeekStripCalendar } from "@/components/calendar/week-strip-calendar";
+
+export function WeekStripCalendarDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <WeekStripCalendar />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### WeekStripCalendar
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/wifi-toggle.md

@@ -0,0 +1,52 @@
+---
+title: "Wifi Toggle"
+description: "The toggle you'd expect on an iPhone — network name, on/off switch, that familiar iOS weight. Drop it into any control panel or settings screen."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/wifi-toggle.md"
+markdown: "references/craft/wifi-toggle.md"
+license: "MIT"
+---
+
+# Wifi Toggle
+
+> The toggle you'd expect on an iPhone — network name, on/off switch, that familiar iOS weight. Drop it into any control panel or settings screen.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py wifi-toggle --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { WiFiToggleWidget } from "@/components/widgets/wifi-toggle-widget";
+
+export function WiFiToggleWidgetDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <WiFiToggleWidget />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### WiFiToggleWidget
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/craft/workspace-switcher.md

@@ -0,0 +1,52 @@
+---
+title: "Workspace Switcher"
+description: "Rectangular org bar that expands inline — workspace list opens inside the same bordered box, not a floating panel."
+category: "Components"
+publishedAt: "2026-07-09"
+updatedAt: "2026-09-17"
+documentation: "references/craft/workspace-switcher.md"
+markdown: "references/craft/workspace-switcher.md"
+license: "MIT"
+---
+
+# Workspace Switcher
+
+> Rectangular org bar that expands inline — workspace list opens inside the same bordered box, not a floating panel.
+
+## Install
+
+```bash
+# Install via motion-ui skill CLI:
+python scripts/install-component.py workspace-switcher --dest ./src
+```
+
+## Dependencies
+
+- `clsx`
+- `lucide-react`
+- `react`
+- `tailwind-merge`
+
+## Usage
+
+```tsx
+"use client";
+
+import { WorkspaceSwitcherDropdown } from "@/components/dropdowns/workspace-switcher-dropdown";
+
+export function WorkspaceSwitcherDropdownDemo() {
+  return (
+    <div className="flex items-center justify-center p-6">
+      <WorkspaceSwitcherDropdown />
+    </div>
+  );
+}
+```
+
+## API Reference
+
+### WorkspaceSwitcherDropdown
+
+| Prop | Type | Default | Required | Description |
+| :--- | :--- | :--- | :--- | :--- |
+| `className` | `string` | — | No | Additional CSS classes |

package/references/guides/baseline-ui-craft.md

@@ -0,0 +1,61 @@
+---
+title: "Baseline UI Craft & Anti-Slop Guidelines"
+description: "Opinionated design engineering standards to eliminate generic AI interface slop, enforce optical alignment, establish spacing rhythm, and elevate craft details."
+documentation: "references/guides/baseline-ui-craft.md"
+markdown: "references/guides/baseline-ui-craft.md"
+---
+
+# Baseline UI Craft & Anti-Slop Guidelines
+
+> The Design Engineer's playbook for high-craft user interfaces, synthesizing principles from [ibelick/ui-skills](https://github.com/ibelick/ui-skills) (`baseline-ui`) and [cosscom/coss](https://github.com/cosscom/coss) (Origin UI / Cal.com).
+
+---
+
+## 1. Eliminating "AI UI Slop"
+
+AI-generated interfaces frequently share telltale flaws:
+- Uniform generic purple/blue gradients with massive oversaturated blur spheres.
+- Excessive nested cards with 1px border lines everywhere.
+- Inconsistent spacing (e.g. mixing 13px, 15px, 22px without a scale).
+- Low-contrast light grey text on white backgrounds that fails accessibility.
+- Buttons and inputs that lack tactile press feedback or focus rings.
+- Jittery tabular numbers that jump horizontally as counts update.
+
+---
+
+## 2. The Craft Foundations
+
+### 1. Spacing & Rhythm
+- Use a strict $4\text{px}$ spatial scale (`p-1` through `p-8`).
+- Related elements should have half the distance of unrelated elements:
+  - Input label to input field: `mb-1.5` (6px)
+  - Input field to helper text / error message: `mt-1.5` (6px)
+  - Field group to next field group: `space-y-4` (16px) or `space-y-6` (24px)
+  - Card inner padding: `p-4` (mobile) to `p-6` (desktop)
+
+### 2. Optical Alignment & Icon Balance
+- **Centering Icons**: Icons inside circular buttons or badges rarely look centered with pure mathematical center coordinates due to visual weight. For example, play icons (`Play`) need a 1px offset to the right.
+- **Icon Sizing Proportions**:
+  - Small button (`h-8`): `size-3.5` or `size-4` icon
+  - Medium button (`h-9` / `h-10`): `size-4` or `size-4.5` icon
+  - Large button (`h-11` / `h-12`): `size-5` icon
+- **Icon-Only Buttons**: MUST always provide an explicit `aria-label` (e.g. `aria-label="Close dialog"`).
+
+### 3. Typography Hierarchy
+- Keep font weight variations disciplined: use `font-medium` (500) for interactive labels and subheadings, `font-semibold` (600) for primary section headings, and `font-normal` (400) for body copy. Avoid overusing `font-bold` (700) or `font-black` (900).
+- Always specify `tabular-nums` on numbers, timers, dates, and financial metrics.
+
+### 4. Interactive Feedback & Press Physics
+- Every pressable element must communicate its physical affordance:
+  - Hover: Subtle brightness lift or background fill (`hover:bg-muted/80`).
+  - Active Press: Tactile scale compression (`whileTap={{ scale: 0.97 }}`).
+  - Focus-Visible: Never use `outline-none` without an explicit replacement ring:
+    ```css
+    focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+    ```
+
+### 5. Micro-Interactions That Signal Craft
+- **Radial Spotlight on Hover**: Subtle cursor-following light cone across dark cards.
+- **Border Beams**: An animated highlight gradient that tracks along the perimeter of high-priority cards.
+- **Password Strength Indicators**: Live multi-bar strength meter with color-coded feedback (red, amber, emerald).
+- **Badge Pops**: Notification counter digits that pop in with a spring bounce when the count increments.