This MCP server provides AI-powered tools to automatically apply comprehensive UX/UI best practices and design principles to React components using Material-UI.
Core Capabilities:
• Apply Mobile-First Responsiveness - Transforms components to use MUI breakpoints and responsive design patterns
• Enforce Material-UI Best Practices - Implements theme.spacing(), alpha() transparency, sx prop usage, and other MUI conventions
• Implement Apple Design Patterns - Adds custom scrollbars, smooth animations, and minimalist design elements
• Apply Nielsen's Usability Heuristics - Implements specific usability principles (1-10) including system visibility, error prevention, consistency, and user control
• Optimize with Cognitive Biases - Applies UX psychology principles like Fitts's Law, Grouping Effect, Proximity Principle, Zeigarnik Effect, Serial Position Effect, and Hick's Law
• Complete UX Transformation - Applies all guidelines simultaneously (responsiveness, Material-UI practices, Apple design, Nielsen heuristics, and cognitive biases)
• Generate UX Checklist - Provides a comprehensive validation checklist for design reviews
Use Cases:
Automatically improve existing React/MUI components with industry-standard UX patterns
Ensure consistent Material-UI best practices across your codebase
Apply evidence-based cognitive psychology principles to enhance user experience
Get actionable checklists for UX/UI code reviews
Works with AI assistants like GitHub Copilot and Claude Desktop
Applies Apple design patterns to React components including custom scrollbars, smooth animations, and minimalist design principles
Provides containerized deployment of the UX/UI tools server for consistent cross-platform usage
Integrates with GitHub Copilot in VS Code to provide UX/UI improvement suggestions and automated component enhancement
Applies Material-UI best practices to React components including theme spacing, alpha transparency, sx prop usage, and consistent design patterns
Distributed as an npm package for easy installation and integration into JavaScript development workflows
Provides AI-powered tools to apply UX/UI best practices to React components, including responsive design patterns, Nielsen's usability heuristics, and cognitive bias improvements
🎨 UX/UI Tools for React + Material-UI (MCP Server)
Model Context Protocol (MCP) Server that provides AI-powered tools to apply UX/UI best practices to React components with Material-UI.
Perfect for use with GitHub Copilot, Claude Desktop, and other AI assistants that support MCP.
✨ Features
�� Responsive Design - Mobile-first patterns with MUI breakpoints
🎨 Material-UI Best Practices - Theme spacing, alpha transparency, sx prop
🍎 Apple Design Patterns - Custom scrollbars, smooth animations, minimalist design
🎯 Nielsen's 10 Heuristics - Complete usability guidelines
🧠 Cognitive Biases - Fitts's Law, Grouping Effect, Proximity Principle, and more
✅ UX Checklist - Ready-to-use validation checklist
📦 Installation
Option 1: Via npx (Recommended)
No installation needed! Use directly with npx:
Option 2: Global Installation
Option 3: Docker
⚙️ Configuration
GitHub Copilot (VS Code)
Add to your ~/.config/Code/User/mcp.json (Linux/Mac) or %APPDATA%\Code\User\mcp.json (Windows):
Claude Desktop
Add to ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
Docker Configuration
🚀 Available Tools
1. apply_responsiveness
Apply mobile-first responsive design patterns.
Input:
component: Component code or filename
Example:
2. apply_material_ui_best_practices
Apply Material-UI best practices (theme.spacing, alpha, sx prop).
3. apply_apple_design
Apply Apple design patterns (custom scrollbar, animations, minimalism).
4. apply_nielsen_heuristic
Apply specific Nielsen heuristic (1-10).
Input:
component: Component codeheuristic: Heuristic number (1-10)
Example:
5. apply_cognitive_bias
Apply cognitive bias for better UX.
Input:
component: Component codebias: One offitts,grouping,proximity,zeigarnik,serial-position,hicks
6. apply_complete_ux
Apply ALL UX/UI guidelines at once.
7. get_ux_checklist
Get validation checklist for UX/UI review.
💡 Usage Examples
With GitHub Copilot
With Claude Desktop
Simply ask:
"Apply complete UX guidelines to this component"
"Show me the UX checklist"
📚 What's Included
Nielsen's 10 Usability Heuristics
Visibility of System Status - Loading states, progress indicators
Match Between System and Real World - User-friendly language
User Control and Freedom - Cancel buttons, undo actions
Consistency and Standards - Uniform colors, icons, patterns
Error Prevention - Real-time validation, input limits
Recognition Rather Than Recall - Visible options, tooltips
Flexibility and Efficiency - Keyboard shortcuts, quick actions
Aesthetic and Minimalist Design - Remove visual noise
Help Users Recognize Errors - Clear error messages, suggestions
Help and Documentation - Tooltips, helper text, placeholders
Cognitive Biases
Fitts's Law - Larger touch targets (≥44px), closer actions
Grouping Effect - Related items together, visual separation
Proximity Principle - Related elements close together
Zeigarnik Effect - Incomplete task indicators (badges, progress)
Serial Position Effect - Important actions at top/bottom
Hick's Law - Limit choices, progressive disclosure
Material-UI Patterns
theme.spacing()for consistent spacingalpha()for transparencysxprop instead of styled componentsSmooth transitions with
theme.transitionsCustom scrollbars
Touch-friendly targets
🐳 Docker
Build Image
Run Server
Docker Hub
🛠️ Development
Clone Repository
Run Locally
Test with Inspector
📄 License
MIT © Datacred Team
🤝 Contributing
Contributions are welcome! Please feel free to submit a Pull Request.
Fork the repository
Create your feature branch (
git checkout -b feature/AmazingFeature)Commit your changes (
git commit -m 'Add some AmazingFeature')Push to the branch (
git push origin feature/AmazingFeature)Open a Pull Request
🔗 Links
📧 Support
Made with ❤️ for better UX/UI in React applications