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`.
npx skills add Owl-Listener/designer-skills --skill law-of-similarity --agent claude-code
Same command for any agent — swap --agent for codex, cursor, copilot.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
# 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 | Simi
- What You Do
- The Principle
- Similarity vs. Proximity
- Design Applications
- Interactive state signaling
- Category and role coding
- Design systems and component coherence
- Data visualisation
- Common Mistakes
- Best Practices
What does the law-of-similarity skill do?
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`.
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill law-of-similarity --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From Owl-Listener/designer-skills, a repository with 1,964 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.