apply_cognitive_bias
Apply cognitive biases like Fitts' Law or serial-position effect to React components to improve user experience by leveraging psychological principles in UI design.
Instructions
Aplica viés cognitivo específico para melhor UX
Input Schema
TableJSON Schema
| Name | Required | Description | Default |
|---|---|---|---|
| component | Yes | Código do componente ou nome do arquivo | |
| bias | Yes | Viés cognitivo a aplicar |
Implementation Reference
- index.js:571-597 (handler)Handler for the 'apply_cognitive_bias' tool. Maps the input 'bias' parameter to a key in UX_GUIDELINES (e.g., 'fitts' to 'fittssLaw'), retrieves the corresponding guideline data, and returns formatted instructions text for the specified component.
case 'apply_cognitive_bias': const biasMap = { fitts: 'fittssLaw', grouping: 'groupingEffect', }; const biasKey = biasMap[args.bias]; const bias = UX_GUIDELINES[biasKey]; if (!bias) { return { content: [ { type: 'text', text: `Viés ${args.bias} não encontrado.`, }, ], isError: true, }; } return { content: [ { type: 'text', text: `**${bias.description}**\n\n${bias.instructions}\n\n**Componente:** ${args.component}`, }, ], }; - index.js:464-482 (registration)Registration of the 'apply_cognitive_bias' tool in the listTools response, including its name, description, and input schema.
{ name: 'apply_cognitive_bias', description: 'Aplica viés cognitivo específico para melhor UX', inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, bias: { type: 'string', enum: ['fitts', 'grouping', 'proximity', 'zeigarnik', 'serial-position', 'hicks'], description: 'Viés cognitivo a aplicar', }, }, required: ['component', 'bias'], }, }, - index.js:467-481 (schema)Input schema definition for the 'apply_cognitive_bias' tool, specifying required 'component' string and 'bias' enum.
inputSchema: { type: 'object', properties: { component: { type: 'string', description: 'Código do componente ou nome do arquivo', }, bias: { type: 'string', enum: ['fitts', 'grouping', 'proximity', 'zeigarnik', 'serial-position', 'hicks'], description: 'Viés cognitivo a aplicar', }, }, required: ['component', 'bias'], }, - index.js:294-318 (helper)UX guideline data for 'fittssLaw' bias, used by the handler when bias='fitts'. Contains description and instructions.
fittssLaw: { description: "Lei de Fitts - Targets maiores e próximos", instructions: ` **Lei de Fitts:** 1. Touch targets mínimo 44x44px: \`\`\`typescript <IconButton sx={{ minWidth: 44, minHeight: 44 }}> \`\`\` 2. Botões principais maiores: \`\`\`typescript <Button size="large" variant="contained"> \`\`\` 3. Espaçamento adequado: \`\`\`typescript <Stack spacing={2} direction="row"> \`\`\` 4. Ações frequentes próximas: - Coloque no header ou rodapé - Fácil acesso com polegar (mobile) ` }, - index.js:320-351 (helper)UX guideline data for 'groupingEffect' bias, used by the handler when bias='grouping'. Contains description and instructions.
groupingEffect: { description: "Efeito de Agrupamento - Itens relacionados juntos", instructions: ` **Agrupamento Visual:** 1. Stack para agrupar: \`\`\`typescript <Stack spacing={2}> <TextField label="Nome" /> <TextField label="Email" /> </Stack> \`\`\` 2. Divider entre seções: \`\`\`typescript <Divider sx={{ my: 2 }} /> \`\`\` 3. Cards para contextos: \`\`\`typescript <Paper elevation={2}> {/* conteúdo relacionado */} </Paper> \`\`\` 4. Typography para títulos de seção: \`\`\`typescript <Typography variant="h6" sx={{ mb: 2 }}> Dados Pessoais </Typography> \`\`\` `