apply_responsiveness
Apply mobile-first responsive design to React/Material-UI components to ensure optimal display across all device sizes and screen resolutions.
Instructions
Aplica responsividade mobile-first em componente React/MUI
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
Implementation Reference
- index.js:518-526 (handler)Handler logic that returns the responsiveness guidelines instructions, example, and appends the input component code.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:406-415 (schema)Input schema defining the required 'component' string parameter.inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, }, required: ['component'], },
- index.js:403-416 (registration)Tool registration entry in the ListToolsRequestHandler response.{ 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-68 (helper)Supporting data structure containing instructions and example for responsiveness guidelines used in the 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> ` },