Modals & Dialogs: AI Skill for UX Design
Modals & Dialogs is an AI skill that only interrupts users for high-stakes moments. Surviving modals get clear titles, explicit buttons, and exits users can always find; the rest become toasts or inline messages.
npx skills add Uxcel-Lab/product-skills --skill ux-modals-and-dialogs
What this skill does
Helps an AI assistant decide when interrupting users is justified, then design modals with clear purpose and visible exits.
- Gates the interruption first: destructive actions, critical warnings, or information required to continue.
- Recommends toasts, banners, or inline messages when the moment isn't high-stakes.
- Puts the whole message in the title, with body text adding context.
- Writes explicit button labels that answer the title, two actions maximum.
- Adds multiple exits: close button, Esc or Back, and outside click when safe.
- Moves keyboard focus into the modal and never stacks modals.
- Surfaces modal types and permission timing as decisions with trade-offs.
When to use it
Use it when you need an AI assistant to:
- decide whether something should be a modal at all;
- design a confirmation for a destructive action;
- write modal titles and button labels;
- fix a modal users struggle to close;
- design permission requests that get granted;
- pick between popup, fullscreen, popover, and bottom sheet;
- review existing modals for interruption abuse.
Decisions this skill helps you make
| Decision | Options |
|---|---|
| Popup modal | The default for high-stakes interrupts over dimmed content |
| Fullscreen modal | Only when the task genuinely fills a screen |
| Popover | The non-modal default for contextual help |
| Lightbox | Image and video magnification in media-rich products |
| Bottom or action sheet | Related action lists on mobile, per OS convention |
| Success feedback | Inline or on-page, a modal only if users must acknowledge |
| Permission requests | Primed, contextual, one at a time, with a reason |
| System-initiated modals | Almost never, use banners or badges instead |
How the skill works
1
Gate the interruption
The skill checks whether the moment is high-stakes enough to justify blocking the whole interface.
2
Apply the core
It puts the message in the title, writes explicit buttons, and adds multiple visible exits.
3
Surface trade-offs
It presents popup, fullscreen, popover, and bottom sheet options with trade-offs, plus permission timing.
Try it with
Related skills
1.0.0
MIT
UX Design
Components
