Visual Hierarchy
Apply size, weight, color, spacing, and layout rules so landing pages, dashboards, and marketing surfaces guide the eye to primary CTAs and scannable content.
Overview
Visual Hierarchy is an agent skill most often used in Build (also Validate, Launch) that establishes clear scan order through size, weight, color, spacing, and position so users see primary content and CTAs first.
Install
npx skills add https://github.com/owl-listener/designer-skills --skill visual-hierarchyWhat is this skill?
- Six hierarchy tools: size (≥1.5× distinction), weight, color/contrast, spacing, position (F/Z patterns), and density/gro
- Four explicit levels: primary, secondary, tertiary, and quaternary content prominence
- Documented patterns for hero sections, card layouts, forms, and navigation state
- Squint-test and whitespace guidance to validate what users see first
- LTR-aware placement (top-left first, above-the-fold) for scan order
- Four hierarchy levels: primary, secondary, tertiary, and quaternary
- Size distinction guidance of at least 1.5× for clear distinction
- Six hierarchy tools: size, weight, color/contrast, spacing, position, density
Adoption & trust: 625 installs on skills.sh; 1.5k GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
Your interface looks busy or flat and users cannot tell what to read or tap first.
Who is it for?
Solo builders polishing SaaS dashboards, landing pages, or marketing sections who want checklist-level hierarchy rules while pairing with an agent in Claude Code or Cursor.
Skip if: Teams that already enforce a complete design system with tokens and components and only need automated contrast auditing—or projects with no visual UI at all.
When should I use this skill?
Establishing or critiquing UI where users must see important content first and scan efficiently across pages, cards, forms, or navigation.
What do I get? / Deliverables
Screens follow labeled primary-through-quaternary levels with consistent patterns so CTAs and key content stand out without redesigning the whole product.
- Hierarchy-ranked UI recommendations
- Pattern-aligned section structure (hero, card, form, nav)
Recommended Skills
Journey fit
Spans multiple journey phases - primary shelf plus alternate fits below.
Canonical shelf is Build because the skill teaches interface composition patterns used while implementing UI, even though the same hierarchy rules apply earlier on prototypes and later on launch assets. Frontend is where hierarchy levels (primary CTA through quaternary metadata) are encoded in components, cards, forms, and navigation—not in backend or infra work.
Where it fits
Structure a waitlist hero so the headline and single CTA read before supporting copy.
Rank elements on a clickable mock so testers notice the main action path first.
Refactor a dense settings page into primary sections versus tertiary metadata.
Tune a launch announcement page so pricing or signup wins over footnotes.
How it compares
Use for compositional hierarchy coaching during implementation, not instead of dedicated accessibility or contrast checker skills.
Common Questions / FAQ
Who is visual-hierarchy for?
Indie and solo builders shipping web or mobile UI who want an agent to apply consistent prominence rules across heroes, cards, forms, and nav without hiring a visual designer for every pass.
When should I use visual-hierarchy?
During Validate when scoping landing or prototype layouts, during Build while structuring frontend pages and components, and at Launch when tightening marketing pages—whenever scan order or CTA emphasis is unclear.
Is visual-hierarchy safe to install?
It is prose guidance with no declared shell or network hooks in the skill body; review the Security Audits panel on this Prism page before installing any skill from the repo.
SKILL.md
READMESKILL.md - Visual Hierarchy
# 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 layouts: image > title > description > action - Forms: label > input > helper text > error - Navigation: current state > available > disabled ## Best Practices - Squint test: blur your eyes — hierarchy should still be clear - One primary action per view - Don't compete for attention — choose what matters most - Use hierarchy to tell a story through the page - Test with real users doing real tasks