UX/UI Tools

MCP Server for UX/UI best practices in React + Material-UI

javascript

3

GitHub Stars

javascript

Language

6 months ago

First Indexed

2 months ago

Catalog Refreshed

Documentation & install

Readme and setup notes from the catalogue, plus a client-ready config you can copy for your MCP host.

Installation

Add the following to your MCP client configuration file.

Configuration

View docs

{
  "mcpServers": {
    "marcusviniciusbarcelos-uiux-tools-react-mui": {
      "command": "npx",
      "args": [
        "-y",
        "@marcusbarcelos/uiux-tools-react-mui"
      ]
    }
  }
}

You can integrate AI-powered UX/UI tooling into your React projects that use Material-UI to enforce design best practices, accessibility heuristics, and responsive patterns. This MCP server helps you apply consistent spacing, typography, and interactions while aligning with Nielsen’s usability heuristics and cognitive principles, making it easier to deliver polished user experiences with Copilot, Claude Desktop, or other MCP-enabled assistants.

How to use

Use this MCP server with your MCP client to apply UX/UI enhancements to your React components. You can run transformations on specific components, get a validation checklist, or apply a complete set of UX guidelines across your codebase. Start with a simple component, then layer in responsiveness, Material-UI best practices, and design patterns as needed.

How to install

Prerequisites: ensure you have Node.js and npm or npx installed on your system.

Install via npx (recommended)

# Use directly without local installation
npx @marcusbarcelos/uiux-tools-react-mui

Global installation

npm install -g @marcusbarcelos/uiux-tools-react-mui

Docker

docker run -i marcusbarcelos/uiux-tools-react-mui

Available tools

apply_responsiveness

Apply mobile-first responsive design patterns to a component using MUI breakpoints and responsive layout concepts.

apply_material_ui_best_practices

Apply Material-UI best practices such as theme.spacing, alpha transparency, and using the sx prop for styling.

apply_apple_design

Incorporate Apple design patterns like custom scrollbars, smooth animations, and minimalist aesthetics.

apply_nielsen_heuristic

Apply a specific Nielsen usability heuristic (1–10) to improve the UX of a component.

apply_cognitive_bias

Leverage cognitive biases such as Fitts’s Law, grouping, proximity, and other principles to enhance UX.

apply_complete_ux

Apply ALL UX/UI guidelines at once to a component or view for a comprehensive improvement.

get_ux_checklist

Retrieve a ready-to-use UX/UI validation checklist for review and iteration.