modal-and-overlay-patterns SKILL.md skillA
modal-and-overlay-patterns from dembrandt/dembrandt-skills is an agent skill: a SKILL.md folder an AI agent loads when a task calls for it.
mdr add dembrandt/dembrandt-skills/modal-and-overlay-patterns@git:20261015.8ac519ePins git:20261015.8ac519e in mdr.lock. Pin the fingerprint instead.
- Audit grade
- A, 17 of 17 checks passed
- Kind
- SKILL.md skill
- Repository
- dembrandt/dembrandt-skills
- Path
skills/modal-and-overlay-patterns/SKILL.md- Versions recorded
- 8
- Latest version
- git:20261015.8ac519e, committed Oct 15, 2026
- First version recorded
- Jun 30, 2026
- Size
- 18,158 bytes
- Repository stars
- 183
- License
- MIT
Modals, drawers, bottom sheets and popovers, each with its scope and blocking level. Use when designing dialogs, confirmations, side panels or action sheets.
Collected from public GitHub. Every version is saved exactly as it was and never changes. Install it at an exact version with the mdr tool, and every file is checked before it reaches your agent. The main file is checked against the SHA-256 fingerprint recorded here, and the others against the fingerprints GitHub keeps for its source commit. The automatic checks below grade the latest version, and the same checks always give the same file the same grade.
What the file says
# Modal and Overlay Patterns Overlays appear above the main content layer. They range from lightweight popovers (non-blocking, anchored to a trigger) to full blocking modals (require a user response before the app continues). Choosing the right overlay type for the task prevents unnecessary interruption and keeps the user oriented. --- ## The Overlay Hierarchy Choose the lightest type that satisfies the task. Heavier overlays carry higher cognitive cost. | Type | Blocks background | Anchored to trigger | Typical content | Dismiss with | |---|---|---|---|---| | **Tooltip** | No | Yes | 1–2 lines of explanatory text | Cursor leave / focus out | | **Popover** | No | Yes | Short interactive content: a form field, a picker, a small list | Click outside, Escape, explicit close | | **Dropdown / Menu** | No | Yes | List of actions or options | Click outside, Escape, selection | | **Bottom sheet** (mobile) | Partial (dimmed) | No | Actions or content on small screens | Swipe down, tap scrim, Escape | | **Drawer / Side panel** | Partial (dimmed) | No | Secondary editing, detail views, long forms | Escape, explicit close; optionally click scrim | …
Read the whole file at its exact version.
How to install
mdr add dembrandt/dembrandt-skills/modal-and-overlay-patterns@sha256:be223f52fb1f3153The line at the top of this page pins the label git:20261015.8ac519e, which is what most people want. This one pins the sha256 fingerprint of the contents instead, so it survives a label being moved. Either way the exact version is written to mdr.lock, and mdr install downloads and checks those contents again, so it installs them exactly or stops with an error.
[](https://markdownregistry.com/a/art_uhu36solx3g3j3cq)
3 badge image fetches in 30 days. What the badge shows.
Versions
The registry has recorded 8 versions of this file, between Jun 30, 2026 and Oct 15, 2026, about one every 15 days.
| version | committed | commit | size | audit | |
|---|---|---|---|---|---|
| git:20261015.8ac519e latest | 2026-10-15 | 8ac519e | 18,158 B | A | view · diff |
| git:20261008.20de5f2 | 2026-10-08 | 20de5f2 | 16,912 B | A | view · diff |
| git:20261001.b05848a | 2026-10-01 | b05848a | 16,398 B | A | view · diff |
| git:20261001.55e2cee | 2026-10-01 | 55e2cee | 16,548 B | A | view · diff |
| git:20260929.709f169 | 2026-09-29 | 709f169 | 15,877 B | A | view · diff |
| git:20260927.78a6cdf | 2026-09-27 | 78a6cdf | 15,903 B | A | view · diff |
| git:20260925.978da92 | 2026-09-25 | 978da92 | 12,382 B | A | view · diff |
| git:20260630.1fb07e1 | 2026-06-30 | 1fb07e1 | 11,958 B | A | view |
Audit of the latest version
- pass: Frontmatter block present
- pass: Frontmatter declares a name
- pass: Frontmatter declares a description
- pass: Size between 200 bytes and 200 KB (18158 bytes)
- pass: No zero-width or bidi control characters
- pass: No instruction hidden inside an HTML comment
- pass: No link to an exfiltration or paste host
- pass: No credential-shaped string
- pass: No instruction to send local credentials anywhere
- pass: No text hidden with inline styles
- pass: No prompt-injection phrasing
- pass: No curl or wget piped into a shell
- pass: No recursive delete of root, home or parent
- pass: No instruction to read or print local credentials
- pass: No base64 blob over 200 characters
- pass: No link to a raw IP address
- pass: No script tag
Source
dembrandt/dembrandt-skills · 183 stars · license MIT · pushed 2026-11-01 · branch main
API
GET https://markdownregistry.com/api/v1/artifacts/art_uhu36solx3g3j3cq GET https://markdownregistry.com/api/v1/resolve?ref=dembrandt/dembrandt-skills/modal-and-overlay-patterns GET https://markdownregistry.com/api/v1/blob/be223f52fb1f3153234e6adff58ea5e57084a56d70156e2171a00a067375fb59
Your AI assistant does the legwork. You hear about the deals worth your word. Hand yours the standing instructions at modelranch.com and it joins the network that reads files like this one.
Guides: the SKILL.md format and its required fields · what to check before you install a skill · how to pin a skill to an exact version · where to find agent skills · keeping a team on the same skills · which agent file does what.