
Critique Visual Hierarchy
- 639 installs
- 2k repo stars
- Updated June 14, 2026
- owl-listener/designer-skills
critique-visual-hierarchy is a designer Claude skill that audits a screen's entry point, eye flow, weight distribution, and emphasis for developers who need actionable UI hierarchy fixes.
About
critique-visual-hierarchy is an owl-listener designer skill that performs screen-level visual hierarchy reviews for web and mobile interfaces. It evaluates whether a single dominant entry point guides attention, whether size, contrast, and position establish intentional emphasis, and whether eye flow aligns with user goals rather than scattering focus. The skill flags hierarchy problems—competing headlines, weak CTAs, flat weight distribution—and suggests targeted fixes without rewriting entire designs. Developers and designers reach for it when a dashboard, landing section, or app screen feels noisy, when primary actions are hard to spot, or before handoff when stakeholders question what users see first. Critique dimensions include entry point dominance, eye-flow path, visual weight balance, and emphasis alignment with task priority.
- critique-visual-hierarchy
Critique Visual Hierarchy by the numbers
- 639 all-time installs (skills.sh)
- +88 installs in the week ending Aug 4, 2026 (Skillselion tracking)
- Ranked #601 of 4,347 Backend & APIs skills by installs in the Skillselion catalog
- Data as of Aug 5, 2026 (Skillselion catalog sync)
npx skills add https://github.com/owl-listener/designer-skills --skill critique-visual-hierarchyAdd your badge
Show developers this skill is listed on Skillselion. Paste this into your README.
| Installs | 639 |
|---|---|
| repo stars | ★ 2k |
| Last updated | June 14, 2026 |
| Repository | owl-listener/designer-skills ↗ |
How do you critique visual hierarchy on a screen?
Use critique-visual-hierarchy for development tasks
Who is it for?
Frontend developers and designers reviewing individual screens where users struggle to find the primary action or focal content.
Skip if: Teams needing full brand systems, copy strategy, or end-to-end UX research instead of focused screen-level hierarchy analysis.
When should I use this skill?
A screen's visual hierarchy looks unclear, attention scatters across elements, or the primary CTA fails to dominate the layout.
What you get
Hierarchy critique notes covering entry point, eye flow, weight, and emphasis plus a prioritized list of targeted UI fixes.
- Hierarchy critique report
- Prioritized UI fix list
By the numbers
- Covers 4 critique dimensions: entry point, eye flow, weight distribution, and emphasis
Files
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: 1. Observation — what you see (neutral, factual) 2. Problem — what is broken and why it matters 3. Fix — a specific, actionable change Rate each dimension: pass / minor issue / major issue.
Common Failure Patterns
- Multiple competing primaries — nothing reads as most important
- Hierarchy flattening — too similar in size, weight, or colour across levels
- False emphasis — decorative elements outweigh functional ones
- Buried CTA — the action is visually quieter than surrounding content
Related skills
How it compares
Use critique-visual-hierarchy for fast screen-level hierarchy feedback; use a full design-system or wireframing skill when building components from scratch.
FAQ
What does critique-visual-hierarchy analyze on a screen?
critique-visual-hierarchy analyzes entry point dominance, eye-flow sequence, visual weight distribution, and whether emphasis matches the most important user goal. Each dimension produces specific problems and fix suggestions.
Does critique-visual-hierarchy generate new UI mockups?
critique-visual-hierarchy focuses on critique and targeted recommendations for hierarchy problems. It does not replace a full design generator; it tells developers which elements need stronger size, contrast, or position changes.