When should I use ui-ux-design?

ui-ux-design is useful in the following scenarios: • Modernizing legacy web interfaces by refactoring custom CSS into standardized Tailwind CSS design tokens for better maintainability. • Implementing accessible form patterns with proper ARIA labels, focus management, and validation states to meet high-level compliance standards. • Automating responsive design audits by capturing and analyzing screenshots across mobile, tablet, and desktop viewports using Playwright. • Performing visual regression testing and design consistency checks using AI-powered image analysis to verify spacing, alignment, and component usage.

When & Why to Use This Skill

The UI/UX Design skill enables Claude agents to design and implement professional user interfaces using standardized design systems like shadcn/ui and Tailwind CSS. It streamlines the frontend development lifecycle by combining code implementation with automated visual verification, ensuring that all UI changes are accessible (WCAG 2.1 compliant), responsive across devices, and visually consistent with existing design tokens.

Use Cases

Modernizing legacy web interfaces by refactoring custom CSS into standardized Tailwind CSS design tokens for better maintainability.
Implementing accessible form patterns with proper ARIA labels, focus management, and validation states to meet high-level compliance standards.
Automating responsive design audits by capturing and analyzing screenshots across mobile, tablet, and desktop viewports using Playwright.
Performing visual regression testing and design consistency checks using AI-powered image analysis to verify spacing, alignment, and component usage.

name	ui-ux-design
description	Design and implement UI/UX changes using existing components and Tailwind tokens; ensure accessibility. EXCLUSIVE to ui-ux-designer agent.
allowed-tools	Read, Edit, Grep, Glob, Write, mcp_context7, mcp_playwright, mcp_zai-mcp-server

name

ui-ux-design

description

Design and implement UI/UX changes using existing components and Tailwind tokens; ensure accessibility. EXCLUSIVE to ui-ux-designer agent.

allowed-tools

Read, Edit, Grep, Glob, Write, mcp_context7, mcp_playwright, mcp_zai-mcp-server

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

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

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

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

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