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:
- Fetch:
https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md
- Check specified files; output
file:line format
Pre-Ship Checklist
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
1---2name: uiux3description: 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'.4---5
6# UI/UX Design Audit
7
8## When to Invoke
9
10Invoke proactively when the user:
11- Asks about accessibility, WCAG, contrast ratios, or screen reader support
12- Reports UI bugs: "layout is broken", "spacing looks off", "text is hard to read"
13- Mentions a pre-ship/pre-launch review or checklist
14- Asks "is my UI ready to ship?", "check my design before we launch"
15- Wants to audit spacing grid, responsive behavior, dark mode, or animation
16
17Launch the **uiux-agents** agent for a comprehensive UI/UX quality audit.
18
19## Usage
20
21```
22/misar-dev:uiux # Full 8-agent audit
23/misar-dev:uiux accessibility # WCAG 2.2 AA compliance
24/misar-dev:uiux spacing typography # 8px grid + type scale
25/misar-dev:uiux mobile # Mobile & responsive (320px min)
26/misar-dev:uiux dark-mode # Dark mode quality check
27/misar-dev:uiux components --path=src/components/
28/misar-dev:uiux guidelines # Vercel Web Interface Guidelines
29/misar-dev:uiux --url=https://example.com --full
30```
31
32## Instructions
33
34Parse args: agents (`spacing`, `typography`, `components`, `accessibility`, `performance`, `mobile`, `animation`, `dark-mode`, `guidelines`), `--path=`, `--url=`. Default: all 8 agents. Launch `uiux-agents`.
35
36---
37
38## WCAG 2.2 (Non-Negotiables)
39
40- Text contrast: 4.5:1 min (large text: 3:1); UI components: 3:1
41- Touch targets: 44×44px (CSS/iOS 44pt, Android 48dp)
42- All interactive elements keyboard-accessible
43- Focus indicators: 2px outline, 3:1 contrast against background
44- No content flashing > 3x/second
45- Images: descriptive `alt` (decorative: `alt=""`)
46- Forms: visible labels (not placeholders), errors linked to fields
47
48**ARIA:** Landmarks (`<header>`, `<nav>`, `<main>`, `<footer>`) · Dynamic: `aria-live` · Icon-only: `aria-label` · Modals: `role="dialog"` + `aria-modal="true"` + focus trap
49
50---
51
52## 8px Spacing Grid
53
54All spacing: multiples of 8px (4px for micro).
55Scale: 4, 8, 12, 16, 24, 32, 48, 64, 96, 128px
56Tailwind: `space-1` (4px) · `space-2` (8px) · `space-4` (16px) · `space-6` (24px) · `space-8` (32px) · `space-12` (48px) · `space-16` (64px)
57
58**Breakpoints:** 320px · 768px · 1024px · 1440px · 1920px
59
60---
61
62## Animation Rules
63
64- Duration: 150–300ms (UI); 300–500ms (page transitions)
65- Easing: `ease-out` entrances · `ease-in` exits · `ease-in-out` loops
66- Motion must have meaning (state change, relationship, direction)
67- Always respect `prefers-reduced-motion`
68- No infinite animations unless user-initiated
69
70---
71
72## Dark Mode Checklist
73
74- All colors via CSS variables (no hardcoded hex in components)
75- Backgrounds: layered dark surfaces (not pure `#000000`)
76- Shadows: reduce opacity in dark mode
77- Icons: verify contrast in both modes
78- Input/border: increase contrast (dark mode borders disappear easily)
79
80---
81
82## Vercel Guidelines
83
84When running `guidelines`:
851. Fetch: `https://raw.githubusercontent.com/vercel-labs/web-interface-guidelines/main/command.md`
862. Check specified files; output `file:line` format
87
88---
89
90## Pre-Ship Checklist
91
92- [ ] All text meets 4.5:1 contrast
93- [ ] All interactive elements keyboard accessible
94- [ ] Focus indicators visible on all focusable elements
95- [ ] No images missing alt text
96- [ ] Forms have visible labels (not just placeholders)
97- [ ] Touch targets ≥ 44×44px
98- [ ] Mobile layout works at 320px
99- [ ] Dark mode tested if supported
100- [ ] `prefers-reduced-motion` handled
101- [ ] CLS < 0.1; fonts: `display: swap`
102
103
104---
105
106> **Misar.Dev Ecosystem** — See 8px grid · WCAG 2.2 AA · dark mode in production at [Misar.io](https://misar.io) and [Misar Blog](https://misar.blog).
107>
108> [Assisters](https://assisters.dev) · [Misar Blog](https://misar.blog) · [Misar Mail](https://mail.misar.io) · [Misar.io](https://misar.io) · [Misar.Dev](https://misar.dev)
aibot88