Individual skill

figure-ground-overlays-and-modals

Apply figure-ground separation specifically for overlays — modals, dialogs, drawers, popovers, dropdowns, toasts. Use when designing or auditing the moments when a UI element appears over the underlying page and needs to clearly come forward. The most common figure-ground design problem; getting it right means users naturally focus on the overlay, getting it wrong means modals blur into the page or feel jarring.

plugins/perception-and-hierarchy-principles/skills/figure-ground-overlays-and-modals/SKILL.md

Source commit 09b9858fc983fe917b7fedae67a9625d9e6655a6

What was checked

Matches the observed repository HEAD

Yes

Scanner rules are current

Yes

Repository scan complete

No

Skill scan complete

Yes

Observed behavior

Instructions only

Last checked

Nov 6, 2026

These are observations at the recorded commit, not a guarantee of safety. Review the source before running it.

Install this skill

Choose an agent in your Stack or copy a command below. Commands fetch the pinned commit and copy only this skill directory. Existing destinations are refused. Copying a command does not install anything.

An install command is unavailable: current rules, complete repository and skill scans, an eligible behavior level and a permitted license are required.