Skip to main content
Glama
MarcusViniciusBarcelos

UX/UI Tools for React + Material-UI

by MarcusViniciusBarcelos
OverviewSchemaRelated ServersScoreDiscussions
JavaScript
Hybrid

apply_apple_design

Apply Apple design patterns like scrollbar styling, animations, and minimalism to React components for consistent iOS-inspired interfaces.

Instructions

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

Input Schema

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

Implementation Reference

  • index.js:538-546 (handler)
    The handler function for the 'apply_apple_design' tool. It constructs a response containing instructions and an example from UX_GUIDELINES.appleDesign, along with the provided component code.
    case 'apply_apple_design':
  return {
    content: [
      {
        type: 'text',
        text: `${UX_GUIDELINES.appleDesign.instructions}\n\n**Exemplo:**\n${UX_GUIDELINES.appleDesign.example}\n\n**Componente:** ${args.component}`,
      },
    ],
  };
  • index.js:434-443 (schema)
    Input schema for the 'apply_apple_design' tool, requiring a 'component' string parameter.
    inputSchema: {
  type: 'object',
  properties: {
    component: {
      type: 'string',
      description: 'Código do componente ou nome do arquivo',
    },
  },
  required: ['component'],
},
  • index.js:431-444 (registration)
    Registration of the 'apply_apple_design' tool in the ListTools response, including name, description, and input schema.
    {
  name: 'apply_apple_design',
  description: 'Aplica padrões de design Apple (scrollbar, animações, minimalismo)',
  inputSchema: {
    type: 'object',
    properties: {
      component: {
        type: 'string',
        description: 'Código do componente ou nome do arquivo',
      },
    },
    required: ['component'],
  },
},
  • index.js:122-181 (helper)
    The UX guidelines object for appleDesign, containing detailed instructions and code examples for applying Apple design patterns (custom scrollbar, animations, minimalism). This is referenced by the tool handler.
      appleDesign: {
    description: "Aplica padrões de design Apple",
    instructions: `
**Apple Design Patterns:**

1. Scrollbar customizada fina:
   \`\`\`typescript
   sx={{
     overflowY: 'auto',
     '&::-webkit-scrollbar': { width: 8 },
     '&::-webkit-scrollbar-thumb': {
       bgcolor: alpha(theme.palette.text.secondary, 0.2),
       borderRadius: 4,
       '&:hover': {
         bgcolor: alpha(theme.palette.text.secondary, 0.3),
       },
     },
   }}
   \`\`\`

2. Animações suaves com cubic-bezier:
   - transition: 'all 0.25s cubic-bezier(0.4, 0, 0.2, 1)'

3. Pulse animation para badges:
   \`\`\`typescript
   '@keyframes pulse': {
     '0%': { transform: 'scale(1)', opacity: 1 },
     '50%': { transform: 'scale(1.1)', opacity: 0.8 },
     '100%': { transform: 'scale(1)', opacity: 1 },
   },
   animation: 'pulse 2s infinite',
   \`\`\`

4. Design minimalista:
   - Espaçamento generoso
   - Cores neutras com acentos sutis
   - Bordas arredondadas (borderRadius: 2-3)
    `,
    example: `
<Box
  sx={{
    overflowY: 'auto',
    '&::-webkit-scrollbar': { width: 8 },
    '&::-webkit-scrollbar-thumb': {
      bgcolor: alpha(theme.palette.text.secondary, 0.2),
      borderRadius: 4,
    },
  }}
>
  <Badge
    badgeContent={count}
    sx={{
      '& .MuiBadge-badge': {
        animation: count > 0 ? 'pulse 2s infinite' : 'none',
      },
    }}
  />
</Box>
    `
  },

Tool Definition Quality

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.

Install Server

Other Tools

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