Ux MCP Server

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)

1. generate_color_palette - Create accessible color palettes from base colors
2. generate_typography_scale - Generate type scales with modular ratios
3. suggest_microcopy - Get UX writing recommendations for UI elements
4. recommend_form_pattern - Find optimal form layouts and validation patterns
5. suggest_data_visualization - Choose appropriate charts for data types

Testing & Validation (5 tools)

1. generate_accessibility_report - Comprehensive WCAG audit reports
2. suggest_ab_variant - Generate A/B test variant suggestions
3. analyze_information_architecture - Evaluate navigation and IA structure
4. detect_dark_patterns - Identify deceptive UI practices
5. calculate_ux_metrics - Calculate SUS, NPS, CSAT, task success rates

UI Generation (2 tools)

1. generate_wireframe - Create ASCII wireframes for pages/components
2. 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: {} });

await client.connect(transport);

// List available resources const resources = await client.listResources();

// Read a resource const wcag = await client.readResource({ uri: "ux://accessibility/wcag" });

// Call a tool const result = await client.callTool({ name: "check_contrast", arguments: { foreground: "#333333", background: "#ffffff" } });

Windows Notes

On Windows, use full paths with escaped backslashes:

{

"mcpServers": { "ux-best-practices": { "command": "node", "args": ["C:\\Users\\YourName\\ux-mcp-server\\dist\\index.js"] } } }

Example Usage

Once configured, you can ask your AI assistant to use these UX tools and resources. Here are some example prompts:

Accessibility Analysis

"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

"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

"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

"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

"What animation should I use f