skills.rest
NalinDalal
NalinDalalCOMMUNITY
Explore all skills by this author →
Website𝕏@nalin82929GitHub

ask-drawer

Implements mobile drawers and bottom sheets with Vaul, snap points, and swipe gestures.

1|Updated Aug 17, 2026
Search Tags:#React#drawer#mobile UI#bottom sheet#vaul#snap points#swipe gestures
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-drawer-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-drawer
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-drawer
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-drawer-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires vaul.

What problem does it solve? Building mobile drawers and bottom sheets from scratch leads to missing gestures, broken accessibility, no focus trapping, and awkward fixed heights that ignore safe areas. ## Core Features & Use Cases - Drawer Pattern Selection: Distinguishes bottom sheets, side drawers, and nested drill-down drawers with the right behaviors for each. - Vaul-Based Implementation: Provides headless, gesture-driven drawer primitives with snap points, swipe-to-dismiss, and spring physics. - Quality Checklist & Anti-Patterns: Covers drag handles, backdrop, focus trap, keyboard support, reduced motion, safe area, and scroll lock. - Use Case: When a user asks to add a mobile filter panel, this Skill produces a Linear-style bottom sheet with snap points at 40%, 85%, and 100%, a reset button, and apply actions. ## Quick Start Ask the agent to add a mobile bottom sheet filter drawer with swipe-to-dismiss and snap points to your page.

Frequently Asked Questions about ask-drawer

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I build a mobile bottom sheet in React?▼

Use the Vaul library's Drawer component with direction="bottom" and snapPoints to create a gesture-driven bottom sheet. It provides drag handles, swipe-to-dismiss, backdrop, and spring physics out of the box.

What React library is best for mobile drawers and sheets?▼

Vaul is recommended for mobile drawers because it is headless, accessible, and gesture-driven with spring physics. It handles snap points, velocity-based swipe dismissal, and focus trapping without custom transform logic.

How do I add snap points to a bottom sheet?▼

Pass an array of fractions to Vaul's snapPoints prop, such as [0.5, 1] for half and full height. Users can drag between snap points, and slow swipes spring back to the nearest point.

Does Vaul support side drawers for mobile navigation?▼

Yes, Vaul supports side drawers via the direction prop set to left or right. Combine it with a width class like w-72 max-w-[85vw] for a mobile navigation panel with backdrop and ESC-to-close behavior.

Why should I avoid building a drawer with a custom div and transform?▼

Custom div-based drawers lack gestures, spring physics, focus trapping, and accessibility. They also commonly miss swipe-to-dismiss, safe-area handling, and proper scroll locking, which Vaul provides by default.

Related Skills

Explore More Software Engineering Skills→
coco-decoco-de

coui-drawer

Create and manage drawer components for CoUI Flutter and Web applications.

Official
Intermediate
TechsioCZTechsioCZ
2

toast-usage

Implement transient toast notifications with @techsio/ui-kit Toaster and useToast in React apps.

Official
Intermediate
coreyonecoreyone
1

design-animation

Design interface motion, spring easing, micro-interactions, and reduced-motion fallbacks for web UIs.

Community
Advanced
bytetalentbytetalent

Modal Dialog Action

Define reusable modal dialog components for overlay-based UI interactions.

Official
Intermediate