What is the critique-visual-hierarchy skill?
The critique-visual-hierarchy skill is a SKILL.md in the visual-critique plugin of Owl-Listener's designer-skills pack. It makes an AI coding agent analyze a rendered screen for entry point, eye flow, weight and emphasis, rating each dimension and suggesting targeted fixes when hierarchy is unclear or unintentional.
The critique-visual-hierarchy skill is a SKILL.md in the visual-critique plugin of the designer-skills repository. It critiques a rendered screen's hierarchy: entry point, eye flow, weight distribution and emphasis. Use it when attention lands in the wrong place.
The agent acts as an expert in visual hierarchy and screen-level design critique. It analyzes whether hierarchy is clear, intentional and aligned with user goals, flags problems and suggests targeted fixes.
The four dimensions
- Entry point: the first element that captures the eye, and whether it is the most important thing on screen.
- Eye flow: the path the eye travels after landing, and whether it leads naturally to the primary call to action.
- Weight: the relative visual importance of each element, with size differentials of at least 1.5 times between levels.
- Emphasis: whether there is exactly one primary emphasis zone per view and whether it is earned.
Who the critique-visual-hierarchy skill is for
Best for
- Reviewing an existing screen where attention lands in the wrong place.
- Checking that a single dominant element sets the entry point and matches the primary user goal.
- Spotting a buried CTA that is visually quieter than the content around it.
Not for
- Establishing hierarchy in new work, which the visual-hierarchy skill in the ui-design plugin handles.
- Balance, whitespace and rhythm on a screen whose hierarchy is fine, which critique-composition reviews.
- Whether elements look clickable and how clear the CTA is, which critique-affordance reviews.
Failure patterns it flags
- Multiple competing primaries, so nothing reads as most important.
- Hierarchy flattening, with levels too similar in size, weight or color.
- False emphasis, where decorative elements outweigh functional ones.
- A buried CTA, where the action is visually quieter than surrounding content.
How to install Critique Visual Hierarchy Skill: Entry Point and Eye Flow
/plugin marketplace add Owl-Listener/designer-skills
/plugin install visual-critique@designer-skills/visual-critique:critique-screen, which runs all seven visual critiques on a screen and outputs a prioritized fix list.Add the marketplace
Run
/plugin marketplace add Owl-Listener/designer-skillsin your AI coding agent. This only tells the agent where the skills live and installs nothing yet.Install the visual-critique plugin
Run
/plugin install visual-critique@designer-skills. The critique-visual-hierarchy skill ships inside this plugin. You can also type/plugin, open the Discover tab, tick the plugin with space and press enter.Using Gemini CLI instead
Each plugin is also a Gemini CLI extension. Clone the repository, create
.gemini/extensionsin your project root and copy the cloned.gemini/extensionscontents into it.Ask for the skill by task
Attach a screenshot or describe the screen. For example: critique the visual hierarchy on this landing page and tell me where the eye lands first.
Check that it loaded
Give the agent a rendered screen. Expect an observation, a problem and a fix for each dimension, and a rating of pass, minor issue or major issue. The four dimensions should be Entry Point, Eye Flow, Weight and Emphasis.
Key features
- Entry point testAsks whether there is a single dominant element or attention scatters, and whether size, contrast or position establish the entry point clearly.
- Goal matchChecks that the entry point matches the primary user goal for the screen.
- Eye flow pathAsks whether the layout follows an F-pattern, a Z-pattern or an intentional reading order, with no dead ends, loops or confusing jumps.
- Path to the CTAChecks whether the flow of the eye leads naturally to the primary call to action.
- Size differentialsAsks whether size differentials are at least 1.5 times between hierarchy levels.
- Sparing boldChecks that bold or heavy type is used sparingly so it keeps its signal value, and that background fill, stroke weight and iconography add to the hierarchy instead of fighting it.
- Single emphasis zoneAsks whether there is exactly one primary emphasis zone per view, and whether it matches stakeholder and user priority.
- Overused emphasisLooks for color, contrast or motion used so heavily that the emphasis cancels itself out.
- Structured findingsEach dimension gets an observation, a problem and a fix, plus a rating of pass, minor issue or major issue.
Frequently asked questions
What is the critique-visual-hierarchy skill?
It is a SKILL.md in the visual-critique plugin of the Owl-Listener/designer-skills repository. It has an AI coding agent analyze whether a rendered screen's hierarchy is clear, intentional and aligned with user goals, covering entry point, eye flow, weight and emphasis, and it suggests targeted fixes.
How do I install critique-visual-hierarchy?
Run /plugin marketplace add Owl-Listener/designer-skills, then /plugin install visual-critique@designer-skills. The first command only registers where the skills live. You can also type /plugin, open the Discover tab, tick the plugin with space and press enter. Gemini CLI users copy the plugin's extension folder instead.
What does critique-visual-hierarchy check?
It checks four dimensions. Entry point asks whether the first thing the eye lands on is the most important. Eye flow asks whether the path afterward is deliberate. Weight asks whether visual importance is distributed purposefully. Emphasis asks whether there is one earned primary zone.
When should I use critique-visual-hierarchy?
Use it when attention lands in the wrong place on an existing, rendered screen. To establish hierarchy in new work, use the visual-hierarchy skill in the ui-design plugin. For balance, whitespace and rhythm when hierarchy is fine, use critique-composition. This skill rates each dimension pass, minor issue or major issue.
What does the critique-visual-hierarchy output look like?
For each of the four dimensions, Entry Point, Eye Flow, Weight and Emphasis, the agent gives an observation, a problem and a fix. The observation is neutral and factual, and each dimension is rated pass, minor issue or major issue.
Which hierarchy failures does critique-visual-hierarchy flag?
It flags multiple competing primaries where nothing reads as most important, hierarchy flattening where levels look too similar in size, weight or color, false emphasis where decoration outweighs function, and a buried CTA that is visually quieter than the content around it.
Which AI coding agents can use critique-visual-hierarchy?
The designer-skills pack is written for Claude Code and Gemini CLI. In Claude Code you add the marketplace and install the visual-critique plugin by name. Each plugin is also a Gemini CLI extension, which you copy into a .gemini/extensions folder in your project.
What license does critique-visual-hierarchy use?
It is MIT licensed. The Owl-Listener/designer-skills repository declares the MIT license on GitHub, and the visual-critique plugin ships from that repository. The critique-visual-hierarchy skill is installed with that plugin through the designer-skills marketplace, as the install steps above describe.