UX/UI Tools for React + Material-UI
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
Click on "Install Server".
Wait a few minutes for the server to deploy. Once ready, it will show a "Started" state.
In the chat, type
@followed by the MCP server name and your instructions, e.g., "@UX/UI Tools for React + Material-UIapply complete UX guidelines to this login form component"
That's it! The server will respond to your query, and you can continue using it as needed.
Here is a step-by-step guide with screenshots.
🎨 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
Related MCP server: its-just-ui MCP Server
📦 Installation
Option 1: Via npx (Recommended)
No installation needed! Use directly with npx:
npx @marcusbarcelos/uiux-tools-react-muiOption 2: Global Installation
npm install -g @marcusbarcelos/uiux-tools-react-muiOption 3: Docker
docker run -i marcusbarcelos/uiux-tools-react-mui⚙️ Configuration
GitHub Copilot (VS Code)
Add to your ~/.config/Code/User/mcp.json (Linux/Mac) or %APPDATA%\Code\User\mcp.json (Windows):
{
"servers": {
"uiux-tools": {
"command": "npx",
"args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
}
}
}Claude Desktop
Add to ~/Library/Application Support/Claude/claude_desktop_config.json (Mac) or %APPDATA%\Claude\claude_desktop_config.json (Windows):
{
"mcpServers": {
"uiux-tools": {
"command": "npx",
"args": ["-y", "@marcusbarcelos/uiux-tools-react-mui"]
}
}
}Docker Configuration
{
"servers": {
"uiux-tools": {
"command": "docker",
"args": ["run", "-i", "marcusbarcelos/uiux-tools-react-mui"]
}
}
}🚀 Available Tools
1. apply_responsiveness
Apply mobile-first responsive design patterns.
Input:
component: Component code or filename
Example:
Use tool apply_responsiveness on src/components/MyComponent.tsx2. 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:
Use tool apply_nielsen_heuristic with heuristic=1 on current component5. 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
Use tool apply_complete_ux on src/components/Notification.tsxUse tool get_ux_checklistUse tool apply_responsiveness on current fileWith 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
docker build -t MarcusViniciusBarcelos/uiux-tools-react-mui .Run Server
docker run -i MarcusViniciusBarcelos/uiux-tools-react-muiDocker Hub
docker pull MarcusViniciusBarcelos/uiux-tools-react-mui🛠️ Development
Clone Repository
git clone https://github.com/MarcusViniciusBarcelos/uiux-tools-react-mui.git
cd uiux-tools-react-mui
npm installRun Locally
npm startTest with Inspector
npx @modelcontextprotocol/inspector node index.js📄 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
Available Tools
7 toolsapply_apple_designC
Aplica padrões de design Apple (scrollbar, animações, minimalismo)
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool applies design patterns but doesn't describe how it behaves: e.g., whether it modifies components in-place, returns transformed code, requires specific permissions, or has side effects like overwriting files. For a tool with no annotations, this leaves significant gaps in understanding its operation.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is concise and front-loaded in a single sentence, listing key aspects (scrollbar, animations, minimalism) without unnecessary details. It earns its place by specifying what Apple design patterns entail, but could be slightly more structured for clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of applying design patterns, no annotations, and no output schema, the description is incomplete. It doesn't explain what the tool returns, how changes are applied, or any behavioral traits. For a tool that likely modifies components, more context is needed to guide the agent effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The description adds no meaning beyond what the input schema provides. The schema has 100% coverage with a clear description for the 'component' parameter ('Código do componente ou nome do arquivo'), so the baseline is 3. The tool description doesn't elaborate on parameter usage, such as expected formats or examples, but the schema adequately covers it.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Aplica padrões de design Apple' (Applies Apple design patterns) with specific examples like scrollbar, animations, and minimalism. It uses a specific verb ('aplica') and resource ('padrões de design Apple'), making the action clear. However, it doesn't explicitly differentiate from sibling tools like 'apply_material_ui_best_practices' or 'apply_complete_ux', which prevents a score of 5.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It lists examples of what Apple design patterns include but doesn't indicate contexts, prerequisites, or exclusions. With sibling tools like 'apply_material_ui_best_practices' and 'apply_complete_ux', there's no help for the agent in choosing between them, so it's a minimal score.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
apply_cognitive_biasC
Aplica viés cognitivo específico para melhor UX
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo | |
| bias | Yes | Viés cognitivo a aplicar |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It only states what the tool does at a high level ('aplica viés cognitivo') without explaining how it applies biases, what changes it makes (e.g., modifies code, generates recommendations), whether it's read-only or mutative, or any side effects. This leaves critical behavioral traits unspecified.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, concise sentence in Portuguese that directly states the tool's purpose without unnecessary words. It's front-loaded with the core action, making it efficient. However, it could be slightly more informative without losing conciseness, such as by hinting at the outcome.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity implied by applying cognitive biases (which could involve mutations or analysis), lack of annotations, and no output schema, the description is incomplete. It doesn't explain what the tool returns, how it affects the component, or any behavioral nuances, leaving significant gaps for an agent to understand its full context.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with clear descriptions for both parameters: 'component' as a component code or filename, and 'bias' as the cognitive bias to apply with an enum list. The description adds no additional meaning beyond this, such as examples or constraints, so it meets the baseline of 3 where the schema does the heavy lifting.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description states the tool's purpose as applying a specific cognitive bias for better UX, which is clear but vague. It uses a specific verb ('aplica') and resource ('viés cognitivo'), but doesn't distinguish from siblings like apply_apple_design or apply_nielsen_heuristic, which also seem to apply design principles. The purpose is understandable but lacks specificity about what 'aplicar' entails operationally.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention any context, prerequisites, or exclusions, and doesn't reference sibling tools like apply_complete_ux or get_ux_checklist. Without such information, the agent has no basis for choosing this tool over others in the same domain.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
apply_complete_uxC
Aplica TODAS as diretrizes de UX/UI (responsividade, MUI, Apple, Nielsen, vieses)
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool applies guidelines but doesn't describe how it works (e.g., modifies code, generates reports, requires specific permissions), what happens to the component, or any side effects like overwriting existing styles. This leaves significant gaps for a mutation tool.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that lists the guidelines covered. It's front-loaded with the core action and avoids unnecessary words, though it could be slightly more structured by separating the guideline list for clarity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (applying multiple UX/UI guidelines to a component), lack of annotations, and no output schema, the description is insufficient. It doesn't explain what the tool returns, how changes are applied, or any behavioral traits like error handling or performance impact, leaving the agent with incomplete information for effective use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with the parameter 'component' documented as 'Código do componente ou nome do arquivo'. The description adds no additional meaning about this parameter beyond what the schema provides, such as format examples or constraints. With high schema coverage, the baseline score of 3 is appropriate.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: applying all UX/UI guidelines including responsiveness, MUI, Apple, Nielsen, and biases. It uses a specific verb ('Aplica') and identifies the scope ('TODAS as diretrizes de UX/UI'), though it doesn't explicitly distinguish from siblings like apply_apple_design or apply_responsiveness that handle subsets of these guidelines.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus its siblings. It lists the guidelines covered but doesn't indicate scenarios where applying all guidelines is preferable to using individual tools like apply_apple_design or apply_nielsen_heuristic, nor does it mention prerequisites or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
apply_material_ui_best_practicesC
Aplica best practices do Material-UI (theme.spacing, alpha, sx prop)
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
With no annotations provided, the description carries full burden for behavioral disclosure. It mentions what practices are applied but doesn't describe how the tool behaves: whether it modifies code in-place, generates recommendations, requires specific permissions, has side effects, or what format the output takes. For a tool that presumably transforms code, this lack of behavioral context is significant.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is extremely concise - a single sentence that efficiently lists the specific Material-UI practices being applied. Every element (theme.spacing, alpha, sx prop) earns its place by specifying scope. However, it could be more front-loaded with the core purpose before listing techniques.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
For a tool with no annotations, no output schema, and a single parameter, the description is incomplete. It doesn't explain what the tool actually does (transform code? generate suggestions?), what the expected outcome is, or any behavioral characteristics. While concise, it leaves too many questions unanswered for effective agent use.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, so the schema already documents the single 'component' parameter. The description doesn't add any parameter-specific information beyond what's in the schema. It doesn't clarify what format 'component' should be in, provide examples, or explain how the parameter interacts with the best practices application. Baseline 3 is appropriate when schema does the documentation work.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the action ('Aplica' - applies) and the target ('best practices do Material-UI'), specifying concrete techniques like theme.spacing, alpha, and sx prop. It distinguishes itself from siblings by focusing specifically on Material-UI practices rather than other design systems or UX principles. However, it doesn't specify what exactly gets applied to (e.g., code transformation, documentation generation).
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus its siblings. While it's clear this is for Material-UI best practices, there's no indication of appropriate contexts, prerequisites, or alternatives. The user must infer usage based solely on the tool name and description without explicit guidance.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
apply_nielsen_heuristicC
Aplica uma heurística específica de Nielsen
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo | |
| heuristic | Yes | Número da heurística (1-10) |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries full burden. 'Aplica' (apply) implies an action, but it doesn't disclose what the tool actually does behaviorally—e.g., whether it analyzes a component, generates recommendations, modifies files, or requires specific permissions. It lacks details on side effects, rate limits, or output format, leaving the agent with minimal operational insight.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence in Portuguese, with no wasted words. It's front-loaded with the core action ('Aplica'), but could be more structured by clarifying the tool's purpose upfront. However, it's appropriately sized for a simple tool, earning a high score for brevity.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given no annotations, no output schema, and a mutation-like action ('apply'), the description is incomplete. It doesn't explain what the tool returns, potential errors, or behavioral traits. For a tool with two parameters and siblings in a UX/design context, more detail on application scope and outcomes is needed to guide the agent effectively.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
Schema description coverage is 100%, with clear parameter descriptions: 'component' as a code or filename and 'heuristic' as a number 1-10. The description adds no additional meaning beyond the schema, such as explaining what Nielsen heuristics are or how they relate to the parameters. Baseline 3 is appropriate since the schema does the heavy lifting, but the description doesn't compensate with extra context.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description 'Aplica uma heurística específica de Nielsen' restates the tool name in Portuguese ('apply a specific Nielsen heuristic'), making it tautological. It doesn't specify what 'apply' means (e.g., evaluate, suggest, implement) or what resource is being acted upon, beyond the generic 'heuristic'. While it mentions Nielsen, it doesn't distinguish this from sibling tools like 'apply_apple_design' or 'apply_cognitive_bias' in terms of domain or methodology.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention context (e.g., for UX evaluation, design reviews), prerequisites, or exclusions. With siblings like 'apply_apple_design' and 'apply_cognitive_bias', there's no indication of when Nielsen heuristics are preferred over other frameworks or tools, leaving usage ambiguous.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
apply_responsivenessC
Aplica responsividade mobile-first em componente React/MUI
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool applies mobile-first responsiveness, implying a mutation or transformation, but doesn't describe what this entails (e.g., modifies code in-place, creates a new version, requires specific permissions). It also lacks details on side effects, error handling, or output format, leaving significant gaps in understanding how the tool behaves.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence in Portuguese that directly states the tool's purpose without unnecessary words. It's front-loaded with the core action and resource, making it easy to parse. Every part of the sentence earns its place by conveying essential information concisely.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the complexity of applying responsiveness (a mutation operation) and the lack of annotations and output schema, the description is incomplete. It doesn't explain what the tool returns, how changes are applied, or any behavioral traits like error conditions. For a tool that likely modifies code, more context is needed to understand its full impact and usage.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The input schema has 100% description coverage, with one parameter 'component' documented as 'Código do componente ou nome do arquivo' (Component code or file name). The description doesn't add any meaning beyond this, such as examples or constraints. With high schema coverage, the baseline is 3, as the schema adequately handles parameter documentation without extra value from the description.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose: 'Aplica responsividade mobile-first em componente React/MUI' (Applies mobile-first responsiveness to a React/MUI component). It specifies the verb ('aplica'), resource ('componente React/MUI'), and scope ('responsividade mobile-first'), making it easy to understand what the tool does. However, it doesn't explicitly differentiate from sibling tools like 'apply_material_ui_best_practices' or 'apply_complete_ux', which might also involve UI/UX improvements.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. It doesn't mention prerequisites, such as needing a React/MUI component, or compare it to siblings like 'apply_material_ui_best_practices' or 'apply_complete_ux', which could overlap in functionality. Usage is implied by the purpose but lacks explicit context or exclusions.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
get_ux_checklistB
Retorna checklist de UX/UI para validação
| Name | Required | Description | Default |
|---|---|---|---|
No parameters | |||
TDQS
Does the description disclose side effects, auth requirements, rate limits, or destructive behavior?
No annotations are provided, so the description carries the full burden of behavioral disclosure. It states the tool returns a UX/UI checklist for validation, but it doesn't describe what the checklist contains, how it's formatted, whether it's static or dynamic, or any operational constraints like rate limits or authentication needs, leaving significant gaps.
Agents need to know what a tool does to the world before calling it. Descriptions should go beyond structured annotations to explain consequences.
Is the description appropriately sized, front-loaded, and free of redundancy?
The description is a single, efficient sentence that directly states the tool's purpose without any wasted words. It is appropriately sized and front-loaded, making it easy to understand at a glance.
Shorter descriptions cost fewer tokens and are easier for agents to parse. Every sentence should earn its place.
Given the tool's complexity, does the description cover enough for an agent to succeed on first attempt?
Given the tool's complexity (0 parameters, no output schema, no annotations), the description is incomplete. It lacks details on what the checklist includes, its format, or how it's used in validation, which are crucial for an AI agent to effectively invoke and interpret the tool's output.
Complex tools with many parameters or behaviors need more documentation. Simple tools need less. This dimension scales expectations accordingly.
Does the description clarify parameter syntax, constraints, interactions, or defaults beyond what the schema provides?
The tool has 0 parameters, and the schema description coverage is 100%, so there are no parameters to document. The description doesn't need to add parameter semantics, and it appropriately avoids unnecessary details, earning a high baseline score for this dimension.
Input schemas describe structure but not intent. Descriptions should explain non-obvious parameter relationships and valid value ranges.
Does the description clearly state what the tool does and how it differs from similar tools?
The description clearly states the tool's purpose with a specific verb ('Retorna') and resource ('checklist de UX/UI para validação'), making it understandable. However, it doesn't explicitly differentiate from sibling tools like 'apply_nielsen_heuristic' or 'apply_complete_ux', which might also relate to UX validation, so it falls short of a perfect score.
Agents choose between tools based on descriptions. A clear purpose with a specific verb and resource helps agents select the right tool.
Does the description explain when to use this tool, when not to, or what alternatives exist?
The description provides no guidance on when to use this tool versus alternatives. With sibling tools like 'apply_nielsen_heuristic' or 'apply_complete_ux' that might serve similar UX-related purposes, there is no indication of context, prerequisites, or exclusions for this tool's usage.
Agents often have multiple tools that could apply. Explicit usage guidance like "use X instead of Y when Z" prevents misuse.
TDQS
Multiple tools have overlapping purposes that will cause confusion. For example, 'apply_complete_ux' appears to encompass functionality covered by other tools like 'apply_apple_design', 'apply_nielsen_heuristic', and 'apply_responsiveness', creating ambiguity about when to use which tool. While some tools target specific domains (e.g., Apple design vs. Material-UI), the boundaries between them are unclear, especially with the broad 'apply_complete_ux' tool.
The naming follows a mostly consistent 'verb_noun' pattern with 'apply_' or 'get_' prefixes, which is predictable and readable. However, there is a minor deviation with 'get_ux_checklist' using 'get_' instead of 'apply_', but this is reasonable given its different action. Overall, the naming is coherent with only slight variations.
With 7 tools, the count is reasonable and well-scoped for a UX/UI-focused server, avoiding being too thin or heavy. Each tool appears to target a specific aspect of UX/UI design, such as design systems, heuristics, or responsiveness, which justifies their inclusion. A slight reduction might improve clarity, but the number is appropriate.
The tool set covers key UX/UI domains like design systems (Apple, Material-UI), heuristics (Nielsen), and responsiveness, but there are notable gaps. For instance, it lacks tools for user testing, accessibility checks, or performance optimization, which are common in UX/UI workflows. While core areas are addressed, the surface is not fully comprehensive for the stated purpose of React + Material-UI tools.
Maintenance
Resources
Unclaimed servers have limited discoverability.
Looking for Admin?
If you are the server author, to access and configure the admin panel.
Related MCP Connectors
Live React design-system APIs, patterns, and code validation so AI agents build real UI, not slop.
Provides UX capabilities to enhance the design output and understanding of AI systems.
UI design from prompts, screenshots, and URLs for AI coding agents and theme tokens.
AI-powered design and management for Webflow Sites
Related MCP Servers
- AlicenseBqualityDmaintenanceProvides professional UI/UX design expertise and frontend development tools for analyzing interfaces, generating design systems, and creating modern components with accessibility and best practices built-in. Supports React, Vue, Angular and other frameworks with seamless Claude Code CLI integration.422MIT
- AlicenseBqualityCmaintenanceEnables AI-powered generation, customization, and documentation of its-just-ui React components. Provides tools for component generation, theme management, form creation, responsive layouts, and accessibility guidance.9304MIT
- AlicenseBqualityDmaintenanceEnables developers to generate beautiful, modern UI components through natural language descriptions. Integrates with popular IDEs to instantly create and customize React components inspired by 21st.dev's component library.418ISC
- FlicenseAqualityDmaintenanceProvides AI assistants with frontend development tools including component scaffolding, bundle analysis, accessibility checks, and responsive design guidance. Enables automated generation of React components with tests and stories, bundle optimization recommendations, and WCAG compliance fixes.6
Latest Blog Posts
- Who's Calling? MCP Hosts Are an Identity Blind Spot (And the Spec Knows It)By Om-Shree-0709 on .mcpAgent IdentityOAuth 2.1
- Your AI Chatbot Just Exposed Your CEO's Salary to an InternBy Om-Shree-0709 on .Agent IdentityMCP SecurityOAuth Delegation
- Why MCP Servers Need Execution Sandboxing (And Why Your Current Stack Isn't Enough)By Om-Shree-0709 on .Agentic AiPrompt InjectionWebAssembly
MCP directory API
We provide all the information about MCP servers via our MCP API.
curl -X GET 'https://glama.ai/api/mcp/v1/servers/MarcusViniciusBarcelos/uiux-tools-react-mui'
If you have feedback or need assistance with the MCP directory API, please join our Discord server