Dec gestalt principles
Skill jpoindexter/design-engineering-canon/skills/dec-gestalt-principles
20 agent-agnostic skills encoding the foundational canon of design engineering — usability heuristics, UX laws, product strategy, accessibility, performance, motion, software principles, design systems, AI-native patterns. Installs globally for Claude Code and any SKILL.md-aware agent.
npx -y skills add jpoindexter/design-engineering-canon --skill dec-gestalt-principlesAssembled from the repository path, not quoted from the project. Check it against their README if it does not work.
One thing to look at
- 0 stars0 stars. Stars are a popularity signal and not a quality one, but at this level it is likely that nobody has read this closely except its author, and you would be relying on your own review.
What its author says it does
Copied from the file, not written here
Gestalt principles of grouping — proximity, similarity, common region, continuity, closure, figure/ground, common fate, prägnanz, uniform connectedness. The visual logic behind how the eye assembles elements into wholes. Use when laying out a screen, deciding what reads as related, designing cards/sections, or diagnosing why a layout feels disorganized.
SKILL.md
1.9 KB, as published. Nobody here has run it
Gestalt Principles of Grouping
How the eye assembles individual elements into wholes — the perceptual logic behind layout. Spacing and grouping communicate relationship before any label does.
- Proximity — near things are perceived as related. The strongest, cheapest grouping tool: spacing is meaning.
- Similarity — alike things (color, shape, size) group together.
- Common Region — a shared container = shared meaning (cards, panels).
- Continuity — the eye follows lines and curves; aligned elements read as a sequence.
- Closure — the mind completes incomplete shapes; you can imply form with less.
- Figure/Ground — separating subject from background; ambiguity here causes visual strain.
- Common Fate — things moving together are seen as a unit (animation as grouping).
- Prägnanz (Simplicity) — ambiguity is interpreted in the simplest possible form.
- Uniform Connectedness — visually linked elements (a line, a border) read as connected, overriding proximity.
How to apply
- Group related controls by proximity before reaching for borders or boxes — whitespace is the first tool.
- Use common region (a card) only when proximity alone isn't enough; borders add visual weight.
- Check figure/ground: the primary content must clearly sit above the background, especially on glass/translucent surfaces.
- A layout that "feels off" usually violates proximity or alignment (continuity) — measure the gaps.