modal-and-overlay-patterns
From the author
Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.
Install
npx skills add dembrandt/dembrandt-skills --skill modal-and-overlay-patterns -a claude-code
Installs to .claude/skills/modal-and-overlay-patterns/ · Each command fetches the skill straight from GitHub with the open skills CLI.
Download .zip
Byte-identical to the scanned commit, with the repository’s licence and a SOURCE.txt.
Want your agent to suggest skills while you type? See how to use skills from your IDE.
Safety checks on SKILL.md
No warnings.
Why 84
Security100
Provenance66
Maintenance100
Licence100
Adoption38
aiqbench computes the trust score from public signals. It is not a security audit, so read a skill before you install it.
Similar skills
Closest to this one by what they do and when they are used.
- elevation-and-depthdembrandt/dembrandt-skillsShadows and layering that lift elements above the surface. Use when designing cards, dropdowns, modals, tooltips or any floating element.Other★ 159
- layout-paradigms-and-consistencydembrandt/dembrandt-skillsChoose a layout paradigm (feed, board, table, canvas, master-detail, dashboard) and reuse it across screens. Includes a landing page narrative framework. Use when structuring a screen, page template or landing page.Design★ 159
- hig-components-dialogsraintree-technology/hig-doctorApple HIG guidance for presentation components including alerts, action sheets, popovers, sheets, and digit entry views. Use this skill when the user says "should I use an alert or a sheet," "how do I show a confirmation dialog," "when should I use a popover," "my modals are annoying users," or asks about alert design, action sheet, popover, sheet, modal, dialog, digit entry, confirmation dialog, warning dialog, modal presentation, non-modal content, destructive action confirmation, or overlay UI patterns. Cross-references: hig-components-menus, hig-components-controls, hig-components-search, hig-patterns.Design★ 148
- popupscoreyhaines31/marketingskillsWhen the user wants to create or optimize popups, modals, overlays, slide-ins, or banners for conversion purposes. Also use when the user mentions "exit intent," "popup conversions," "modal optimization," "lead capture popup," "email popup," "announcement banner," "overlay," "collect emails with a popup," "exit popup," "scroll trigger," "sticky bar," or "notification bar." Use this for any overlay or interrupt-style conversion element. For forms outside of popups, see cro. For general page conversion optimization, see cro.Documents★ 56.3K
- real-world-metaphorsdembrandt/dembrandt-skillsCards, drawers, carousels and other patterns borrowed from the physical world. Use when designing layout patterns, gestures or navigation paradigms.Other★ 159
- data-display-and-selectiondembrandt/dembrandt-skillsView modes, row selection, mass actions, sorting, filters, search and table patterns. Use when designing data tables, listings, file browsers or any collection.Other★ 159
Ratings & reviews
—
no reviews
Tried this skill? Rate it to help others. Sign in
Discussion
Join the discussion. Sign in