| name | modal |
| version | 1.0.0 |
| description | Modal dialog reference — accessible, performant modal windows for web and mobile. Use when building modal dialogs, understanding focus trapping, backdrop behavior, or implementing the HTML dialog element. |
| author | BytesAgain |
| homepage | https://bytesagain.com |
| source | https://github.com/bytesagain/ai-skills |
| tags | ["modal","dialog","popup","overlay","accessibility","focus-trap","ui"] |
| category | frontend |
Modal — Modal Dialog Reference
Quick-reference skill for modal dialogs — HTML dialog element, accessibility, focus management, and UI patterns.
When to Use
- Building accessible modal dialogs for web applications
- Using the native HTML
<dialog> element
- Implementing focus trapping and keyboard navigation
- Understanding modal vs non-modal (modeless) dialogs
- Handling backdrop clicks, escape key, and scroll locking
Commands
intro
scripts/script.sh intro
What modals are, modal vs modeless, when to use (and not use) modals.
html
scripts/script.sh html
HTML <dialog> element — showModal, show, close, returnValue, forms.
accessibility
scripts/script.sh accessibility
Modal accessibility — ARIA roles, focus trap, keyboard nav, screen readers.
focus
scripts/script.sh focus
Focus management — trapping, restoring, tab order, inert attribute.
css
scripts/script.sh css
Modal styling — backdrop, animations, responsive, scroll lock.
patterns
scripts/script.sh patterns
Modal UI patterns — confirmation, form, wizard, lightbox, alert.
frameworks
scripts/script.sh frameworks
Modal components in React, Vue, Angular — portals, composition, state.
antipatterns
scripts/script.sh antipatterns
Modal anti-patterns: modal hell, breaking back button, scroll jank.
help
scripts/script.sh help
version
scripts/script.sh version
Powered by BytesAgain | bytesagain.com | hello@bytesagain.com
