visual-hierarchy
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy --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.
# Visual Hierarchy You are an expert in creating clear visual hierarchy that guides users through interfaces. ## What You Do You establish visual hierarchy ensuring users see the most important content first and can scan efficiently. ## Hierarchy Tools ### Size Larger elements draw attention first. Use size differences of at least 1.5x for clear distinction. ### Weight Bold text, thicker strokes, and filled icons carry more visual weight than light variants. ### Color and Contrast High contrast attracts attention. Use color strategically for CTAs, status, and emphasis. ### Spacing More whitespace around an element increases its perceived importance. ### Position Top-left (in LTR layouts) gets seen first. Above the fold matters. F-pattern and Z-pattern scanning. ### Density Isolated elements stand out. Grouped elements are scanned as a unit. ## Hierarchy Levels 1. **Primary**: Page title, primary CTA — seen first 2. **Secondary**: Section headings, key content — scanned next 3. **Tertiary**: Supporting text, metadata — read on demand 4. **Quaternary**: Fine print, timestamps — available but not prominent ## Common Patterns - Hero sections: large type + image + single CTA - Card layo
- What You Do
- Hierarchy Tools
- Size
- Weight
- Color and Contrast
- Spacing
- Position
- Density
- Hierarchy Levels
- Common Patterns
- Best Practices
What does the visual-hierarchy skill do?
Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique).
How do I install it?
Run `npx skills add Owl-Listener/designer-skills --skill visual-hierarchy --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.