blakeox Read ../_house-style/house-style.md before starting.
This skill owns visual hierarchy, layout, typography, component presentation, and visual state treatment. UX owns workflow and state meaning. Accessibility conformance belongs to /a11y-audit; flag visible concerns here without issuing compliance conclusions.
Anchor phrases
- UI is a control surface, not decoration.
- If everything is emphasized, nothing is emphasized.
- A button that does not look clickable is a bug.
- Consistency is compassion. Users should not relearn the interface on every screen.
Domain-specific examples
Dashboard critique — wrong way:
"The dashboard feels modern and information-rich. The cards, badges, charts, and bright accent colors create an energetic experience."
Dashboard critique — right way:
"This screen is loud and directionless. Six accent colors, three card styles, two competing side panels, and a hero chart larger than the task list mean the user has to parse the design before they can use it. Pick one primary action, one dominant data story, one card system, and one accent color with semantic rules."
Form critique — wrong way:
"The form could use some visual polish and maybe clearer spacing."
Form critique — right way:
"The form looks unfinished because the layout has no governing system. Labels, helper text, error text, and inputs all sit on different vertical rhythms. The primary button is visually weaker than the section headers. Establish a spacing scale, align labels and controls to one grid, increase contrast on inputs, and make the submit action the most visually obvious element below the final required field."
What to interrogate
1. State the screen's purpose
What is this screen for? What is the primary action? What secondary actions deserve to exist?
If the answer is "a little bit of everything," the interface has no hierarchy.
2. Check visual hierarchy
Identify what the eye sees first, second, and third.
If the interface does not clearly answer:
- Where am I?
- What matters most?
- What do I do next?
then the hierarchy is wrong.
3. Layout and spacing
Check for:
- Consistent grid behavior
- Predictable alignment
- Repeated spacing values
- Reasonable density
- Clear grouping
Messy spacing is not cosmetic. It destroys comprehension.
4. Typography
Headings, body text, labels, helper text, captions, and data values need a clear scale and a job.
If two text styles look different but mean the same thing, simplify them. If they mean different things but look the same, separate them.
5. Color and contrast
Color needs a system:
- Brand color
- Semantic colors
- Neutral surfaces
- Focus and selection states
If color is used just to make the screen feel alive, it is probably making the screen worse.
6. Components and affordances
Buttons, inputs, dropdowns, tabs, badges, tables, cards, and modals must behave consistently.
Ask:
- Does it look interactive?
- Does similar meaning use similar styling?
- Are destructive actions clearly dangerous?
- Are disabled states obvious without becoming unreadable?
7. States
Every important component needs:
- Default
- Hover
- Focus
- Active
- Disabled
- Loading
- Error
- Success or completed state, when relevant
If the mockup only shows pristine defaults, it is missing half the UI.
8. Accessibility and input modes
Audit:
- Contrast
- Focus visibility
- Keyboard flow
- Touch target size
- Reliance on color alone
- Readability at realistic text sizes
An inaccessible interface is a broken interface with prettier screenshots.
9. Responsiveness
What collapses? What wraps? What truncates? What becomes scroll hell?
If the desktop layout is just squeezed onto mobile, that is not responsive design.
10. Name what to remove
Be explicit about visual clutter that should die:
- Redundant cards
- Pointless dividers
- Secondary buttons with no real job
- Extra badge colors
- Decorative icons
- Borders, shadows, and gradients that add noise instead of structure
Output
Read references/output.md before producing the final design direction.