UX toolkit: 28 knowledge resources, 23 analysis tools & 4 workflow prompts for any MCP client
io.github.elsahafy/ux-mcp-server (UX MCP Server)
UX MCP Server provides a Model Context Protocol (MCP) server package focused on an “UX toolkit.” It includes 28 knowledge resources, 23 analysis tools, and 4 workflow prompts intended for use by any MCP client. The package is published as an npm module under the name @elsahafy/ux-mcp-server.
🛠️ Key Features
28 knowledge resources
23 analysis tools
4 workflow prompts
Topics include accessibility, WCAG/a11y, design-system, and UI patterns
Distributed as an npm package (@elsahafy/ux-mcp-server)
🚀 Use Cases
Integrate UX knowledge resources into an MCP client
Run UX-related analysis tools for UI/UX evaluation
Execute predefined workflow prompts during UX work
check_contrast - Verify WCAG color contrast ratios
check_responsive - Analyze mobile-first and responsive design
suggest_error_message - Get user-friendly error messages
analyze_performance - Check code for performance issues & Core Web Vitals
check_seo - Analyze HTML for SEO best practices
suggest_animation - Recommend animations for UI interactions
Design & Content (5 tools)
12. generate_color_palette - Create accessible color palettes from base colors
13. generate_typography_scale - Generate type scales with modular ratios
14. suggest_microcopy - Get UX writing recommendations for UI elements
15. recommend_form_pattern - Find optimal form layouts and validation patterns
16. suggest_data_visualization - Choose appropriate charts for data types
Once configured, you can ask your AI assistant to use these UX tools and resources. Here are some example prompts:
Accessibility Analysis
code
"Analyze this button for accessibility issues"
→ Uses: analyze_accessibility tool
"Check if #3b82f6 on #ffffff meets WCAG AA contrast requirements"
→ Uses: check_contrast tool
"Generate an accessibility audit report for my login page"
→ Uses: generate_accessibility_report tool
UI Patterns & Design
code
"I need to display a list of items with filtering - what UI pattern should I use?"
→ Uses: suggest_pattern tool
"Generate an accessible modal dialog example"
→ Uses: generate_component_example tool
"Create a color palette based on #3b82f6"
→ Uses: generate_color_palette tool
"Generate a wireframe for a dashboard page"
→ Uses: generate_wireframe tool
Performance & SEO
code
"Analyze this React component for performance issues"
→ Uses: analyze_performance tool (checks Core Web Vitals, bundle size, loading patterns)
"Review this HTML page for SEO best practices"
→ Uses: check_seo tool (validates meta tags, Open Graph, structured data)
UX Writing & Forms
code
"Suggest better microcopy for this error message"
→ Uses: suggest_microcopy tool
"What form pattern should I use for a multi-step checkout?"
→ Uses: recommend_form_pattern tool
Animation & Interaction
code
"What animation should I use for a button click?"
→ Uses: suggest_animation tool
"Suggest microinteractions for a toggle switch"
→ Uses: suggest_microinteraction tool
Testing & Metrics
code
"Calculate the SUS score from these survey responses"
→ Uses: calculate_ux_metrics tool
"Suggest A/B test variants for my pricing page"
→ Uses: suggest_ab_variant tool
"Check this page for dark patterns"
→ Uses: detect_dark_patterns tool
Accessing Knowledge Resources
code
"What are Nielsen's usability heuristics?"
→ Reads: ux://usability/nielsen-heuristics
"Show me WCAG accessibility guidelines"
→ Reads: ux://accessibility/wcag
"What are best practices for e-commerce checkout?"
→ Reads: ux://ecommerce/patterns
"How do I design for neurodiversity?"
→ Reads: ux://neurodiversity/design
Knowledge Base Contents
WCAG Guidelines
Perceivable (alt text, contrast, semantic HTML)
Operable (keyboard access, focus management)
Understandable (error handling, clear labels)
Robust (ARIA, assistive technology support)
Nielsen's Heuristics
Visibility of System Status
Match Between System and Real World
User Control and Freedom
Consistency and Standards
Error Prevention
Recognition Rather than Recall
Flexibility and Efficiency of Use
Aesthetic and Minimalist Design
Help Users Recognize, Diagnose, and Recover from Errors
Help and Documentation
UI Patterns
Navigation: Headers, breadcrumbs, tabs
Forms: Single column, multi-step wizards, validation
Feedback: Toasts, modals, loading states
Data Display: Tables, cards, empty states
Input Components: Search, date pickers, file upload
Built for AI-assisted development with complete UX ecosystem coverage: accessibility, usability, performance, SEO, design systems, e-commerce, testing, ethical design, emerging technologies (Voice/AR/VR/AI), healthcare, finance, neurodiversity, and more—all as first-class citizens.
