skills.rest
HDeibler
HDeiblerCOMMUNITY
Explore all skills by this author →
GitHub

figure-ground-overlays-and-modals

Audit overlay UI and recommend scrim, elevation, focus, and close changes.

6|3|Updated May 3, 2026
Search Tags:#accessibility#ux#modals#visual hierarchy#focus management#ui overlays#scrim and elevation
One-click install
npx skills add https://github.com/HDeibler/universal-design-principles --skill figure-ground-overlays-and-modals
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: figure-ground-overlays-and-modals
Source: https://github.com/HDeibler/universal-design-principles/tree/main/plugins/perception-and-hierarchy-principles/skills/figure-ground-overlays-and-modals
Command: npx skills add https://github.com/HDeibler/universal-design-principles --skill figure-ground-overlays-and-modals

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you prevent overlay UI (modals, drawers, dropdowns, toasts, popovers) from visually blending into the underlying page so users can instantly recognize what needs attention and what is still background.

Core Features & Use Cases

  • Overlay figure-ground recipe: calibrates scrims, elevation/shadows, contrast, and background treatment so the overlay becomes the clear “figure.”
  • Interaction correctness: ensures dismiss paths, focus management (focus trap where needed), and accessibility signaling (e.g., ARIA) match the overlay type.
  • Failure-mode guidance: diagnoses common problems like missing/too-light scrims, unclear close affordances, stacked modals, inconsistent patterns, and tooltip misuse.

Quick Start

Use the figure-ground-overlays-and-modals skill to audit your modal, drawer, dropdown, toast, popover, or tooltip design and recommend the specific scrim/elevation/focus/close changes needed for clear attention separation.

Frequently Asked Questions about figure-ground-overlays-and-modals

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

FAQPage Schema
How do I make a modal stand out from the background page?▼

To make a modal stand out, apply figure-ground separation using calibrated scrim opacity, elevation shadows, and contrasty backgrounds so the foreground layer visually separates from the underlying page.

What is the best way to manage focus traps in UI overlays?▼

Managing focus traps in UI overlays requires matching interaction correctness to the overlay type, ensuring dismiss paths, focus management, and ARIA signaling distinguish modals, drawers, and dropdowns appropriately.

Why does my dropdown visually blend into the underlying page?▼

Your dropdown visually blends into the underlying page due to missing or too-light scrims, unclear close affordances, and insufficient elevation, which destroys the figure-ground separation needed for attention.

How do I audit a tooltip for visual hierarchy and accessibility?▼

Audit a tooltip for visual hierarchy by checking its scrim, elevation, contrast, and focus management against failure-mode guidance to diagnose tooltip misuse and confirm clear dismissal paths exist.

Can I use this overlay design recipe for drawers and popovers?▼

Yes, you can use this overlay design recipe for drawers and popovers because it calibrates scrims, shadows, and accessibility signaling across modals, dialogs, toasts, tooltips, and lightboxes in product contexts.

Related Skills

Explore More Design & Creative Skills→
nuggetswisenuggetswise

building-truth-base

Generate a structured truth_base document mapping product, users, and bets.

Community
Basic
HDeiblerHDeibler
6

figure-ground-cues

Apply calibrated figure-ground visual cues to layered UI surfaces.

Community
Intermediate
mauriciodelriomauriciodelrio
3

a11y-rules

Audit React and Next.js components for WCAG 2.2 AA accessibility violations.

Community
Intermediate
jpoindexterjpoindexter

tufte-layering-and-separation

Analyze visual displays to identify and eliminate information-obscuring noise from poor layering.

Community
Intermediate