Optimized for: Gemini / ChatGPT / Claude
Advanced AI Prompt for Responsive Dialog-to-Drawer Transition
Use this engineered prompt to drastically optimize your workflow and output.
Required Variables
- ✦
[BREAKPOINT] - ✦
[TRANSITION_SPEED] - ✦
[ANIMATION_LIBRARY]
responsive-dialog-drawer-a11y.txt
Create a polymorphic Radix UI component that functions as a centered Dialog on desktop and transforms into a bottom-sheet Drawer on mobile (below [BREAKPOINT]). Use [ANIMATION_LIBRARY] for smooth layout morphing. The prompt must address the unique a11y requirements for touch-based dragging in the drawer state versus keyboard escapes in the dialog state. Include logic for 'vaul' integration if necessary, and ensure that the [TRANSITION_SPEED] feels native. Provide a detailed SCSS or Tailwind config for the responsive visibility logic.
Example Output
"The result is a unified 'ResponsiveModal' component that swaps the Radix DialogContent primitive for a Vaul Drawer primitive based on a media query hook."