gestalt-ui-organisation — independently scanned and version-tracked by SaferSkills.
SaferSkills independently audited gestalt-ui-organisation (Agent Skill) and scored it 100/100 (green). The audit ran 55 deterministic rules across Security, Supply Chain, Maintenance, Transparency, and Community; it found 0 high-severity and 0 lower-severity findings. The full rule-by-rule trace and per-finding evidence are below. Free, methodology-open.
Findings & checks · 0 flagged
Every scanned point with the score it earned and what moved between them.
First recorded scan — no prior version to compare against.
The primary manifest — the file an agent reads to learn what this artifact does.
UI should be organised so that the visual structure communicates relationships — which commands, controls, and elements belong together — without requiring users to read labels or documentation.
Elements that are close together are perceived as a group.
Example: A toolbar with [Cut] [Copy] [Paste] grouped tightly, then a wider gap before [Undo] [Redo], communicates two distinct command groups without any visual divider.
#### Prefer whitespace over separator lines Default to whitespace, not divider lines, for grouping. Most separators do work that spacing does better — they add noise and a "boxed-in" feel without adding information. Remove the majority and let proximity carry the grouping.
Caveat: a line takes almost no space, so removing it leaves groups too close. Removing separators usually means adding spacing — budget the whitespace (occasionally a subtle background or heading) rather than just deleting the line and leaving the layout cramped.
#### The need for a separator grows with distance Elements packed tightly separate themselves; elements far apart need help. A compact table with short rows reads without any lines, because each row is already next to the one it belongs with. The same table at full width, or with tall rows, needs row lines or zebra striping, or the eye loses its place crossing the row.
So the question is not "lines or no lines" but how far the elements sit from each other. Pick the lightest device that bridges the gap, in this order: spacing, a subtle fill or stripe, a hairline, a boxed region. Set it per size: a wide table may carry row lines while its compact variant in a sidebar drops them.
#### Cause and effect stay close Proximity also governs time: what a click produces should appear next to the click. When a left-hand menu opens content that starts at the far right, the eye crosses the whole screen for every selection, and the user re-orients each time.
Elements that look alike are perceived as related.
Example: Destructive actions (Delete, Remove) use a different colour than constructive actions (Save, Add), signalling different intent groups.
Elements enclosed in a shared region are perceived as a group.
A region needs no border — but a borderless one needs air. Enclosure can come from a border/fill or from whitespace alone. When a card has no border or background, generous internal padding and a clear gap to its neighbours are what make it read as one region; without a border doing that job, cut the air and separate cards collapse into one blur. Borderless is fine — cramped-and-borderless is not.
Example: Form sections grouped in bordered cards signal that fields inside each card form a logical unit.
Elements connected by lines or visual links are perceived as related.
Users distinguish foreground interactive elements from background context.
The eye follows smooth paths and lines.
When reviewing a UI layout for Gestalt compliance:
| Anti-pattern | Problem | Fix |
|---|---|---|
| All buttons same size and colour regardless of function | Similarity principle violated — implies all actions are equivalent | Differentiate primary, secondary, destructive visually |
| Related controls spread across distant areas of the screen | Proximity violated — user cannot perceive the relationship | Co-locate related controls |
| Menu on the left, content starting far right | The eye crosses the screen on every selection | Anchor content left, title level with the selected row; add a middle column on wide screens |
| Overuse of divider lines to group elements | Relies on decoration rather than spatial logic | Use whitespace and proximity instead |
| Identical whitespace between all elements | No grouping signal — everything reads as a flat list | Apply 8pt/4pt spacing scale: tight within group, loose between groups |
| Mixed icon styles within one toolbar | Similarity broken — implies different functional families | Use a single consistent icon set and weight per toolbar |
~30 seconds. Free. No account. Every finding cites a rule and a line of evidence.