Skip to main content
Glama

🎨 UX/UI Tools for React + Material-UI (MCP Server)

npm version License: MIT

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

No installation needed! Use directly with npx:

npx @marcusbarcelos/uiux-tools-react-mui

Option 2: Global Installation

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

Option 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.tsx

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 code

  • heuristic: Heuristic number (1-10)

Example:

Use tool apply_nielsen_heuristic with heuristic=1 on current component

5. apply_cognitive_bias

Apply cognitive bias for better UX.

Input:

  • component: Component code

  • bias: One of fitts, 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.tsx
Use tool get_ux_checklist
Use tool apply_responsiveness on current file

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

  1. Visibility of System Status - Loading states, progress indicators

  2. Match Between System and Real World - User-friendly language

  3. User Control and Freedom - Cancel buttons, undo actions

  4. Consistency and Standards - Uniform colors, icons, patterns

  5. Error Prevention - Real-time validation, input limits

  6. Recognition Rather Than Recall - Visible options, tooltips

  7. Flexibility and Efficiency - Keyboard shortcuts, quick actions

  8. Aesthetic and Minimalist Design - Remove visual noise

  9. Help Users Recognize Errors - Clear error messages, suggestions

  10. 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 spacing

  • alpha() for transparency

  • sx prop instead of styled components

  • Smooth transitions with theme.transitions

  • Custom scrollbars

  • Touch-friendly targets


🐳 Docker

Build Image

docker build -t MarcusViniciusBarcelos/uiux-tools-react-mui .

Run Server

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

Docker 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 install

Run Locally

npm start

Test with Inspector

npx @modelcontextprotocol/inspector node index.js

📄 License

MIT © Datacred Team


🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

  1. Fork the repository

  2. Create your feature branch (git checkout -b feature/AmazingFeature)

  3. Commit your changes (git commit -m 'Add some AmazingFeature')

  4. Push to the branch (git push origin feature/AmazingFeature)

  5. Open a Pull Request



📧 Support


Made with ❤️ for better UX/UI in React applications

Available Tools

7 tools
apply_apple_designC

Aplica padrões de design Apple (scrollbar, animações, minimalismo)

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo
biasYesViés cognitivo a aplicar

TDQS

C2.4/5.0
Behavior1/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose3/5

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.

Usage Guidelines2/5

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)

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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)

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo
heuristicYesNúmero da heurística (1-10)

TDQS

C2.2/5.0
Behavior2/5

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.

Conciseness4/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose2/5

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.

Usage Guidelines1/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault
componentYesCódigo do componente ou nome do arquivo

TDQS

C2.9/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters3/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

ParametersJSON Schema
NameRequiredDescriptionDefault

No parameters

TDQS

B3.1/5.0
Behavior2/5

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.

Conciseness5/5

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.

Completeness2/5

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.

Parameters4/5

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.

Purpose4/5

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.

Usage Guidelines2/5

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

C2.8/5.0
Disambiguation2/5

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.

Naming Consistency4/5

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.

Tool Count4/5

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.

Completeness3/5

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

ActivityInactive
ResponsivenessNo issues

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

Related MCP Servers

  • A
    license
    B
    quality
    D
    maintenance
    Provides 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.
    4
    22
    MIT
  • A
    license
    B
    quality
    D
    maintenance
    Enables 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.
    4
    18
    ISC
  • F
    license
    A
    quality
    D
    maintenance
    Provides 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

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