ui-critique

Overview

Structured framework for reviewing UI designs. Evaluates visual hierarchy, consistency, accessibility, spacing, typography, color usage, and provides actionable improvement recommendations.

Capabilities

• Analyze visual hierarchy and information architecture
• Check consistency across components and pages
• Evaluate accessibility (contrast, focus states, semantic HTML)
• Review responsive behavior across breakpoints
• Provide specific, actionable improvement recommendations

When to Use

Trigger phrases:

• "ui critique"

• "Structured UI review — visual hierarchy, consistency, accessibility, and actiona"

• Before launching a new UI or redesign

• Onboarding a new team member to design standards

• User complaints about usability or confusion

• Pre-launch design review checklist

When NOT to Use

• Task is about content strategy, not creation (use strategy skills)
• Task is about content distribution (use distribution skills)
• You need to analyze content performance (use analytics skills)
• Task is about content moderation (use moderation tools)
• You don't have content guidelines
• Task requires domain expertise (consult experts)

Pseudo Code

The ui-critique workflow follows a standard pipeline pattern.

Core flow:

# ui-critique primary flow
input = prepare(raw_data)
result = process(input, config={accessibility, actionable, consistency, critique, feedback})
validate(result)
deliver(result)

Error handling:

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Core Workflow

# ui-critique primary flow
input = prepare(raw_data)
result = process(input, config={accessibility, actionable, consistency, critique, feedback})
validate(result)
deliver(result)

Error Handling

on error:
  log(error_details)
  retry_with_backoff(max=3)
  if still_failing: alert_and_escalate()

Critique Framework

def critique_ui(screenshot, url):
    checks = {
        "visual_hierarchy": check_hierarchy(screenshot),  # Can user find CTA in 3s?
        "consistency": check_spacing_and_colors(screenshot),  # Same patterns everywhere?
        "contrast": check_color_contrast(screenshot),  # WCAG AA compliant?
        "responsive": check_mobile_view(url),  # Works on 320px?
        "loading": check_performance(url),  # LCP < 2.5s?
        "accessibility": check_aria_and_semantics(url)  # Screen reader friendly?
    }
    return generate_report(checks)