ux-laws-mcp

v2.1.0

Published

11 days ago

MCP Server con 30 Leyes de UX/UI + WCAG 2.1 + Prompts - Multi-plataforma (Web, iOS, Android, Flutter, Desktop, Voice, CLI, Games, AR/VR, Svelte, SolidJS, Tailwind, Tauri)

0High
0Medium
0Low

fmoralesaliaga

mcp model-context-protocol ux ui design laws-of-ux accessibility wcag wcag-2.1 user-experience gestalt heuristics claude anthropic

🎯 UX Laws MCP v2.1

MCP Server para análisis de interfaces basado en las 30 Leyes de UX + WCAG 2.1 con soporte multi-plataforma (24 plataformas).

📋 Características

✅ 30 Leyes de UX extraídas de lawsofux.com
✅ 25+ Criterios WCAG 2.1 (Niveles A, AA, AAA)
✅ 24 Plataformas con patrones específicos
✅ 10 MCP Prompts predefinidos para flujos comunes
✅ 20 Checklists de componentes extendidos
✅ Detección automática de plataforma basada en código
✅ 44 Herramientas (30 leyes + 14 utilidades)
✅ Reportes de auditoría exportables
✅ Comparación entre plataformas

🚀 Instalación

Desde NPM (recomendado)

npx ux-laws-mcp

Instalación global

npm install -g ux-laws-mcp

Desarrollo local

git clone https://github.com/Agencia-Tecnologica-Multiverse-Limitada/UX-UI-MCP.git
cd UX-UI-MCP
npm install
npm run build

⚙️ Configuración en Claude Desktop

Añade a tu claude_desktop_config.json:

{
  "mcpServers": {
    "ux-laws": {
      "command": "npx",
      "args": ["-y", "ux-laws-mcp"]
    }
  }
}

🖥️ Plataformas Soportadas (24)

El MCP detecta automáticamente la plataforma basándose en el código, o puedes especificarla manualmente.

🌐 Web (8)

| ID | Plataforma | Detección | |----|------------|-----------| | web-html | HTML/CSS | <html>, <div>, class= | | web-react | React | useState, <Component />, className= | | web-vue | Vue.js | <template>, v-if, v-for | | web-angular | Angular | *ngIf, [(ngModel)], @Component | | web-svelte | Svelte | <script>, $:, on:click | | web-solid | SolidJS | createSignal, <For>, createEffect | | web-tailwind | Tailwind CSS | class="flex", className="px-4" |

📱 Mobile (6)

| ID | Plataforma | Detección | |----|------------|-----------| | ios-swiftui | SwiftUI | @State, VStack, .modifier | | ios-uikit | UIKit | UIView, UIButton, @IBOutlet | | android-compose | Jetpack Compose | @Composable, Modifier., remember | | android-xml | Android XML | android:, app:layout_ | | flutter | Flutter | Widget, StatelessWidget, BuildContext | | react-native | React Native | <View>, StyleSheet.create, react-native |

💻 Desktop (5)

| ID | Plataforma | Detección | |----|------------|-----------| | desktop-electron | Electron | electron, ipcRenderer, BrowserWindow | | desktop-wpf | WPF | <Window, x:Name, <Grid> | | desktop-macos | macOS/AppKit | NSView, NSWindow, @IBAction | | desktop-qt | Qt/QML | QWidget, QML, Q_OBJECT | | desktop-tauri | Tauri | tauri::, #[tauri::command], invoke |

🎙️ Voice (2)

| ID | Plataforma | Detección | |----|------------|-----------| | voice-alexa | Alexa Skills | IntentHandler, Alexa, canHandle | | voice-google | Google Assistant | DialogflowApp, conv.ask, actions-on-google |

⌨️ CLI (1)

| ID | Plataforma | Detección | |----|------------|-----------| | cli | Command Line | argv, commander, inquirer, chalk |

🎮 Games (2)

| ID | Plataforma | Detección | |----|------------|-----------| | game-unity | Unity | MonoBehaviour, GameObject, [SerializeField] | | game-unreal | Unreal Engine | UCLASS, AActor, UUserWidget |

♿ WCAG 2.1 (Nuevo en v2.1)

El MCP ahora incluye soporte completo para WCAG 2.1:

Herramientas WCAG

| Herramienta | Descripción | |-------------|-------------| | wcag_audit | Auditoría contra criterios WCAG 2.1 | | wcag_get_criterion | Info detallada de un criterio WCAG | | wcag_list_criteria | Lista criterios por nivel/principio | | wcag_related_laws | Encuentra WCAG relacionados a una ley UX |

Niveles WCAG

Nivel A: Requisitos mínimos de accesibilidad
Nivel AA: Estándar recomendado (legal en muchos países)
Nivel AAA: Máximo nivel de accesibilidad

Ejemplo

{
  "name": "wcag_audit",
  "arguments": {
    "code": "<button>Click</button>",
    "level": "AA",
    "description": "Botón de envío de formulario"
  }
}

📝 MCP Prompts (Nuevo en v2.1)

10 prompts predefinidos para flujos de trabajo comunes:

| Prompt | Descripción | |--------|-------------| | audit_component | Auditoría UX completa de un componente | | improve_form | Mejora UX de formularios | | accessibility_review | Revisión de accesibilidad WCAG | | design_system_check | Verificar consistencia con design system | | mobile_ux_review | Optimización UX mobile | | cognitive_load_analysis | Análisis de carga cognitiva | | compare_platforms | Comparar implementación entre plataformas | | error_handling_review | Revisión de manejo de errores | | navigation_analysis | Análisis de estructura de navegación | | performance_ux | Optimización de UX de rendimiento |

📦 Checklists de Componentes (Nuevo en v2.1)

20 tipos de componentes con checklists extendidos:

| Categoría | Componentes | |-----------|-------------| | Formularios | form, input, select, checkbox | | Navegación | navigation, tabs, breadcrumbs | | Feedback | modal, toast, tooltip, alert | | Contenido | card, list, image, video | | Acciones | button | | Estados | skeleton, progress, empty_state |

Herramientas

{
  "name": "ux_component_checklist",
  "arguments": {
    "component_type": "form",
    "platform": "web-react"
  }
}

🛠️ Herramientas Disponibles (44)

📊 Herramientas por Ley (30)

Cada ley tiene su propia herramienta de análisis con patrones específicos por plataforma:

analyze_fitts_law          - Ley de Fitts (tamaños/distancias)
analyze_hicks_law          - Ley de Hick (complejidad de decisión)
analyze_jakobs_law         - Ley de Jakob (familiaridad)
analyze_millers_law        - Ley de Miller (7±2 elementos)
analyze_postels_law        - Ley de Postel (tolerancia)
analyze_peak_end_rule      - Regla del Peak-End
analyze_aesthetic_usability - Efecto Estética-Usabilidad
analyze_doherty_threshold  - Umbral de Doherty (<400ms)
analyze_teslers_law        - Ley de Tesler (complejidad irreducible)
analyze_pareto_principle   - Principio de Pareto (80/20)
analyze_proximity_law      - Ley de Proximidad
analyze_common_region_law  - Ley de Región Común
analyze_pragnanz_law       - Ley de Prägnanz
analyze_similarity_law     - Ley de Semejanza
analyze_uniform_connectedness - Conexión Uniforme
analyze_closure_law        - Ley de Cierre
analyze_common_fate_law    - Ley del Destino Común
analyze_continuity_law     - Ley de Continuidad
analyze_figure_ground      - Figura y Fondo
analyze_serial_position    - Efecto de Posición en Serie
analyze_von_restorff_effect - Efecto Von Restorff
analyze_zeigarnik_effect   - Efecto Zeigarnik
analyze_chunking           - Fragmentación (Chunking)
analyze_cognitive_load     - Carga Cognitiva
analyze_selective_attention - Atención Selectiva
analyze_goal_gradient      - Efecto de Gradiente de Meta
analyze_occams_razor       - Navaja de Occam
analyze_parkinsons_law     - Ley de Parkinson
analyze_progressive_disclosure - Revelación Progresiva
analyze_feedback_principle - Principio de Feedback

Parámetros de las herramientas de análisis:

| Parámetro | Tipo | Descripción | |-----------|------|-------------| | code | string | Código fuente a analizar | | component_description | string | Descripción del componente | | platform | enum | Plataforma (o "auto" para detectar) | | context | string | Contexto adicional |

🔧 Herramientas de Utilidad (14)

`ux_full_audit`

Auditoría completa contra las 30 leyes.

{
  "code": "<código>",
  "component_description": "Formulario de checkout",
  "platform": "web-react",
  "focus_areas": ["heuristics", "gestalt"]
}

`ux_get_law_info`

Información detallada de una ley específica.

{
  "law_id": "fitts_law",
  "platform": "ios-swiftui"
}

`ux_list_laws`

Lista todas las leyes, opcionalmente filtradas por categoría.

{
  "category": "gestalt"
}

`ux_checklist`

Genera checklist para un tipo de componente.

{
  "component_type": "form",
  "platform": "flutter"
}

`ux_list_platforms`

Lista todas las plataformas soportadas.

{
  "category": "mobile"
}

`ux_detect_platform`

Detecta la plataforma basándose en el código.

{
  "code": "@Composable fun MyScreen() { ... }",
  "file_extension": ".kt"
}

`ux_compare_platforms`

Compara cómo aplicar una ley en diferentes plataformas.

{
  "law_id": "fitts_law",
  "platforms": ["web-react", "ios-swiftui", "android-compose", "flutter"]
}

`wcag_audit` (Nuevo)

Auditoría de accesibilidad WCAG 2.1.

{
  "code": "<button>Submit</button>",
  "level": "AA",
  "description": "Botón de envío"
}

`wcag_get_criterion` (Nuevo)

Información detallada de un criterio WCAG.

{
  "criterion_id": "1.4.3"
}

`wcag_list_criteria` (Nuevo)

Lista criterios WCAG filtrados.

{
  "level": "AA",
  "principle": "perceivable"
}

`wcag_related_laws` (Nuevo)

Encuentra criterios WCAG relacionados con una ley UX.

{
  "law_id": "fitts_law"
}

`ux_component_checklist` (Nuevo)

Checklist extendido para un tipo de componente.

{
  "component_type": "modal",
  "platform": "web-react"
}

`ux_list_components` (Nuevo)

Lista todos los tipos de componentes disponibles.

`ux_generate_report` (Nuevo)

Genera reporte completo de auditoría UX + WCAG.

{
  "code": "...",
  "description": "Dashboard de analytics",
  "platform": "web-react",
  "include_wcag": true,
  "include_recommendations": true
}

📚 Categorías de Leyes

| Categoría | Leyes | Descripción | |-----------|-------|-------------| | heuristics | 10 | Principios heurísticos fundamentales | | gestalt | 9 | Principios de percepción visual | | cognitive | 6 | Principios de psicología cognitiva | | principles | 5 | Principios de diseño de UX |

💡 Ejemplos de Uso

Analizar un botón en SwiftUI

Herramienta: analyze_fitts_law
{
  "code": "Button(action: {}) { Text(\"Submit\") }.frame(width: 200, height: 44)",
  "platform": "ios-swiftui"
}

Auditoría completa de un formulario Flutter

Herramienta: ux_full_audit
{
  "code": "...(código del formulario)...",
  "platform": "flutter",
  "focus_areas": ["heuristics", "cognitive"]
}

Comparar Ley de Fitts entre plataformas

Herramienta: ux_compare_platforms
{
  "law_id": "fitts_law",
  "platforms": ["web-react", "ios-swiftui", "android-compose", "game-unity"]
}

Generar checklist de navegación para CLI

Herramienta: ux_checklist
{
  "component_type": "navigation",
  "platform": "cli"
}

🎯 Cómo el MCP Diferencia Plataformas

1. Detección Automática

Cuando usas platform: "auto", el MCP analiza el código buscando patrones específicos:

SwiftUI  → @State, VStack, .frame
Compose  → @Composable, Modifier., remember
Flutter  → Widget, build(), StatelessWidget
React    → useState, className, <Component />
CLI      → argv, commander, inquirer
Voice    → IntentHandler, conv.ask
Games    → MonoBehaviour, AActor

2. Patrones Específicos por Plataforma

Cada ley tiene patrones de código adaptados:

Ley de Fitts - Tamaños mínimos:

iOS: 44pt (Human Interface Guidelines)
Android: 48dp (Material Design)
Web: 44px (WCAG)
Games: Escalar con resolución

Ley de Jakob - Patrones familiares:

iOS: TabBar inferior, Navigation Stack
Android: BottomNavigation, Drawer
Web: Hamburger menu, breadcrumbs
CLI: Subcomandos tipo git

3. Guidelines de Plataforma

El MCP incluye referencias a las guías oficiales:

📘 Apple Human Interface Guidelines
📗 Material Design Guidelines
📙 Windows Design Guidelines
📕 Web Content Accessibility Guidelines

📂 Estructura del Proyecto

UX-UI-MCP/
├── src/
│   ├── index.ts                 # Servidor MCP principal
│   └── knowledge/
│       ├── ux-laws.ts           # 30 leyes de UX
│       ├── platforms.ts         # 24 definiciones de plataforma
│       ├── platform-patterns.ts # Patrones específicos por plataforma
│       ├── wcag.ts              # Criterios WCAG 2.1
│       ├── prompts.ts           # 10 MCP Prompts predefinidos
│       └── checklists.ts        # 20 checklists de componentes
├── dist/                        # Código compilado
├── package.json
├── tsconfig.json
└── README.md

🔄 Changelog

v2.1.0 🆕

✨ WCAG 2.1: 25+ criterios con niveles A, AA, AAA
✨ MCP Prompts: 10 flujos predefinidos de trabajo
✨ Checklists extendidos: 20 tipos de componentes
✨ 4 Nuevas plataformas: Svelte, SolidJS, Tailwind, Tauri
✨ 7 Nuevas herramientas: wcag_audit, wcag_get_criterion, wcag_list_criteria, wcag_related_laws, ux_component_checklist, ux_list_components, ux_generate_report
✨ Reportes de auditoría con UX + WCAG combinados
📚 24 plataformas totales

v2.0.0

✨ Soporte para 20 plataformas
✨ Detección automática de plataforma
✨ Patrones de código específicos por plataforma
✨ 3 nuevas herramientas: ux_list_platforms, ux_detect_platform, ux_compare_platforms
✨ Checklists específicos por plataforma
📚 Guidelines de plataforma en análisis

v1.0.0

🎉 Release inicial
📚 30 leyes de UX
🛠️ 34 herramientas

📄 Licencia

MIT - Ver LICENSE

🙏 Créditos

Leyes de UX: lawsofux.com por Jon Yablonski
WCAG 2.1: W3C Web Accessibility Initiative
Basado en el protocolo MCP de Anthropic