Stats
Actions
Tags
Help us improve
Share bugs, ideas, or general feedback.
Determine what UI element draws attention first, second, third using size, weight, color, and de-emphasis strategies
npx claudepluginhub gnurio/refactoring-ui-plugin --plugin refactoring-ui-skillsHow this skill is triggered — by the user, by Claude, or both
Slash command
/refactoring-ui-skills:01-establish-visual-hierarchyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Determine what UI element should draw attention first, second, third. Visual hierarchy controls the order in which users process information using size, weight, color, and de-emphasis strategies.
Guides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.
Guides UI visual hierarchy with size/weight/color levers, three-tier architecture, one dominant element per screen, de-emphasis, F/Z-patterns for headings, CTAs, focal points.
Directs attention through size, color, contrast, position, isolation, and motion. Use when designing pages where multiple elements compete for attention or when a layout feels confusing.
Share bugs, ideas, or general feedback.
Determine what UI element should draw attention first, second, third. Visual hierarchy controls the order in which users process information using size, weight, color, and de-emphasis strategies.
| Strategy | When to Use |
|---|---|
| Size + Weight | Primary headlines, important CTAs |
| Color Contrast | Secondary content, supporting text |
| De-emphasize | When primary isn't standing out |
| Weight/Contrast Balance | Icons next to text, borders |
Check visual weight of each element:
Don't rely on size alone:
If primary element isn't standing out:
H1: 48px, weight 700, dark ← Primary
CTA: 16px, solid brand color ← Secondary
Body: 16px, weight 400, grey ← Tertiary
Metric: 32px, weight 700 ← Primary
Label: 14px, weight 400, grey ← Secondary
Action: Text link, brand color ← Tertiary
| Anti-Pattern | Why It Fails | Fix |
|---|---|---|
| Logo larger than headline | Brand over value | Reduce logo, increase headline |
| 60px headline, 12px body | Size extremes | Use 40px + weight, 16px body |
| All bold text | Nothing stands out | Use weight hierarchy |
| Large section titles | Content buried | Make titles smaller than content |
references/size-isnt-everything.mdreferences/emphasize-by-de-emphasizing.mdreferences/ignore-document-hierarchy.mdSee examples/visual-hierarchy/ for before/after cases.