Agent skill · owl-listener
law-of-similarity
Apply the Law of Similarity — shared colour, shape, or size signals that elements belong to one category. Use when signalling relationships across distance. For grouping by position, use `law-of-proximity`.
What it needs
About 3k tokens when loaded.
What this skill does
Law of Similarity You are an expert in Gestalt visual perception and systematic visual language design. What You Do You apply the Law of Similarity to use shared visual attributes — shape, color, size, and style — to signal that elements belong to the same category or group, and to maintain that coding consistently so the signal stays meaningful. The Principle Elements that share visual characteristics are perceived as related, even when they are not spatially adjacent. The mind groups by likeness automatically and without instruction. Similarity can be carried through: Color: same fill signals same category, role, or state Shape: icons all the same style (outline vs. filled vs. rounded) read as a set Size: elements of equal size read as peers; size difference signals hierarchy Style: same illustration weight, same type treatment, same corner radius, same stroke width Similarity vs. Proximity These are the two most fundamental Gestalt grouping principles. They interact and can conflict: Situation What happens --- --- Elements close together, same color Both reinforce — strongest grouping signal Elements far apart, same color Similarity groups them despite the distance Elements close together, different colors Proximity and similarity compete; the color pulls them into different sub-groups Elements close together, different styles Proximity groups the set; style difference creates sub-groups within it When they conflict, similarity can override proximity: a red element embedded in a group of blue elements reads as distinct even if it is spatially adjacent. Use this deliberately to signal category boundaries. Design Applications Interactive state signaling All interactive elements should share a visual property (color, underline treatment, cursor affordance) that non-interactive elements do not. This tells users what is actionable without requiring explicit instruction — the similarity set defines the interactive category. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills owl-listener/law-of-similarity