visual-hierarchy
Establish clear visual hierarchy through size, weight, color, spacing, and positioning.
npx skills add Infrasity-Labs/dev-gtm-claude-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 clear visual hierarchy through size, weight, color, spacing, and positioning.
How do I install it?
Run `npx skills add Infrasity-Labs/dev-gtm-claude-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 Infrasity-Labs/dev-gtm-claude-skills, a repository with 97 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.