uiux

Use when: auditing UI/UX quality, checking WCAG accessibility, reviewing spacing/layout/grid, mobile responsiveness issues, dark mode review, component pattern audit, pre-ship UI checklist, contrast ratios, touch targets, animation review. Triggers: 'check accessibility', 'audit my UI', 'is this accessible', 'fix spacing issues', 'WCAG compliance', 'mobile UI broken', 'pre-ship checklist', 'UI audit'.

UI/UX Design Audit

When to Invoke

Invoke proactively when the user:

  • Asks about accessibility, WCAG, contrast ratios, or screen reader support
  • Reports UI bugs: "layout is broken", "spacing looks off", "text is hard to read"
  • Mentions a pre-ship/pre-launch review or checklist
  • Asks "is my UI ready to ship?", "check my design before we launch"
  • Wants to audit spacing grid, responsive behavior, dark mode, or animation

Launch the uiux-agents agent for a comprehensive UI/UX quality audit.

Usage

/misar-dev:uiux                          # Full 8-agent audit
/misar-dev:uiux accessibility            # WCAG 2.2 AA compliance
/misar-dev:uiux spacing typography       # 8px grid + type scale
/misar-dev:uiux mobile                   # Mobile & responsive (320px min)
/misar-dev:uiux dark-mode               # Dark mode quality check
/misar-dev:uiux components --path=src/components/
/misar-dev:uiux guidelines               # Vercel Web Interface Guidelines
/misar-dev:uiux --url=https://example.com --full

Instructions

Parse args: agents (spacing, typography, components, accessibility, performance, mobile, animation, dark-mode, guidelines), --path=, --url=. Default: all 8 agents. Launch uiux-agents.

WCAG 2.2 (Non-Negotiables)

  • Text contrast: 4.5:1 min (large text: 3:1); UI components: 3:1
  • Touch targets: 44×44px (CSS/iOS 44pt, Android 48dp)
  • All interactive elements keyboard-accessible
  • Focus indicators: 2px outline, 3:1 contrast against background
  • No content flashing > 3x/second
  • Images: descriptive alt (decorative: alt="")
  • Forms: visible labels (not placeholders), errors linked to fields

ARIA: Landmarks (<header>, <nav>, <main>, <footer>) · Dynamic: aria-live · Icon-only: aria-label · Modals: role="dialog" + aria-modal="true" + focus trap

8px Spacing Grid

All spacing: multiples of 8px (4px for micro). Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px Tailwind: space-1 (4px) · space-2 (8px) · space-4 (16px) · space-6 (24px) · space-8 (32px) · space-12 (48px) · space-16 (64px)

Breakpoints: 320px · 768px · 1024px · 1440px · 1920px

Animation Rules

  • Duration: 150–300ms (UI); 300–500ms (page transitions)
  • Easing: ease-out entrances · ease-in exits · ease-in-out loops
  • Motion must have meaning (state change, relationship, direction)
  • Always respect prefers-reduced-motion
  • No infinite animations unless user-initiated

Dark Mode Checklist

  • All colors via CSS variables (no hardcoded hex in components)
  • Backgrounds: layered dark surfaces (not pure #000000)
  • Shadows: reduce opacity in dark mode
  • Icons: verify contrast in both modes
  • Input/border: increase contrast (dark mode borders disappear easily)

Vercel Guidelines

When running guidelines:

  1. Fetch: https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
  2. Check specified files; output file:line format

Pre-Ship Checklist

  • All text meets 4.5:1 contrast
  • All interactive elements keyboard accessible
  • Focus indicators visible on all focusable elements
  • No images missing alt text
  • Forms have visible labels (not just placeholders)
  • Touch targets ≥ 44×44px
  • Mobile layout works at 320px
  • Dark mode tested if supported
  • prefers-reduced-motion handled
  • CLS < 0.1; fonts: display: swap

Misar.Dev Ecosystem — See 8px grid · WCAG 2.2 AA · dark mode in production at Misar.io and Misar Blog.

Assisters · Misar Blog · Misar Mail · Misar.io · Misar.Dev