UI/UX Design

Exclusive to: ui-ux-designer agent

📚 Context7 (Memory) — Up-to-Date Docs

Lookup latest component patterns and accessibility guidelines:

mcp_context7_resolve-library-id(libraryName="shadcn-ui", query="dialog modal")
mcp_context7_query-docs(libraryId="/shadcn-ui/ui", query="accessible form patterns")

🖼️ Visual Verification (Web Apps)

After UI implementation, capture and analyze:

Screenshot & Analyze

mcp_playwright_browser_navigate(url="http://localhost:8000/[page]")
mcp_playwright_browser_take_screenshot(filename="ui-check.png")

mcp_zai-mcp-server_analyze_image(
  image_path="ui-check.png",
  prompt="Check this UI for: design consistency, spacing, alignment, accessibility"
)

Responsive Verification

mcp_playwright_browser_resize(width=375, height=812)   # Mobile
mcp_playwright_browser_resize(width=768, height=1024)  # Tablet  
mcp_playwright_browser_resize(width=1920, height=1080) # Desktop

Instructions

1. Audit existing UI for patterns to follow
2. Use existing shadcn/ui components (see component map below)
3. Follow Tailwind design tokens, avoid custom CSS
4. Ensure accessibility (keyboard, labels, contrast)
5. Test responsive behavior (mobile + desktop)

shadcn/ui Component Map

Design Tokens

Colors

text-foreground           // Primary text
text-muted-foreground     // Secondary text
bg-background             // Page background
bg-muted                  // Subtle background
border-border             // Default borders

Spacing

p-1 (4px)  p-2 (8px)  p-4 (16px)  p-6 (24px)  p-8 (32px)

Responsive Breakpoints

Accessibility Checklist (WCAG 2.1)

Forms

• Inputs have <Label> with htmlFor
• Errors linked with aria-describedby
• Invalid state with aria-invalid

Interactive

• Keyboard accessible
• Focus states visible
• Logical focus order

Content

• Images have alt text
• 4.5:1 color contrast

Form Pattern

<Label htmlFor="name">Name</Label>
<Input
    id="name"
    aria-invalid={!!errors.name}
    aria-describedby={errors.name ? 'name-error' : undefined}
/>
{errors.name && (
    <p id="name-error" className="text-sm text-destructive">
        {errors.name}
    </p>
)}

Rules

• ✅ Use existing components and tokens
• ✅ Follow docs/code-standards.md
• ✅ Implement loading/error states
• ❌ Don't create new colors/fonts
• ❌ Don't use inline styles
• ❌ Don't skip mobile responsiveness

Examples

• "Improve a form's validation UX"
• "Adjust layout for readability"