critique-visual-hierarchy

owl-listener/designer-skills

Critique visual hierarchy on rendered screens to fix misaligned attention and eye flow.

What is critique-visual-hierarchy?

Analyzes a screen's visual hierarchy across entry point, eye flow, weight distribution, and emphasis to identify whether attention lands where it should. Use this when a design's focal points or reading order feel wrong or don't match user goals.

Evaluates entry point clarity — whether the first element the eye lands on is the most important
Traces eye flow path to ensure it follows intentional patterns (F, Z, or reading order) and leads to primary actions
Assesses weight distribution across elements to confirm size, contrast, and visual importance are proportional and purposeful
Identifies emphasis zones and flags competing primaries, flattened hierarchies, or buried calls-to-action
Rates each dimension (entry point, eye flow, weight, emphasis) as pass, minor issue, or major issue with specific fixes

How to install critique-visual-hierarchy

npx skills add https://github.com/owl-listener/designer-skills --skill critique-visual-hierarchy

Claude Code

Cursor

Windsurf

Cline

How to use critique-visual-hierarchy

1.Provide a rendered screenshot or visual of the screen you want to critique
2.Specify the primary user goal or intended entry point for that screen
3.The skill will analyze the four dimensions (entry point, eye flow, weight, emphasis) and return observations, problems, and fixes for each
4.Review the rated findings and apply the suggested fixes to your design

Use cases

Good for

Review a redesigned dashboard where users are clicking the wrong buttons or missing key information
Audit an e-commerce product page where the add-to-cart button is visually lost among other elements
Critique a form layout where users skip important fields because they lack visual prominence
Evaluate a mobile app screen where attention scatters instead of flowing to the primary action
Assess a landing page where the value proposition is buried below secondary content

Who it's for

UI/UX designers refining existing designs
Product managers reviewing screen mockups before handoff
Design leads conducting design reviews
Frontend developers implementing visual hierarchy in code

critique-visual-hierarchy FAQ

What's the difference between this skill and `visual-hierarchy`?

`critique-visual-hierarchy` analyzes existing rendered screens to find problems; `visual-hierarchy` (in ui-design) helps you establish hierarchy from scratch in new work.

What format should I provide the screen in?

A rendered screenshot, mockup image, or visual representation of the screen you want critiqued.

Does this skill evaluate accessibility or readability?

No — it focuses specifically on visual hierarchy (entry point, eye flow, weight, emphasis). Use other skills for contrast ratios, font sizes, or WCAG compliance.

Can this critique interactive or animated screens?

Best results with static screenshots. For motion-based emphasis, describe the animation or provide frame sequences.

What if my design has multiple valid entry points?

The skill will flag this as a hierarchy problem and suggest consolidating to a single primary entry point, or clearly differentiating secondary paths.

Full instructions (SKILL.md)

Source of truth, from owl-listener/designer-skills.

name: critique-visual-hierarchy description: Critique a rendered screen's hierarchy — entry point, eye flow, weight distribution, and emphasis. Use when attention lands in the wrong place. For establishing hierarchy in new work, use `visual-hierarchy` (ui-design).

Critique Visual Hierarchy

You are an expert in visual hierarchy and screen-level design critique.

What You Do

You analyse a screen to identify whether hierarchy is clear, intentional, and aligned with user goals. You flag problems and suggest targeted fixes.

Critique Dimensions

Entry Point

The first element that captures the eye. Evaluate whether it is the most important thing on screen.

Is there a single dominant element, or does attention scatter?
Does size, contrast, or position establish the entry point clearly?
Does the entry point match the primary user goal for this screen?

Eye Flow

The path a user's eye travels after landing. Evaluate whether the path is deliberate and efficient.

Does the layout follow an F-pattern, Z-pattern, or intentional reading order?
Are there dead ends, loops, or confusing jumps?
Does flow lead naturally to the primary call-to-action?

Weight

The relative visual importance of each element. Evaluate whether weight is distributed purposefully.

Are size differentials at least 1.5× between hierarchy levels?
Is bold/heavy type used sparingly so it retains signal value?
Do background fill, stroke weight, and iconography add or fight the hierarchy?

Emphasis

Specific elements that demand extra attention. Evaluate whether emphasis is earned and singular.

Is there exactly one primary emphasis zone per view?
Are colour, contrast, or motion used to emphasise — or overused so they cancel out?
Does the highest-emphasis element match stakeholder and user priority?

Output Format

For each dimension — Entry Point, Eye Flow, Weight, Emphasis — provide:

Observation — what you see (neutral, factual)
Problem — what is broken and why it matters
Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.