| name | ui-ux-expert |
| description | Expert UI/UX design and frontend development guidance. Use when designing interfaces, creating design systems, improving user experience, implementing accessible components, or building responsive layouts. Covers WCAG compliance, design patterns, and CSS/component best practices. Use when this capability is needed. |
| metadata | {"author":"abbas133"} |
UI/UX Expert
Design System Tokens
--space-1: 4px; --space-2: 8px; --space-4: 16px; --space-6: 24px;
--text-sm: 14px; --text-base: 16px; --text-lg: 18px; --text-xl: 20px;
--touch-min: 48px;
--touch-min-ios: 44px;
Accessibility (WCAG 2.1 AA)
| Element | Contrast Ratio |
|---|
| Normal text | 4.5:1 |
| Large text (>=18px) | 3:1 |
| UI components | 3:1 |
Requirements:
- All buttons: semantic labels/tooltips
- All images: alt text or decorative marker
- Touch targets: 48x48 minimum
- Focus: visible indicators
- Motion: respect prefers-reduced-motion
Responsive Breakpoints
--bp-sm: 640px;
--bp-md: 768px;
--bp-lg: 1024px;
--bp-xl: 1280px;
Component Patterns
Buttons
- Primary, Secondary, Ghost, Danger variants
- sm/md/lg sizes
- Loading state with spinner
- Disabled state at 50% opacity
Forms
- Labels above inputs
- 16px font (prevents iOS zoom)
- Visible focus ring
- Inline validation errors
Cards
- Elevated (shadow), Outlined, Filled variants
- Consistent padding (16px or 24px)
- Clear visual hierarchy
Animation
--duration-fast: 150ms;
--duration-normal: 200ms;
--ease-out: cubic-bezier(0, 0, 0.2, 1);
@media (prefers-reduced-motion: reduce) {
* { animation-duration: 0.01ms !important; }
}
UX Heuristics
- System status visibility (loading states)
- Match real world (familiar language)
- User control (undo, cancel options)
- Consistency (follow platform conventions)
- Error prevention (confirmations, constraints)
- Recognition over recall (visible options)
Converted and distributed by TomeVault — claim your Tome and manage your conversions.
