ui-ux-design

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

```

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

```

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)

| Need | Component |

|------|-----------|

| Button | |

| Input | |

| Select | |

| Modal |

|

| Dropdown | |

| Toast | |

| Card | |

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

Name

id="name"

aria-invalid={!!errors.name}

aria-describedby={errors.name ? 'name-error' : undefined}

/>

{errors.name && (

{errors.name}

)}

```

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"

More from this repository10

🎯

bugfix-and-debug🎯Skill

bugfix-and-debug skill from htooayelwinict/claude-config

🎯

code-review-checklist🎯Skill

Performs comprehensive code reviews for Laravel, React, and Python projects, checking correctness, security, performance, and maintainability using advanced AI analysis tools.

🎯

devops-infrastructure🎯Skill

Automates infrastructure deployment, configures Docker containers, implements CI/CD workflows, and ensures server security for DevOps engineers.

🎯

research-and-synthesis🎯Skill

research-and-synthesis skill from htooayelwinict/claude-config

🎯

database-change-management🎯Skill

database-change-management skill from htooayelwinict/claude-config

🎯

project-orchestration🎯Skill

project-orchestration skill from htooayelwinict/claude-config

🎯

project-planning🎯Skill

Generates comprehensive, phased project implementation plans with detailed architecture analysis, risk assessment, and step-by-step verification using MCP helpers.

🎯

deepagent🎯Skill

deepagent skill from htooayelwinict/claude-config

🎯

langgraph🎯Skill

Enables building complex, stateful AI agent workflows with dynamic graph-based architectures using LangGraph's flexible state management and node interactions.

🎯

langchain🎯Skill

Integrates LangChain framework to enable advanced AI-powered language chain operations and complex prompt chaining with Claude.