What are the core metrics for visual attention used by this skill?

The skill follows a model where size influences approximately 45% of attention, color influences 30%, and typography influences 25%.

What is the main goal of the Visual Hierarchy Principles skill?

The primary goal is to guide a user's attention through an interface in a deliberate sequence by manipulating visual elements like size, color, and spacing.

Can I use this skill for both web and mobile design?

Yes, the principles of size, scale, and positioning are universally applicable across desktop, mobile, and even print interfaces.

How does this skill help with web accessibility?

It provides specific guidance on WCAG AA contrast ratios, minimum touch-target sizes, and font weights to ensure designs are usable for everyone.

Visual Hierarchy Principles

Name: Visual Hierarchy Principles
Author: lev-os

bylev-os

0•

Design Tools

Implements proven UI/UX design patterns using size, contrast, and spacing to guide user attention and improve interface clarity.

This skill provides a comprehensive framework for applying visual hierarchy to user interfaces, helping developers and designers prioritize information effectively. By leveraging cognitive psychology and data-driven attention allocation—where size, color, and typography are the primary levers—it enables the creation of intuitive layouts that reduce cognitive load, improve conversion paths, and ensure WCAG accessibility compliance across web and mobile platforms.

Key Features

01Contrast-based focus strategies for primary and secondary actions

02Attention-driven layout optimization using size and scale factors

03Typographic scaling for clear and readable information architecture

04Whitespace management and Gestalt grouping for intuitive grouping

05WCAG-compliant color and contrast guidance for better accessibility

060 GitHub stars

Use Cases

01Designing high-conversion landing pages with clear call-to-action paths

02Simplifying information-dense analytics dashboards and complex data tables

03Optimizing mobile UI usability through strategic touch-target and scale adjustments

What are Skills?·How to Install

Install with 🐟 Skill.Fish

npx skillfish add lev-os/agents visual-hierarchy-principles

For use in Claude.ai and ChatGPT

Download Skill