visual-hierarchy — Claude Code skill: what it does, how to install
This skill sets the order in which interface elements attract attention through size, weight, colour, spacing, and position. Use it when composing new screens.
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a claude-codeWhat visual-hierarchy does
The skill helps define how users read an interface. It uses size, text and stroke weight, colour and contrast, whitespace, position, and density. Larger elements attract attention first; contrast can mark CTAs, statuses, and other emphasis points.
It describes four hierarchy levels, from the page title and primary action to supporting text and fine print. The skill also covers hero sections, cards, forms, and navigation, plus a squint test and the rule of one primary action per view. It is meant for composing new work. To judge an existing screen, use critique-visual-hierarchy from visual-critique.
For Claude Code, installation creates ~/.claude/skills/visual-hierarchy/SKILL.md. Check the setup command before running it: the Claude Code method repeats the add command.
What it helps with
- set the reading order for interface elements
- make the primary CTA stand out
- separate headings, core content, and metadata
- shape hierarchy for cards, forms, or navigation
- check whether a screen scans clearly
Example prompts for the agent
- Apply
visual-hierarchyto this new profile screen and define the attention order. - Compose the page with one primary CTA, secondary headings, and supporting text using
visual-hierarchy. - Review this layout through size, contrast, spacing, and position with
visual-hierarchy.
How to install visual-hierarchy
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a claude-code2Manually: put the files in place
~/.claude/skills/visual-hierarchy/SKILL.mdCopy the whole skill folder; for one project use .claude/skills/visual-hierarchy/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a codex2Manually: put the files in place
.agents/skills/visual-hierarchy/SKILL.mdFor all projects use ~/.agents/skills/
1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a cursor2Manually: put the files in place
.cursor/skills/visual-hierarchy/SKILL.mdCursor also reads .agents/skills/ and .claude/skills/
1GitHub CLI
gh skill install Owl-Listener/designer-skills visual-hierarchy2Manually: put the files in place
.github/skills/visual-hierarchy/SKILL.md1Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a gemini-cli2Platform CLI
gemini skills install https://github.com/Owl-Listener/designer-skills --path ui-design/skills/visual-hierarchyManually: put the files in place
.devin/skills/visual-hierarchy/SKILL.mdThe legacy .windsurf/skills/ path still works
Skills CLI (Vercel)
npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a opencodeClaude.ai
Zip the folder and upload it in Settings → Capabilities → Skills
Step by step, with commands for each platform: How to install skills in Claude Code: five ways
Questions about visual-hierarchy
How do I install visual-hierarchy in Claude Code?
Run these steps in order: npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a claude-code, then run the same command again: npx skills add Owl-Listener/designer-skills --skill visual-hierarchy -a claude-code. The skill file is ~/.claude/skills/visual-hierarchy/SKILL.md.
What does visual-hierarchy do?
It guides attention through an interface with size, weight, colour, contrast, spacing, position, and density. The guidance covers four hierarchy levels and common layouts.
Can visual-hierarchy review an existing screen?
The skill is for composing new work. Use critique-visual-hierarchy from visual-critique to judge an existing screen.
Source text
SKILL.md · MIT
--- name: visual-hierarchy description: Establish hierarchy through size, weight, colour, spacing, and position so the eye lands in the intended order. Use when composing new work. For judging an existing screen, use `critique-visual-hierarchy` (visual-critique). --- # 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
© Owl-Listener · MIT · Owl-Listener/designer-skills
