similarity-grouping

What problem does it solve?

This Skill helps designers prevent scattered UI items from feeling unrelated by using shared visual cues so users immediately perceive which items belong together.

Core Features & Use Cases

• Visual similarity grouping: Use consistent color, size, shape, orientation, icons/symbols, and typographic treatment to create clear perceptual categories.
• Context-appropriate applications: Apply similarity grouping to lists, navigation systems, status dashboards, mixed content views, and selected-item long lists.
• Stronger grouping via cue stacking: Combine multiple grouping cues (e.g., tinted background + border + icon) for more reliable category perception and accessibility support.
• Anti-pattern prevention: Avoid conflicting cues, inconsistent styling within a category, imperceptible differences, overgrouping, and color-only grouping.

Quick Start

Apply consistent visual treatments across items that share the same role or category (such as the same color + icon + size) in your list, dashboard, or navigation so users can scan and segment instantly.