ui-ux-design

name	ui-ux-design
description	Design and implement accessible, responsive UI changes using existing components and styling patterns. Use for interface design, component states, design fidelity, and UX polish.

UI UX Design

Use this skill when the work is primarily interface design, component behavior, accessibility, or responsive polish.

Workflow

1. Audit the repo for existing UI primitives and page patterns.
2. If the user provided Figma context or enabled Figma MCP and design fidelity matters, load mcp-figma.
3. Prefer the existing design system before inventing new primitives. If a suitable primitive does not exist, clearly document why in the output and invent a new primitive strictly using the repo's existing foundational design tokens (colors, spacing, typography).
4. Cover loading, empty, success, and error states where applicable to the component's function.
5. If browser behavior matters and the user enabled Playwright MCP, use mcp-playwright for verification across standard viewports such as 375px mobile, 768px tablet, and 1280px desktop.
6. If framework-specific accessibility or component patterns are unclear and the user enabled Context7 MCP, load mcp-context7.
7. If interaction trade-offs or UX copy direction are unclear and the user enabled Open Bridge, use mcp-open-bridge for an extra comparison pass.

Relevant MCP Skills

• mcp-figma for design files and component intent
• mcp-playwright for browser and responsive verification
• mcp-context7 for framework-specific accessibility or component patterns
• mcp-open-bridge for alternative interaction ideas, copy options, and synthesis across design constraints

Output

Include:

• UI goal
• Existing pattern used
• States covered
• Accessibility checks
• Verification run