UX MCP Server

Model Context Protocol (MCP) server that provides comprehensive UX best practices covering the complete UX ecosystem: accessibility guidelines (WCAG), usability heuristics (Nielsen), UI patterns, design systems, performance optimization, SEO, internationalization, animation, framework patterns (React/Vue/Angular), e-commerce, testing, PWA, ethical design, SaaS, analytics, voice UI, AR/VR, AI/ML patterns, healthcare, finance, neurodiversity, and web components.

Works with any MCP-compatible client including Claude Desktop, Cursor IDE, Continue.dev, Cline, and custom applications.

Installation

npm (Recommended)

npm install -g @elsahafy/ux-mcp-server

npx (No Installation)

npx @elsahafy/ux-mcp-server

From Source

git clone https://github.com/elsahafy/ux-mcp-server.git
cd ux-mcp-server
npm install
npm run build

Features

📚 Resources (28 Knowledge Bases)

Access comprehensive UX knowledge bases organized by category:

Foundation & Core (12 resources)

• ux://accessibility/wcag - WCAG 2.1 AA Guidelines with code checks
• ux://usability/nielsen-heuristics - Nielsen's 10 Usability Heuristics
• ux://patterns/ui-patterns - Common UI patterns library
• ux://design-systems/principles - Design system principles & primitives
• ux://responsive/design - Responsive design & mobile-first principles
• ux://themes/dark-mode - Dark mode implementation guide
• ux://content/error-messages - User-friendly error message library
• ux://performance/optimization - Core Web Vitals & performance best practices
• ux://seo/guidelines - SEO best practices, meta tags, structured data
• ux://i18n/patterns - Internationalization & localization patterns
• ux://animation/motion - Motion design principles & accessibility
• ux://react/patterns - Advanced React patterns & state management

Critical Features (8 resources)

• ux://forms/patterns - Comprehensive form design, validation & accessibility
• ux://microcopy/guidelines - UX writing, button labels, error messages & tone
• ux://typography/systems - Type scales, font pairing, readability & responsive typography
• ux://color/theory - Color harmony, WCAG contrast, semantic colors & palettes
• ux://mobile/patterns - Touch targets, gestures, thumb zones & mobile-first design
• ux://vue/patterns - Vue 3 Composition API, composables, Pinia & best practices
• ux://angular/patterns - Angular standalone components, signals, RxJS & DI
• ux://data/visualization - Chart selection, accessibility, D3.js & dashboard design

Advanced Features (8 resources)

• ux://ecommerce/patterns - Product pages, checkout, conversion & trust optimization
• ux://information-architecture/patterns - IA systems, navigation, card sorting & tree testing
• ux://testing/validation - Usability testing, A/B testing, surveys & analytics
• ux://pwa/patterns - Service workers, offline-first, app manifest & progressive enhancement
• ux://ethical-design/patterns - Dark patterns, privacy, GDPR/CCPA & ethical alternatives
• ux://design-systems/advanced - Semantic tokens, theming, versioning & governance
• ux://saas/patterns - Onboarding, pricing UX, activation metrics & retention
• ux://analytics/metrics - UX metrics (HEART, AARRR), SUS, NPS & statistical analysis

Emerging Technologies (8 resources)

• ux://voice/interface - Voice UI design, conversation patterns, VUI principles
• ux://ar-vr/interfaces - Spatial UI, comfort, presence, 6DOF & AR anchoring
• ux://ai-ml/patterns - AI transparency, confidence indicators, recommendations & ethics
• ux://haptic/feedback - Haptic types, timing patterns & platform APIs
• ux://healthcare/ux - HIPAA compliance, patient safety, medical UI & telemedicine
• ux://finance/ux - PCI-DSS, 2FA, transaction flows & fintech patterns
• ux://neurodiversity/design - ADHD, autism, dyslexia accommodations & cognitive accessibility
• ux://web-components/patterns - Custom elements, Shadow DOM, Lit, Stencil & encapsulation

🛠️ Tools (23 Dynamic Operations)

Powerful tools for UX analysis and generation:

Core Analysis (11 tools)

1. analyze_accessibility - Check code for WCAG violations
2. review_usability - Evaluate against Nielsen's heuristics
3. suggest_pattern - Find appropriate UI patterns for use cases
4. generate_component_example - Create accessible HTML/CSS examples
5. audit_design_system - Review design token structure
6. check_contrast - Verify WCAG color contrast ratios
7. check_responsive - Analyze mobile-first and responsive design
8. suggest_error_message - Get user-friendly error messages
9. analyze_performance - Check code for performance issues & Core Web Vitals
10. check_seo - Analyze HTML for SEO best practices
11. 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

Testing & Validation (5 tools) 17. generate_accessibility_report - Comprehensive WCAG audit reports 18. suggest_ab_variant - Generate A/B test variant suggestions 19. analyze_information_architecture - Evaluate navigation and IA structure 20. detect_dark_patterns - Identify deceptive UI practices 21. calculate_ux_metrics - Calculate SUS, NPS, CSAT, task success rates

UI Generation (2 tools) 22. generate_wireframe - Create ASCII wireframes for pages/components 23. suggest_microinteraction - Recommend microinteractions with timing/easing

💬 Prompts (4 Pre-configured Workflows)

Comprehensive review workflows:

1. accessibility_review - Full WCAG accessibility audit
2. usability_audit - Complete Nielsen heuristics evaluation
3. design_system_setup - Guide for creating design systems
4. complete_ux_audit - Comprehensive multi-dimensional UX audit (accessibility, usability, performance, responsive design, typography, color, forms, SEO)

Compatibility

This MCP server works with any client that supports the Model Context Protocol:

Client Configuration

Claude Desktop

Config file location:

• macOS: ~/Library/Application Support/Claude/claude_desktop_config.json
• Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

From source:

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "node",
      "args": ["/absolute/path/to/ux-mcp-server/dist/index.js"]
    }
  }
}

Restart Claude Desktop after configuration.

Claude Code (CLI)

Add via the CLI (recommended):

claude mcp add ux -- npx -y @elsahafy/ux-mcp-server

Or manually in ~/.claude/settings.json:

{
  "mcpServers": {
    "ux": {
      "command": "npx",
      "args": ["-y", "@elsahafy/ux-mcp-server"]
    }
  }
}

Cursor IDE

Add to Cursor's MCP configuration (~/.cursor/mcp.json):

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server"
    }
  }
}

Or configure via Cursor Settings → MCP Servers → Add Server.

Continue.dev

Add to Continue configuration (~/.continue/config.json):

{
  "experimental": {
    "modelContextProtocolServers": [
      {
        "transport": {
          "type": "stdio",
          "command": "ux-mcp-server"
        }
      }
    ]
  }
}

Cline (VS Code)

In VS Code with Cline extension, add to MCP settings:

{
  "mcpServers": {
    "ux-best-practices": {
      "command": "ux-mcp-server",
      "args": []
    }
  }
}

Zed Editor

Add to Zed's settings (~/.config/zed/settings.json):

{
  "context_servers": {
    "ux-best-practices": {
      "command": {
        "path": "ux-mcp-server"
      }
    }
  }
}

Custom MCP Clients

For custom applications using the MCP SDK:

import { Client } from "@modelcontextprotocol/sdk/client/index.js";
import { StdioClientTransport } from "@modelcontextprotocol/sdk/client/stdio.js";

const transport = new StdioClientTransport({
  command: "ux-mcp-server",
  args: []
});

const client = new Client({
  name: "my-app",
  version: "1.0.0"
}, {
  capabilities: {}
});