just-vibeUI and frontend · inspect by default
/ui-audit
Inspect hierarchy, consistency, usability, and visual clarity
Use to identify usability/visual issues in an existing journey; design implements a new direction.
Make it your own.
In Claude Code, use the slash command and add your context. In Codex, select ui-audit from the just-vibe skill picker, then send the same brief.
Version 0.11.0 also supports /jv ui-audit, /just-vibe ui-audit and /jv:ui-audit in Claude. See shortcut setup and context examples.
/just-vibe:ui-audit Audit the billing journey for hierarchy, consistency, and recoverability./just-vibe:ui-audit Audit checkout with an empty cart, payment failure and narrow viewport./just-vibe:ui-audit Audit screenshots without interaction access; mark keyboard and dynamic states unreviewed.What the agent does
- Walk the primary and recovery journey at representative widths and states with realistic long and empty content.
- Tie each finding to an action the user cannot understand or complete, and prioritize by user impact rather than personal taste.
Inputs
- screens/flow, audience, and usability goals.
Optional context: scope, references, constraints, successCriteria, environment, mode, budget.
Scope
- Reads
- Hierarchy, consistency, content clarity, state coverage, and interaction barriers.
- Writes
- No source changes in inspect/plan. Save only requested planning artifacts. A separately requested repair uses the relevant implementation workflow.
- Mode
- Inspect; screens/flow, audience, and usability goals.
- Prerequisites
- Target screens/flows, existing design conventions, and runnable UI or supplied references. Visual claims require actual renders; accessibility claims distinguish automated, keyboard, and assistive-technology evidence.
Expected output
- Findings annotated with state/viewport, user impact, evidence and a prioritized correction.
How the work is checked
- A confusing recovery path has a reproducible example; established brand choices are not automatically labeled defects.
When to stop or clarify
- No redesign during inspection. Missing mobile/error-state evidence is identified as unreviewed rather than assumed correct.
Handling missing context
- Infer
- Inspect the target flow, existing components/tokens, actual renders or supplied references and current responsive behavior.
- Assume
- Reuse established visual conventions and preserve keyboard behavior; label unrendered changes as visually unverified.
- Ask
- Ask about an unresolved interaction or visual direction only when plausible choices materially differ; do not make a missing screenshot block source inspection.
Technical guidance
- Evidence
- Inspect real screens and tasks across normal, empty, error and narrow-screen states.
- Method
- Prioritize hierarchy, discoverability and task completion using concrete observations; separate visual preference from usability failure.
- Pitfall
- A screenshot cannot establish keyboard behavior, contrast in every state or successful end-to-end completion.
- Check
- Revisit the same tasks and viewports after changes and cite the remaining unobserved interaction states.
Situational decisions
When a preference has no demonstrated user impact: Label it a design option rather than a defect.
The coding agent follows this workflow using its available tools. Installation does not grant service access or guarantee an outcome. Read the compatibility notes.