SKILL.md
Modal Dialog Patterns
When to Use What
| Pattern | When | Why |
|---|---|---|
| Modal dialog | Confirmation, short forms, critical alerts | Blocks interaction, forces decision |
| Drawer/Sheet | Detailed content, filters, secondary forms | Slides in, partial page context |
| Toast/Snackbar | Success confirmation, minor notifications | Non-blocking, auto-dismisses |
| Inline expansion | Progressive disclosure, details | No context switch |
| Full-page | Complex forms, multi-step flows | Full context, no overlay |
Modal Rules
- One primary action per modal. If you need two, use a full page.
- Always include a close mechanism: X button, overlay click, Escape key.
- Don't stack modals. A modal opening a modal is a UX failure.
- Trap focus inside. Tab should cycle within the modal, not escape to background.
- Prevent background scroll when modal is open.
- Size: As small as possible. Don't use a modal when an inline confirmation works.
Confirmation Dialogs
- Destructive actions only. Don't confirm saves, non-destructive actions, or navigation.
- Button labels: specific verbs, not "Yes/No." "Delete Project" / "Keep Project."
- Red/destructive styling on the destructive action.
- Never auto-focus the destructive button.
Bottom Sheets (Mobile)
- Swipe to dismiss. Don't just rely on X button.
- Snap points: collapsed (peek), half-screen, full-screen.
- Handle indicator at top (the little bar).
- Background should dim but remain partially visible for context.