# ux-mcp-server

An MCP server that hands your coding agent UX reference material and analysis tools: accessibility checks, contrast math, layout reviews on the code you already have.

- MCP server · `type=mcp` · Claude Code, Codex, Cursor, GitHub Copilot, Windsurf (Devin Desktop), Cline, Zed · ★ 35
- Author: elsahafy
- License: MIT · policy=link-only · description only; the file stays with the author
- Source: https://github.com/elsahafy/ux-mcp-server
- Updated: 2026-04-01
- HTML: https://affpapa.org/en/nevibecode/mcp/ux-mcp-server

## What it does

The package `@elsahafy/ux-mcp-server` runs through `npx`, so any MCP client can start it without a global install. It carries 28 reference bases: WCAG, Nielsen heuristics, form and navigation patterns, type systems, color theory, mobile layout, React, Vue and Angular conventions, PWA, dark mode, localization. A few cover voice interfaces, AR/VR, healthcare and finance screens.

On top of the reference material sit 23 tools. `analyze_accessibility` scans markup for WCAG failures, `check_contrast` returns a ratio for two colors, `analyze_performance` looks at Core Web Vitals, `check_seo` inspects HTML. Generators cover color palettes, type scales and ASCII wireframes. Four prompts bundle whole workflows, such as a full accessibility audit or a heuristics review.

Building from source takes `git clone` and `npm run build`. Every tool works on input you pass in — hand it no markup or screen description and there is nothing to check.

## Requirements
- Needs: Node.js (commands run via npx)

## Install

### Claude Code (native platform)

**Platform CLI**
```bash
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server
```

### Codex

**Platform CLI**
```bash
codex mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server
```

### Cursor

**Config file**
File `.cursor/mcp.json`:
```json
{
    "mcpServers": {
        "ux-mcp-server": {
            "command": "npx",
            "args": [
                "-y",
                "@elsahafy/ux-mcp-server"
            ]
        }
    }
}
```

### GitHub Copilot

**Config file**
File `.vscode/mcp.json`:
```json
{
    "servers": {
        "ux-mcp-server": {
            "type": "stdio",
            "command": "npx",
            "args": [
                "-y",
                "@elsahafy/ux-mcp-server"
            ]
        }
    }
}
```

### Gemini CLI

**Platform CLI**
```bash
gemini mcp add ux-mcp-server npx -y @elsahafy/ux-mcp-server
```

## When to use it
- catch WCAG violations in markup before a release
- compute a contrast ratio for two specific colors
- pick a form pattern for a checkout flow
- build an accessible palette from one base color
- review the navigation structure of a site

## Example prompts
- Check `checkout.html` for WCAG violations and list the problem spots
- What is the contrast ratio between `#777` and a white background?
- Suggest a form pattern for checkout with address and payment fields

## Similar
- [REA](https://affpapa.org/en/nevibecode/mcp/rea.md) — MCP server · ★ 386989
- [GitHub](https://affpapa.org/en/nevibecode/mcp/github.md) — MCP server · ★ 33918
- [Netdata](https://affpapa.org/en/nevibecode/mcp/netdata.md) — MCP server · ★ 81115
- [browser-use](https://affpapa.org/en/nevibecode/mcp/browser-use.md) — MCP server · ★ 119160
- [Codebase Memory](https://affpapa.org/en/nevibecode/mcp/codebase-memory.md) — MCP server · ★ 47392
- [mcp-server](https://affpapa.org/en/nevibecode/mcp/mcp-server.md) — MCP server · ★ 43872

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md