ux-evaluator_skill

Overview

This skill evaluates UI components against UX best practices using a concise, evidence-based framework. It turns subjective design opinions into actionable recommendations that align with industry conventions like Nielsen heuristics and common patterns from major sites. Use it to reduce debate and prioritize changes that improve usability and discoverability.

How this skill works

The skill inspects three dimensions for any interface element: Position (placement and discoverability), Visual Weight (prominence and hierarchy), and Spacing (separation and touch targets). It documents the current state, compares it to conventions, and issues a verdict per dimension (OK / NEEDS CHANGE / ACCEPTABLE) with prioritized recommendations. Each recommendation references common patterns and authoritative guidelines to justify the change.

When to use it

• When you ask to 'review UX', 'evaluate layout', or 'check button design'.
• Before implementing interface changes that affect user flows or primary actions.
• When button order, labels, or visual hierarchy feel unclear or inconsistent.
• When navigation placement or utility controls (search, theme) might compete with CTAs.
• When spacing or touch targets may impact mobile usability.

Best practices

• Always evaluate Position, Visual Weight, and Spacing for every component.
• Place primary actions to the right and secondary actions to the left in horizontal groups.
• Make primary CTAs visually dominant (filled brand color), secondary subtle (outline/ghost).
• Maintain consistent spacing: button groups ≥24px, between buttons 8–12px, mobile touch 44px min.
• Reference a concrete convention (GitHub/Stripe/Google) when recommending changes.
• Prioritize recommendations (P1 critical, P2 important, P3 polish) and give exact measurements.

Example use cases

• Reviewing a modal with unclear primary/secondary button placement before release.
• Checking navbar layout to ensure logo, primary nav, and utilities follow conventions.
• Evaluating form layout for label placement, error visibility, and submit button position.
• Assessing a dashboard toolbar where utility icons may be competing with CTAs.
• Validating mobile button sizes and spacing to meet touch target recommendations.