visual-hierarchy

Installation
SKILL.md

Visual Hierarchy

Visual hierarchy makes the viewer's eye move in the right order. Without it every element competes, nothing lands, and the composition fails before a single word is read consciously. The expensive mistake this skill prevents is the "make it pop" spiral: adding contrast to element after element until everything shouts and nothing is heard - the fix is almost always subtraction, not addition.

Operating procedure

Work the steps in order: the focal point decision (Step 2) governs every lever adjustment after it, so pulling levers first produces polish on the wrong structure.

Step 1: Gather inputs

  • The composition itself (screenshot, file, or description).
  • The single most important action or message on this view. If the user cannot name one, that is the real problem - resolve it before touching design. Default guess: the primary call to action; label it a guess.
  • The intended reading order: what should be seen first, second, third.
  • Context of use: glanced at (ad, billboard, dashboard) or studied (article, settings page). Glanced compositions need steeper hierarchy.

Step 2: Enforce one focal point per view

Every view gets exactly one point of maximum visual weight - the first thing the eye lands on. If two elements have equal weight, neither wins; the eye oscillates and comprehension drops. When a stakeholder insists two things are both most important, force the trade-off: "if a viewer sees only one thing, which one?" One focal point per view is the rule; a second "most important" element means the view should be split into two views.

Installs
2
GitHub Stars
19
First Seen
Oct 5, 2026