The Complete Production SOP: How to Deploy and Run Vaul Unstyled iOS-Style Mobile Drawer Gesture Primitive in Autonomous AI Agents

---
name: "vaul-mobile-drawer-gesture"
description: "Build fluid, touch-friendly mobile bottom drawers with physics-based drag-to-dismiss."
metadata:
  author: "Emil Kowalski"
  version: "1.0.0"
  runtime_compatibility:
    - "codex"
    - "claude-code"
    - "cursor"
    - "windsurf"
triggers:
  - "build mobile bottom drawer vaul"
  - "snap points vaul drawer"
  - "drag to dismiss drawer"
permissions:
  fs_read: true
  fs_write: "workspace"
  shell_exec: false
  net_access: false
---

'use client';

import * as React from 'react';
import { Drawer } from 'vaul';

interface MobileDrawerProps {
  open?: boolean;
  onOpenChange?: (open: boolean) => void;
  trigger?: React.ReactNode;
  title: string;
  description?: string;
  children: React.ReactNode;
  snapPoints?: (string | number)[];
}

export function MobileDrawer({
  open,
  onOpenChange,
  trigger,
  title,
  description,
  children,
  snapPoints = ['320px', 1],
}: MobileDrawerProps) {
  const [snap, setSnap] = React.useState<number | string | null>(snapPoints[0]);

  return (
    <Drawer.Root
      open={open}
      onOpenChange={onOpenChange}
      snapPoints={snapPoints}
      activeSnapPoint={snap}
      setActiveSnapPoint={setSnap}
      shouldScaleBackground
    >
      {trigger && <Drawer.Trigger asChild>{trigger}</Drawer.Trigger>}
      <Drawer.Portal>
        <Drawer.Overlay className="fixed inset-0 z-50 bg-black/40 backdrop-blur-sm transition-opacity duration-300" />
        <Drawer.Content className="fixed bottom-0 left-0 right-0 z-50 mt-24 flex max-h-[96%] flex-col rounded-t-[10px] bg-white dark:bg-zinc-900 outline-none">
          <div className="flex-1 overflow-y-auto rounded-t-[10px] p-4">
            <div className="mx-auto mb-4 h-1.5 w-12 flex-shrink-0 rounded-full bg-zinc-300 dark:bg-zinc-700" />
            <div className="mx-auto max-w-md">
              <Drawer.Title className="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
                {title}
              </Drawer.Title>
              {description && (
                <Drawer.Description className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
                  {description}
                </Drawer.Description>
              )}
              <div className="mt-4">{children}</div>
            </div>
          </div>
        </Drawer.Content>
      </Drawer.Portal>
    </Drawer.Root>
  );
}

# Example invoking Claude Code with explicit trigger phrase
claude "build mobile bottom drawer vaul for user profile settings with snap points ['250px', '500px', 1] and drag to dismiss"

{
  "scripts": {
    "typecheck": "tsc --noEmit",
    "lint": "next lint || eslint ."
  }
}