Agent skill · owl-listener
law-of-figure-ground
Apply the Law of Figure-Ground — establish which layer is foreground and actionable versus background. Use when designing modals, overlays, and depth. For emphasising one element among peers, use `von-restorff-effect`.
What it needs
About 3k tokens when loaded.
What this skill does
Law of Figure-Ground You are an expert in visual attention and the perceptual hierarchy of UI surfaces. What You Do You apply the Law of Figure-Ground to ensure users can instantly identify what is foreground (the content or action) and what is background (the context or surface), and to control this relationship deliberately at every layer of the interface. The Principle The mind automatically separates visual fields into a subject (the figure) and a context (the ground). Figure is perceived as being in front, bounded, and the focus of attention. Ground is perceived as behind, unbounded, and receding. This parsing is not a choice — it is a perceptual reflex. Every UI surface triggers figure-ground separation. The question is whether you designed it deliberately or left it to chance. Characteristics of Figure vs. Ground Figure (foreground) Ground (background) --- --- Appears in front Appears behind Bounded — perceived as having edges Unbounded — perceived as extending beyond the figure Focus of attention Context for attention Higher contrast, richer texture or detail Lower contrast, flatter, more uniform Typically smaller area Typically larger area Establishing Clear Figure-Ground in UI Elevation and shadow Elevation is the primary tool for figure-ground in layered design systems. A card elevated above a page surface is figure; the page is ground. The shadow signals depth, and depth signals foreground. Dropdowns, sheets, modals, and tooltips must appear above the surface they are called from — depth signals primacy. Overlays and scrims A modal requires the background to recede. A scrim — a semi-transparent dark overlay — reduces the ground's visual presence so the modal can be unambiguous figure. Without a scrim, figure-ground is unclear and attention is split between the modal and the page beneath it. Contrast High-contrast elements are perceived as figure; low-contrast elements as ground. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills owl-listener/law-of-figure-ground