uiux

name	uiux
description	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'.
user-invocable	true
argument-hint	[agents] [--path=src/] [--url=https://...]

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