UX/UI Tools for React + Material-UI

Instructions

Implementation Reference

• index.js:518-526 (handler)

  Handler logic for the 'apply_responsiveness' tool. Returns formatted text with UX guidelines for responsiveness, including instructions and example tailored to the provided component.

  case 'apply_responsiveness':
    return {
      content: [
        {
          type: 'text',
          text: `${UX_GUIDELINES.responsividade.instructions}\n\n**Exemplo:**\n${UX_GUIDELINES.responsividade.example}\n\n**Componente:** ${args.component}`,
        },
      ],
    };

• index.js:403-416 (registration)

  Tool registration in the ListTools response, defining name, description, and input schema requiring a 'component' string.

  {
    name: 'apply_responsiveness',
    description: 'Aplica responsividade mobile-first em componente React/MUI',
    inputSchema: {
      type: 'object',
      properties: {
        component: {
          type: 'string',
          description: 'Código do componente ou nome do arquivo',
        },
      },
      required: ['component'],
    },
  },

• index.js:22-69 (helper)

  Helper data structure defining the instructions and example code snippet for applying responsiveness guidelines, referenced by the tool handler.

    responsividade: {
      description: "Torna componente responsivo e mobile-friendly",
      instructions: `
  **Responsividade Mobile-First:**
  
  1. Use useMediaQuery do MUI:
     \`\`\`typescript
     import { useMediaQuery, useTheme } from '@mui/material';
     const theme = useTheme();
     const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
     \`\`\`
  
  2. Dimensões adaptativas:
     - Mobile: calc(100vw - 16px) ou 100%
     - Desktop: valores fixos (420px, 600px, etc.)
  
  3. Touch targets mínimo 44x44px:
     \`\`\`typescript
     <IconButton sx={{ minWidth: 44, minHeight: 44 }}>
     \`\`\`
  
  4. Breakpoints MUI:
     - xs: 0px (mobile pequeno)
     - sm: 600px (mobile grande/tablet)
     - md: 900px (tablet grande)
     - lg: 1200px (desktop)
     - xl: 1536px (desktop grande)
  
  5. Transições por dispositivo:
     - Mobile: Slide up
     - Desktop: Slide down ou Fade
      `,
      example: `
  const isMobile = useMediaQuery(theme.breakpoints.down('sm'));
  
  <Box
    sx={{
      width: isMobile ? 'calc(100vw - 16px)' : 420,
      height: isMobile ? '70vh' : 'min(600px, 80vh)',
    }}
  >
    <Slide direction={isMobile ? 'up' : 'down'}>
      {children}
    </Slide>
  </Box>
      `
    },