ux-mcp-server — MCP server for Claude Code: UX audits on demand
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.
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverWhat ux-mcp-server 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.
What it helps with
- 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 for the agent
- Check
checkout.htmlfor WCAG violations and list the problem spots - What is the contrast ratio between
#777and a white background? - Suggest a form pattern for checkout with address and payment fields
How to install ux-mcp-server
Platform CLI
claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverPlatform CLI
codex mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-serverConfig file
{
"mcpServers": {
"ux-mcp-server": {
"command": "npx",
"args": [
"-y",
"@elsahafy/ux-mcp-server"
]
}
}
}Config file
{
"servers": {
"ux-mcp-server": {
"type": "stdio",
"command": "npx",
"args": [
"-y",
"@elsahafy/ux-mcp-server"
]
}
}
}Platform CLI
gemini mcp add ux-mcp-server npx -y @elsahafy/ux-mcp-serverStep by step, with commands for each platform: How to add an MCP server to Claude Code, Codex, Cursor, VS Code, Gemini CLI and more
Questions about ux-mcp-server
How do I install ux-mcp-server in Claude Code?
Run claude mcp add ux-mcp-server -- npx -y @elsahafy/ux-mcp-server. That registers the server in the client config; no separate npm install is needed.
What does ux-mcp-server do?
It gives the agent UX reference material plus analysis tools, so it can check accessibility, contrast, performance and SEO, or generate a palette and a type scale.
Do I need to install the package globally?
No. The client launches it with npx, so Node.js on the machine is enough. A global npm install only makes sense if you want the package stored locally.
