UX/UI Tools for React + Material-UI

Instructions

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>
      `
    },