skills.rest
dembrandt
dembrandtOFFICIAL
Explore all skills by this author →
Website𝕏@dembrandtcomGitHub

modal-and-overlay-patterns

Select accessible overlay patterns for modals, drawers, and menus.

33|6|Updated Apr 19, 2026
Search Tags:#accessibility#modal#interaction design#dialog#drawer#popover#bottom sheet
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill modal-and-overlay-patterns
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: modal-and-overlay-patterns
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/modal-and-overlay-patterns
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill modal-and-overlay-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents confusing, disruptive, or inaccessible overlays by helping you choose the right interaction pattern for each task and apply consistent behavior across modals, drawers, sheets, popovers, and menus.

Core Features & Use Cases

  • Overlay Selection: Choose between tooltips, popovers, menus, bottom sheets, drawers, dialogs, and full-screen overlays based on blocking level, context, and task complexity.
  • Accessible Interaction Design: Apply correct focus trapping, focus restoration, keyboard controls, ARIA roles, dismissal behavior, and mobile adaptations.
  • Destructive Confirmation Patterns: Design explicit confirmations that name the affected item, explain consequences, and prevent accidental dismissal or submission.
  • Use Case: Design a confirmation dialog for deleting a project, or determine whether a detail-editing workflow should use a drawer instead of a blocking modal.

Quick Start

Use the modal-and-overlay-patterns skill to review this interface and recommend the correct overlay type, behavior, sizing, and accessibility implementation.

Frequently Asked Questions about modal-and-overlay-patterns

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

FAQPage Schema
When should I use a drawer instead of a modal for editing details?▼

Use a drawer for detail-editing workflows instead of a blocking modal when the task requires context retention. Drawers keep the underlying interface visible, preventing disruptive interactions while allowing users to maintain focus and control over complex content.

How do I design accessible modals with focus management and keyboard navigation?▼

Design accessible modals by applying correct focus trapping, focus restoration, keyboard controls, and ARIA roles. Satisfy dismissal behavior and mobile adaptations to prevent confusing, disruptive, or inaccessible interactions across all overlay patterns.

What is the best overlay pattern for confirming destructive actions like deleting a project?▼

The best overlay pattern for destructive actions is a confirmation dialog. Design explicit confirmations that name the affected item, explain consequences, and prevent accidental dismissal or submission to ensure destructive-action safety requirements are met.

How do I choose between a popover, bottom sheet, and full-screen overlay?▼

Choose between tooltips, popovers, menus, bottom sheets, drawers, dialogs, and full-screen overlays based on blocking level, context, and task complexity. Selecting the appropriate overlay pattern prevents confusing and disruptive interactions.

Why does my modal close when users click outside or press Escape accidentally?▼

Modals close on outside clicks or Escape presses due to incorrect dismissal rules. Apply explicit dismissal behavior requirements, especially for destructive-action confirmations, to prevent accidental dismissal or submission of important data.

Do I need ARIA semantics for responsive bottom sheets and mobile overlays?▼

Yes, you need ARIA semantics for responsive bottom sheets and mobile overlays. Apply correct ARIA roles, dismissal behavior, and mobile adaptations to satisfy focus management, keyboard navigation, and accessibility requirements across responsive interface workflows.

Related Skills

Explore More Design & Creative Skills→
diegocconsolinidiegocconsolini
6

gdpr-auditor

Audit GDPR compliance gaps in codebases and data-processing systems.

Community
Advanced
vecearvecear

modal-drawer-system

Create accessible React TypeScript modal and drawer components with focus trapping and ARIA attributes.

Community
Advanced
naporin0624naporin0624
3

a11y-self-check

Validate generated HTML/JSX/TSX output for WCAG 2.1 AA accessibility compliance.

Community
Basic
Camilo8902Camilo8902

modal-drawer-system

Implement accessible modals and drawers with focus trap, ESC close, and ARIA attributes.

Community
Intermediate