From design-crit
Use when evaluating information hierarchy within screens — what's prominent, what's secondary, and how the user's eye is guided through content.
How this skill is triggered — by the user, by Claude, or both
Slash command
/design-crit:crit-content-hierarchyThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
**Reference:** Read `../../reference/crit-loop.md` for compare view, feedback round-trip, convergence, and locking mechanics.
Reference: Read ../../reference/crit-loop.md for compare view, feedback round-trip, convergence, and locking mechanics.
You are critting content hierarchy -- how information is prioritized, emphasized, and sequenced within each screen. This facet determines what the user sees first, what they see next, and what they have to hunt for. Good hierarchy makes a screen self-explanatory in seconds. Bad hierarchy makes every screen a puzzle.
Content hierarchy sits in the compositional lens. It depends on content-layout (the spatial grid must exist before you can assign emphasis within it) and feeds into sensory facets like typography, color-system, and density-spacing which implement the hierarchy through visual means.
Before generating any options, read:
.design-crit/state.json -- current facet state, round number, locked decisions.design-crit/brief.md -- project purpose, target users, core loop.design-crit/facets/content-hierarchy/feedback-round-{N-1}.json -- prior feedback (skip for round 1)content-layout (the grid you are working within) and navigation-model (what navigation chrome exists)State what you are building on: "Building on the locked layout: [summary]. Navigation is [summary]. Hierarchy decisions apply within this structure."
Generate wireframes with emphasis annotations and reading order diagrams.
Each option file (option-{x}.html) must contain:
Render wireframes for the primary screens identified in the screen inventory. Use the locked layout grid as the structural foundation. Do NOT reinvent the layout -- place content within it.
Within each screen wireframe, convey hierarchy through:
Use grayscale only. This facet is about structural emphasis, not color. Reserve color hierarchy for the color-system facet.
Include a numbered reading order overlay on each wireframe. Draw numbered circles (1, 2, 3...) connected by a light dashed path showing the intended eye flow. This makes the hierarchy explicit and reviewable.
Below each wireframe, include a legend:
| Level | Role | Visual Treatment |
|---|---|---|
| Primary | Page title, hero content, main CTA | Largest, heaviest, most space |
| Secondary | Section headings, key data, supporting actions | Medium size, clear grouping |
| Tertiary | Body content, descriptions, metadata | Standard weight, comfortable reading |
| Ambient | Timestamps, fine print, system info | Smallest, lowest contrast |
Map each element in the wireframe to an emphasis level.
Score each option against these questions. State your assessment in the critique.
Can a new user understand the page purpose and find the primary action within 5 seconds of seeing the screen? If the answer is no, the hierarchy has failed at its most basic job.
For each screen, articulate in one sentence: "This page is for [purpose] and the first thing you do is [primary action]." If that sentence is not obvious from the wireframe alone, the hierarchy needs work.
Is the primary CTA (call to action) the most visually prominent interactive element on the screen? Check:
Does the numbered reading path follow a logical sequence for the task?
Are there elements fighting for the same attention level? Common problems:
Is the right amount of information visible immediately vs available on demand?
Use these as reference when evaluating and generating options. Not every screen fits a pattern -- but deviations should be intentional.
Users scan horizontally across the top, then down the left side with shorter horizontal scans. Best for:
Place the most important content in the top-left quadrant and along the left edge. Secondary content fills the right side and lower portions.
Users scan top-left to top-right, diagonal to bottom-left, then to bottom-right. Best for:
Place brand/context top-left, key visual top-right, supporting info bottom-left, primary CTA bottom-right.
A central focal point with satellite elements radiating outward. Best for:
Place the most important element (metric, image, title) at the visual center. Supporting elements orbit with decreasing emphasis.
Divides the page into four quadrants with predictable attention: primary (top-left), strong fallow (top-right), weak fallow (bottom-left), terminal (bottom-right). Best for:
Place key content in the primary area and the CTA in the terminal area.
Present these trade-offs when they apply to the user's project. Name the tension explicitly.
Generate 2-4 options exploring genuinely different hierarchy strategies. Each option must answer a different question about what matters most on each screen.
Useful axes of variation for round 1:
Name each option by its dominant strategy: "Data Hero," "Action-First Minimal," "Editorial Flow," "Dense Dashboard."
Refine surviving options based on user feedback. Typical refinements:
Focus on fine-tuning: micro-adjustments to spacing-as-emphasis, resolving any remaining competing-emphasis issues, and ensuring the hierarchy works across all primary screens (not just the one the user focused on in feedback).
When writing the critique for each option in critique.md, address every item:
Content hierarchy decisions constrain downstream facets:
State these downstream implications in the critique: "This hierarchy uses 4 levels, which means the type scale will need at least 4 distinct steps."
When the user locks a content hierarchy option:
state.json with locked_summary describing the hierarchy strategy (e.g., "4-level hierarchy with data-hero focus, F-pattern reading flow, progressive disclosure for settings and metadata").npx claudepluginhub metedata/design-crit --plugin design-critArranges screen elements by importance using size, weight, contrast, and whitespace so the eye naturally travels from most to least important.
Guides UI visual hierarchy with size/weight/color levers, three-tier architecture, one dominant element per screen, de-emphasis, F/Z-patterns for headings, CTAs, focal points.
Guides visual hierarchy in UIs using size, weight, color, spacing, position, and density. Defines levels, patterns for heroes/cards/forms, and practices like squint test.