gestalt-ui-organisation

Organize UI layouts and component groups using visual grouping principles.

33|6|Updated Apr 19, 2026
One-click install
npx skills add https://github.com/dembrandt/dembrandt-skills --skill gestalt-ui-organisation-dembrandt
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: gestalt-ui-organisation
Source: https://github.com/dembrandt/dembrandt-skills/tree/main/skills/gestalt-ui-organisation
Command: npx skills add https://github.com/dembrandt/dembrandt-skills --skill gestalt-ui-organisation-dembrandt

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill prevents confusing interfaces where users cannot tell which controls, content, or actions belong together by applying visual grouping principles to UI structure.

Core Features & Use Cases

  • Proximity and Spacing: Group related elements closely and separate unrelated groups with meaningful whitespace.
  • Visual Relationships: Apply similarity, common region, connectedness, figure-ground contrast, and continuity to communicate hierarchy and function.
  • Layout Reviews: Identify anti-patterns such as excessive dividers, inconsistent spacing, unclear action hierarchy, and mixed icon styles.
  • Use Case: Apply the Skill when reorganizing a toolbar, form, dashboard, navigation tree, or component library so users can understand relationships without reading every label.

Quick Start

Use the gestalt UI organisation skill to review this interface and group its controls so the visual hierarchy and relationships are immediately clear.

Frequently Asked Questions about gestalt-ui-organisation

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I apply gestalt principles to improve UI layout usability?

To fix confusing interfaces, reduce excessive dividers and establish clear visual grouping through meaningful whitespace and consistent alignment. Differentiating action hierarchy and applying figure-ground contrast ensures users instantly recognize which commands belong together.

What is the best way to reorganize a dashboard or toolbar for clear visual hierarchy?

The best way to reorganize a dashboard or toolbar is applying visual grouping principles like connectedness and common region. Grouping related elements closely while separating unrelated groups with whitespace creates a differentiated action hierarchy that users understand instantly.

Can I use gestalt visual grouping for design system component organisation?

Yes, gestalt visual grouping directly supports design system component organisation by enforcing consistent alignment, clear contrast, and unified icon styles. Applying continuity and similarity principles across components prevents anti-patterns and clarifies functional relationships.

Why does my interface usability review show mixed icon styles and unclear action hierarchy?

Interface usability reviews show unclear action hierarchy when visual grouping principles like similarity and proximity are ignored. Inconsistent spacing, excessive dividers, and mixed icon styles prevent users from immediately understanding which controls and actions belong together.