---
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
---

# Vaul Unstyled iOS-Style Mobile Drawer Gesture Primitive

Implements Emil Kowalski Vaul: Drawer.Root, Drawer.Portal, Drawer.Content, drag handle indicators, snap points (e.g. ['148px', '355px', 1]), background scale effects, and keyboard escape handling.

## When to Invoke
Invoke this skill whenever you need to:
- build mobile bottom drawer vaul
- snap points vaul drawer
- drag to dismiss drawer

## Execution SOP & Rules
1. Install: pnpm add vaul.
2. Structure components: Drawer.Root, Drawer.Trigger, Drawer.Portal, Drawer.Overlay, Drawer.Content.
3. Add snap points: <Drawer.Root snapPoints={['300px', 1]} activeSnapPoint={snap} setActiveSnapPoint={setSnap}>.
4. Add visible grab handle: <div className='mx-auto h-1.5 w-12 rounded-full bg-slate-300' />.

## Verification Checklist
- Run local linting, syntax validation, and type-checks before reporting completion.
- Ensure all created or modified files adhere to workspace boundaries and avoid uncommitted secrets.
- Verify tests or build commands exit cleanly with return code 0.