apply_apple_design
Apply Apple design patterns including scrollbar styling, animations, and minimalist aesthetics to React components for consistent iOS-inspired user interfaces.
Instructions
Aplica padrões de design Apple (scrollbar, animações, minimalismo)
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo |
Implementation Reference
- index.js:538-546 (handler)The handler function for the 'apply_apple_design' tool. It retrieves instructions and example from UX_GUIDELINES.appleDesign and returns them formatted with the provided component argument.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:431-444 (registration)Registration of the 'apply_apple_design' tool in the ListToolsRequestSchema handler, 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:434-443 (schema)Input schema definition for the 'apply_apple_design' tool, specifying 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:122-181 (helper)Helper data structure containing the description, instructions, and example code for Apple design patterns used 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> ` },