UI/UX Design Skill | Agent Skills

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"

Agent Skills: UI/UX Design

Install this agent skill to your local

Skill Files