Menu

Individual skill

proximity

Use this skill whenever the question is how to make a composition feel organized — what belongs with what, where groups end, how related items can be visually bound without resorting to borders or boxes. Trigger when laying out forms, tables, navigation, lists, cards, dashboards, or any composition with multiple distinguishable groups of content. Trigger when a layout "feels disorganized," when users are confused which label goes with which input, when grouping is being attempted with borders that look heavy, or when a designer is reaching for color to encode grouping. Proximity is the cheapest, most powerful grouping tool in design; this skill teaches how to use spacing as the primary grouping mechanism, with sub-aspect skills for forms, tables, and navigation.

plugins/HDeibler/universal-design-principles/plugins/perception-and-hierarchy-principles/skills/proximity/SKILL.md

Read pinned source

Source commit d780783eba4ecc7c8b9429f95c9362df95f07c61

What was checked

Matches the observed repository HEAD
Yes
Scanner rules are current
Yes
Repository scan complete
No
Skill scan complete
No
Observed behavior
Network or broad shell
Last checked
Nov 4, 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)
1,532
Repository last updated
Nov 6, 2026
License
Apache-2.0

Observed agent integration: No specific integration evidence. Standard SKILL.md installation does not imply verified compatibility.

Files and excerpt

File metadata and permitted, redacted excerpts come from the recorded scan. Source links are pinned to that commit.

Browse files
Read excerpt

# Proximity

Proximity is one of the original Gestalt grouping laws: **elements close together are perceived as belonging together; elements farther apart are perceived as separate.** It is the cheapest grouping mechanism in the designer's toolkit — it requires no ink, no color, no chrome, only the deliberate distribution of space. Used well, proximity makes most other grouping tools (borders, backgrounds, dividers) unnecessary.

## Definition (in our own words)

When the human visual system encounters a set of similar elements, it organizes them into groups based on relative spatial distance. Items that share a small gap are perceived as a unit; items separated by a larger gap are perceived as belonging to different units. This perceptual grouping happens preattentively — before conscious thought, before reading. It is one of the most reliable findings in perception research, observed in infants, across cultures, and across animal species.

## Origins and research lineage

- **Gestalt psychology** (Wertheimer, 1923) formalized the laws of perceptual grouping, of which Proximity (*Gesetz der Nähe*) is the most basic. Wertheimer's original demonstrations used dots arranged at varying distances; the perceived groupings shifted dramatically with small spacing changes.
- **Treisman's feature integration theory** (1980s) and the broader preattentive-processing literature established that grouping by spacing happens within the first ~200ms of viewing — before the user has consciously "looked" at anything.
- **Information design** (Tufte; Krug, *Don't Make Me Think*, 2000) translated proximity from perception research into web/UI practice, particularly in the design of forms and information dense surfaces.
- **Web usability research** (Nielsen Norman Group studies on form perception, label-input pairing) repeatedly shows that label-input ambiguity — usually a proximity failure — is among the top usability issues in form design.