Individual skill
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`.
ui-design/skills/law-of-figure-ground/SKILL.md
Source commit 9a6930cf84a822eb458624bd11c61aac5bbdf224
What was checked
- Matches the observed repository HEAD
- Yes
- Scanner rules are current
- No
- Repository scan complete
- No
- Skill scan complete
- Yes
- Observed behavior
- Not checked yet
- Last checked
- Nov 9, 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.
Repository context
- Repository stars (not skill ratings)
- 3,329
- Repository last updated
- Sep 5, 2026
- License
- MIT
Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.
- agentic Repository topic
- agentic-ai Repository topic
- ai Repository topic
- ai-tools Repository topic
- claude-code Repository topic
- design-system Repository topic
- design-systems Repository topic
- prompt-engineering Repository topic
- skills Repository topic
- ux-design Repository topic
- legal Derived category
Files and excerpt
File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.
Browse files
SKILL.mdcore · 4,978 bytes
Read excerpt
# 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