hierarchy-spatial

What problem does it solve?

This Skill fixes layouts where visual hierarchy is unclear—everything feels the same weight, the focal element doesn’t stand out, and users can’t quickly identify the primary content or action.

Core Features & Use Cases

• Spatial dominance without relying on type or color: establishes hierarchy using position, relative size, and whitespace.
• Z-pattern-aware placement: uses common default eye-paths (and mirrors for RTL) so the layout’s attention flow matches reading behavior.
• Whitespace + rhythm as hierarchy signals: uses surrounding space and vertical rhythm to communicate importance through grouping and separation.
• Aspect ratio and alignment as role indicators: selects wide vs tall vs neutral shapes to fit the element’s job, and uses centering sparingly for true focal moments.

Quick Start

Ask an agent to review your UI layout and recommend which element should become the spatial focal point, then specify how to adjust grid spans, whitespace, and alignment so the primary action or headline clearly dominates.