What problem does it solve? Screens often fail because users cannot tell where to look first — everything competes, nothing stands out, and layouts read as cluttered or flat. This Skill provides a step-by-step method, grounded in Nielsen Norman Group visual-design principles, to rank elements, direct attention, group related content, and set legibility floors so the right thing gets seen first. ## Core Features & Use Cases - Priority ranking: Forces an inventory of every element with exactly one level-1 element per screen, turning vague layout debates into explicit ranking decisions. - Attention and grouping tools: Applies scale, weight contrast, position, color, and whitespace in cheapest-first order, plus Gestalt principles (proximity, similarity, common region, closure) with a whitespace-before-borders grouping ladder. - Legibility floors and verification: Enforces 50–75 character line lengths, gray-level budgets, and plain language, then validates with squint, grayscale, and reading-order tests. - Use Case: When redesigning a booking-confirmation screen described as "cluttered", use this Skill to rank elements, cut the promo banner, make the date/time the single focal point, and verify the hierarchy survives a blur test. ## Quick Start Use the apply-visual-hierarchy skill to review this screen layout and tell me what users will see first and how to fix the grouping.
