What is the gestalt-ui-organisation skill?
gestalt-ui-organisation is a skill in the dembrandt-skills collection. It teaches an agent six Gestalt principles for UI layout: proximity, similarity, common region, connectedness, figure and ground, and continuity. A review checklist and an anti-pattern table help it fix layouts where grouping is unclear.
A toolbar with Cut, Copy and Paste packed together and a wider gap before Undo and Redo shows two groups without a divider. That example, taken from the SKILL.md, is the whole skill in miniature.
gestalt-ui-organisation teaches an agent to make visual structure carry relationships, so users see which commands, controls and elements belong together without reading labels. It covers six principles, a review checklist, an anti-pattern table and a spacing rule.
The six principles in practice
- Proximity: related controls sit close together, and unrelated groups get a larger gap.
- Similarity: color, shape, size and icons stay consistent inside a functional group, while destructive actions such as Delete look different from Save or Add.
- Common region: cards, panels or background fills enclose related content, and nested regions mirror nested hierarchy.
- Connectedness: lines and arrows appear only when a genuine relationship exists.
- Figure and ground: interactive controls contrast with their background, disabled information recedes and modals separate from the layer beneath.
- Continuity: related controls line up on a left edge, a baseline or a centre line.
Rules that change real layouts
The skill defaults to whitespace over divider lines for grouping, with a caveat: a line takes almost no room, so deleting separators usually means adding spacing. Budget the gap, or occasionally a subtle background or heading, instead of leaving the layout cramped.
Proximity governs time too. When a left menu opens content that starts at the far right, the eye crosses the screen on every selection. The skill anchors content left, puts the title level with the selected row and prefers three narrow columns.
A region needs no border, but a borderless one needs air. Without a line or fill doing the enclosing, generous internal padding and a clear gap to neighbours are what stop separate cards from collapsing into one blur.
Who gestalt-ui-organisation is for
Best for
- Laying out toolbars, navigation, forms and dashboards, the cases the SKILL.md description names.
- Reviewing an existing screen for muddy grouping, using the nine point checklist. A related audit skill is design-auditor.
- Cleaning up layouts that lean on boxes and separators, where spacing on a 4pt or 8pt scale would do the job.
Not for
- Choosing colors, type scales or a brand. The collection has separate skills for those, and this one only governs grouping and structure.
- Pixel level checks of a rendered page. For that, look at frontend-visual-qa.
- Accessibility sign off. Contrast appears only through figure and ground, so use a dedicated review for WCAG.
Use it with UiChemy
Grouping decisions show up in Figma frames just as much as in code. Fix spacing and regions in the design, then convert it with UiChemy Figma to WordPress, where Composer lets you adjust the result in Elementor or Gutenberg. Click Get Started on uichemy.com.
How to install Gestalt UI Organisation Skill: Group Controls Clearly
git clone https://github.com/dembrandt/dembrandt-skills.gitClone the repository
Run
git clone https://github.com/dembrandt/dembrandt-skills.git. The skill sits in the skills/gestalt-ui-organisation folder of this collection.Copy the skill folder
Copy skills/gestalt-ui-organisation into your agent's skills folder. The README says the collection targets agents that read the Open Agent Skills format.
Ask in your own words
Prompts like group these buttons so users know they are related, or organise this toolbar using gestalt, load the skill. Skills load only when a prompt needs them.
Add more if you want
The repository holds many other skills, such as visual hierarchy and form design. Copy their folders the same way.
Check that it loaded
Ask the agent to review a toolbar or form layout. It should talk about proximity and common region, replace divider lines with spacing and walk the review checklist.
Key features
- Six Gestalt principlesProximity, similarity, common region, connectedness, figure and ground, and continuity each come with concrete do and do not rules for UI layout.
- Whitespace over separatorsGrouping defaults to spacing, not divider lines, and the skill warns that removing a line means budgeting extra space to compensate.
- Cause and effect stay closeWhat a click produces appears next to the click, and the same way in every view, so users learn a pattern they can reuse.
- Borderless regions need airA card with no border or background relies on generous padding and clear gaps to read as one region.
- Nine point review checklistChecks include whether a new user can spot related controls unaided, whether clicks answer nearby and whether destructive actions look distinct from constructive ones.
- Six row anti-pattern tableEach row pairs a mistake, such as identical whitespace between all elements, with the principle it breaks and a fix.
- Spacing scale ruleApply an 8pt or 4pt scale with tight spacing inside a group and loose spacing between groups, so the layout does not read as a flat list.
- Consistent icon setsOne icon set and weight per toolbar. Mixed styles imply different functional families, which the skill treats as a similarity failure.
- Loads on component workPath patterns cover tsx, jsx, vue and svelte files, and prompt phrases such as gestalt, grouping and visual hierarchy bring the skill in.
Frequently asked questions
What is the gestalt-ui-organisation skill?
It is a skill from the dembrandt-skills collection that applies six Gestalt principles to UI layout. The goal is a visual structure that shows which commands, controls and elements belong together, so users do not need labels or documentation to understand the grouping.
How do I install gestalt-ui-organisation?
Clone dembrandt/dembrandt-skills and copy the skills/gestalt-ui-organisation folder into your agent's skills directory. After that, ask for grouped controls or a gestalt style toolbar review and the skill loads on its own when a prompt matches.
Which AI agents can load it?
The repository README names Claude Code, Cursor, Codex and GitHub Copilot, and adds any agent that reads the Open Agent Skills format. Where each tool looks for skills differs, so copy the folder to the location your tool documents.
Why does it prefer whitespace to divider lines?
The SKILL.md argues that most separators add noise and a boxed in feel without adding information, since spacing groups better. The catch is that a line takes almost no space, so removing it means adding spacing or the groups end up too close.
When does the skill load without being asked?
Its metadata lists path patterns for tsx, jsx, vue and svelte files and component or design system folders, plus prompt phrases like gestalt, grouping, visual hierarchy and related controls. Those signals help an agent decide when the skill applies.
How is it different from other layout skills?
It is narrow on purpose. It governs grouping and structure, and the same collection lists separate skills for visual emphasis and hierarchy, spacing units and form design. For a broader pass, see web-design-reviewer.
What license does it use?
The dembrandt-skills repository is MIT licensed, and this skill's SKILL.md lists a priority of 7 among its metadata. The README also notes that changes to skills go through a pull request.