apply_responsiveness
Apply mobile-first responsive design to React/Material-UI components by analyzing code and implementing breakpoints for optimal viewing across devices.
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 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> ` },