UI/UX Design

Name: ui-ux-design
Rating: 92
Author: htooayelwinict

Exclusive to: ui-ux-designer agent

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

Lookup latest component patterns and accessibility guidelines:

code

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

code

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

code

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

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

shadcn/ui Component Map

Need	Component
Button	`<Button>`
Input	`<Input>`
Select	`<Select>`
Modal	`<Dialog>`
Dropdown	`<DropdownMenu>`
Toast	`<Toast>`
Card	`<Card>`
Alert	`<Alert>`

Design Tokens

Colors

tsx

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

Spacing

tsx

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

Responsive Breakpoints

Prefix	Width	Device
`sm:`	640px	Phone
`md:`	768px	Tablet
`lg:`	1024px	Laptop
`xl:`	1280px	Desktop

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

tsx

<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"