visual-hierarchy
The visual-hierarchy skill guides designers in establishing clear information priority through size, weight, color, spacing, and positioning techniques. Use this when creating user interfaces that need intuitive scanning patterns, directing attention to primary actions and content before secondary supporting information. It provides specific hierarchy levels, common UI patterns, and validation methods like the squint test.
git clone --depth 1 https://github.com/Owl-Listener/designer-skills /tmp/visual-hierarchy && cp -r /tmp/visual-hierarchy/ui-design/skills/visual-hierarchy ~/.claude/skills/visual-hierarchySKILL.md
# 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
Facilitate structured design critiques with clear feedback frameworks and actionable outcomes.
Identify, categorize, and prioritize accumulated design inconsistencies and structural problems across a product.
Communicate design's contribution to business and user outcomes in terms that resonate with stakeholders.
Create QA checklists for verifying design implementation accuracy.
Establish design review gates with criteria, checklists, and approval workflows.
Plan and facilitate design sprints from challenge framing through prototype testing.
Create developer handoff specifications with measurements, behaviors, assets, and edge cases.
Design team workflows covering task management, collaboration rituals, and tooling.