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

ask-modal

Guides implementation of dialogs, sheets, popovers, menus, and selects using base-ui primitives.

1|Updated Aug 17, 2026
Search Tags:#accessibility#React#Modal#dialog#base-ui#overlay#popover
One-click install
npx skills add https://github.com/NalinDalal/skillset --skill ask-modal-nalindalal
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: ask-modal
Source: https://github.com/NalinDalal/skillset/tree/main/skills/ui/ask-modal
Command: npx skills add https://github.com/NalinDalal/skillset --skill ask-modal-nalindalal

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Choosing and correctly implementing overlay UI components like dialogs, sheets, popovers, menus, and selects is error-prone, with common failures in focus management, keyboard navigation, and accessibility. ## Core Features & Use Cases - Overlay Pattern Guide: Maps each overlay type (dialog, sheet, popover, menu, select, hover card) to its correct use case and required behaviors. - Quality Checklist: Enforces focus trapping, ESC-to-close, spring animations, reduced-motion support, portals, and scroll locking. - base-ui Composition Examples: Provides ready-to-adapt React code for confirmation dialogs and mobile bottom sheets. - Use Case: When a user asks to add a delete confirmation dialog, the skill routes through pick-ui-library to base-ui and produces an accessible, animated dialog with proper focus restoration. ## Quick Start Ask the agent to add a modal, dialog, sheet, popover, dropdown menu, or select to the current page.

Frequently Asked Questions about ask-modal

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

FAQPage Schema
How do I build an accessible modal dialog in React?▼

Use base-ui Dialog primitives which provide focus trapping, ESC-to-close, backdrop click dismissal, and focus restoration to the trigger. Compose DialogTrigger, DialogContent, DialogHeader, and DialogClose rather than building custom divs with manual focus handling.

What is the difference between a dialog, sheet, and popover?▼

Dialogs are modal overlays for confirmations and forms with focus traps. Sheets slide from the bottom on mobile or side on desktop for settings and filters. Popovers are non-modal, close on outside click, and anchor to their trigger with an arrow.

Should I use the native HTML select element for dropdowns?▼

No, native select elements cannot be styled consistently and lack features like groups, async loading, and type-ahead search. Use base-ui Select primitives for a native-like UX with full styling control and keyboard navigation.

Why does my modal have z-index stacking problems?▼

Z-index wars happen when overlays render inside nested stacking contexts. Render overlays through a portal at the document root so they sit above all page content regardless of parent CSS contexts.

What animation should modal overlays use?▼

Use a 150ms spring in and 100ms spring out with scale from 0.97 to 1 plus a fade. Avoid ease-in-out or keyframe animations, and provide an instant snap with no spring when reduced motion is preferred.

Related Skills

Explore More Software Engineering Skills→
langgeniuslanggenius

ui-accessibility

Build and review accessible React UI components using Base UI primitives.

Official
Intermediate
Razaib-khanRazaib-khan

styling-with-shadcn

Build accessible shadcn/ui interfaces for Next.js applications.

Community
Intermediate
aungpwintaungpwint

motion

Implements React and vanilla JS UI animations using the Motion library APIs.

Community
Intermediate
gwenwindflowergwenwindflower
9

web-ux-command-palette

Build keyboard-first command palettes with cmdk and shadcn/ui.

Community
Intermediate