UI/UX Expert
The UI/UX Expert agent specializes in user interface design, user experience, and design systems.
Expertise Areas#
- Design Systems - Components, tokens, patterns
- Accessibility (a11y) - WCAG, ARIA, screen readers
- Responsive Design - Mobile-first, breakpoints
- Interaction Design - Animations, micro-interactions
- User Research - Heuristics, usability testing
- Visual Design - Typography, color, spacing
- Component Patterns - Forms, navigation, feedback
Usage Examples#
Design System#
Use the ui-ux-expert agent to create a design system for our SaaS dashboard.
Response includes:
- Design tokens (colors, spacing, typography)
- Component specifications
- Usage guidelines
- Accessibility requirements
Accessibility Audit#
Use the ui-ux-expert agent to audit this form for accessibility issues.
Response includes:
- WCAG compliance check
- Issues found
- Remediation steps
- Testing recommendations
Component Design#
Use the ui-ux-expert agent to design an accessible dropdown menu component.
Response includes:
- Component specification
- Keyboard navigation
- ARIA attributes
- Implementation code
Design Tokens#
1// tokens.ts
2export const tokens = {
3 colors: {
4 // Brand
5 brand: {
6 50: '#f0fdf4',
7 100: '#dcfce7',
8 500: '#22c55e',
9 600: '#16a34a',
10 700: '#15803d',
11 },
12 // Semantic
13 semantic: {
14 success: '#22c55e',
15 error: '#ef4444',
16 warning: '#f59e0b',
17 info: '#3b82f6',
18 },
19 // Neutral
20 gray: {
21 50: '#f9fafb',
22 100: '#f3f4f6',
23 // ... etc
24 },
25 },
26
27 spacing: {
28 0: '0',
29 1: '0.25rem', // 4px
30 2: '0.5rem', // 8px
31 3: '0.75rem', // 12px
32 4: '1rem', // 16px
33 6: '1.5rem', // 24px
34 8: '2rem', // 32px
35 },
36
37 typography: {
38 fontFamily: {
39 sans: 'Inter, system-ui, sans-serif',
40 mono: 'JetBrains Mono, monospace',
41 },
42 fontSize: {
43 xs: '0.75rem',
44 sm: '0.875rem',
45 base: '1rem',
46 lg: '1.125rem',
47 xl: '1.25rem',
48 '2xl': '1.5rem',
49 },
50 fontWeight: {
51 normal: '400',
52 medium: '500',
53 semibold: '600',
54 bold: '700',
55 },
56 },
57
58 borderRadius: {
59 none: '0',
60 sm: '0.25rem',
61 md: '0.375rem',
62 lg: '0.5rem',
63 xl: '0.75rem',
64 full: '9999px',
65 },
66
67 shadows: {
68 sm: '0 1px 2px 0 rgb(0 0 0 / 0.05)',
69 md: '0 4px 6px -1px rgb(0 0 0 / 0.1)',
70 lg: '0 10px 15px -3px rgb(0 0 0 / 0.1)',
71 },
72};Accessibility Guidelines#
WCAG 2.1 Compliance#
| Level | Requirements |
|---|---|
| A | Basic accessibility (required) |
| AA | Enhanced accessibility (recommended) |
| AAA | Highest accessibility |
Key Requirements#
1// 1. Color contrast (4.5:1 for text, 3:1 for large text)
2// Use tools like WebAIM Contrast Checker
3
4// 2. Keyboard navigation
5<button
6 onClick={handleClick}
7 onKeyDown={(e) => {
8 if (e.key === 'Enter' || e.key === ' ') {
9 handleClick();
10 }
11 }}
12>
13 Click me
14</button>
15
16// 3. Focus management
17<button className="focus:outline-none focus:ring-2 focus:ring-brand-500 focus:ring-offset-2">
18 Accessible button
19</button>
20
21// 4. ARIA labels
22<button aria-label="Close dialog" aria-describedby="dialog-description">
23 <XIcon />
24</button>
25
26// 5. Form accessibility
27<label htmlFor="email" className="block text-sm font-medium">
28 Email address
29</label>
30<input
31 id="email"
32 name="email"
33 type="email"
34 aria-describedby="email-error"
35 aria-invalid={!!errors.email}
36/>
37{errors.email && (
38 <p id="email-error" role="alert" className="text-red-500">
39 {errors.email}
40 </p>
41)}Screen Reader Best Practices#
1// Skip link
2<a href="#main-content" className="sr-only focus:not-sr-only">
3 Skip to main content
4</a>
5
6// Landmark regions
7<header role="banner">...</header>
8<nav role="navigation" aria-label="Main">...</nav>
9<main id="main-content" role="main">...</main>
10<aside role="complementary">...</aside>
11<footer role="contentinfo">...</footer>
12
13// Live regions for dynamic content
14<div role="status" aria-live="polite">
15 {notification}
16</div>
17
18// Announcements
19<div role="alert" aria-live="assertive">
20 {error}
21</div>Component Patterns#
Button Variants#
1interface ButtonProps {
2 variant: 'primary' | 'secondary' | 'ghost' | 'danger';
3 size: 'sm' | 'md' | 'lg';
4 disabled?: boolean;
5 loading?: boolean;
6 children: React.ReactNode;
7}
8
9const buttonStyles = {
10 base: 'inline-flex items-center justify-center font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none',
11 variants: {
12 primary: 'bg-brand-600 text-white hover:bg-brand-700 focus:ring-brand-500',
13 secondary: 'bg-gray-100 text-gray-900 hover:bg-gray-200 focus:ring-gray-500',
14 ghost: 'bg-transparent hover:bg-gray-100 focus:ring-gray-500',
15 danger: 'bg-red-600 text-white hover:bg-red-700 focus:ring-red-500',
16 },
17 sizes: {
18 sm: 'h-8 px-3 text-sm rounded-md',
19 md: 'h-10 px-4 text-sm rounded-lg',
20 lg: 'h-12 px-6 text-base rounded-lg',
21 },
22};Form Pattern#
1// Accessible form with proper error handling
2<form onSubmit={handleSubmit} noValidate>
3 <div className="space-y-4">
4 <FormField
5 label="Email"
6 name="email"
7 type="email"
8 error={errors.email}
9 required
10 />
11
12 <FormField
13 label="Password"
14 name="password"
15 type="password"
16 error={errors.password}
17 required
18 description="Must be at least 8 characters"
19 />
20
21 <Button type="submit" loading={isSubmitting}>
22 Sign In
23 </Button>
24 </div>
25</form>
26
27// FormField component
28function FormField({ label, name, error, description, required, ...props }) {
29 return (
30 <div>
31 <label htmlFor={name} className="block text-sm font-medium">
32 {label}
33 {required && <span className="text-red-500 ml-1">*</span>}
34 </label>
35
36 {description && (
37 <p id={`${name}-description`} className="text-sm text-gray-500">
38 {description}
39 </p>
40 )}
41
42 <input
43 id={name}
44 name={name}
45 aria-describedby={
46 [description && `${name}-description`, error && `${name}-error`]
47 .filter(Boolean)
48 .join(' ') || undefined
49 }
50 aria-invalid={!!error}
51 className={cn(
52 'mt-1 block w-full rounded-lg border',
53 error ? 'border-red-500' : 'border-gray-300'
54 )}
55 {...props}
56 />
57
58 {error && (
59 <p id={`${name}-error`} role="alert" className="mt-1 text-sm text-red-500">
60 {error}
61 </p>
62 )}
63 </div>
64 );
65}Responsive Design#
1// Mobile-first breakpoints
2const breakpoints = {
3 sm: '640px', // Mobile landscape
4 md: '768px', // Tablet
5 lg: '1024px', // Desktop
6 xl: '1280px', // Large desktop
7 '2xl': '1536px', // Extra large
8};
9
10// Responsive component example
11<div className="
12 grid
13 grid-cols-1 /* Mobile: 1 column */
14 sm:grid-cols-2 /* Tablet: 2 columns */
15 lg:grid-cols-3 /* Desktop: 3 columns */
16 gap-4
17 p-4 sm:p-6 lg:p-8
18">
19 {items.map(item => <Card key={item.id} {...item} />)}
20</div>Sample Prompts#
| Task | Prompt |
|---|---|
| Design system | "Create a design system for a fintech app" |
| Accessibility | "Make this modal accessible with keyboard nav" |
| Components | "Design a data table with sorting and filtering" |
| Responsive | "Create a responsive navigation component" |
| Animation | "Add micro-interactions to this button" |
Configuration#
1// bootspring.config.js
2module.exports = {
3 agents: {
4 customInstructions: {
5 'ui-ux-expert': `
6 - Follow WCAG 2.1 AA guidelines
7 - Design mobile-first
8 - Use semantic HTML
9 - Include focus states
10 - Consider color blindness
11 `,
12 },
13 },
14};Related Agents#
- Frontend Expert - Component implementation
- Performance Expert - Animation performance
- Testing Expert - Accessibility testing