Adrian Flores Cortes 967ab360bb Initial commit: Workspace v1 with 3-layer architecture

Structure:
- control-plane/: Registries, SIMCO directives, CI/CD templates
- projects/: Gamilit, ERP-Suite, Trading-Platform, Betting-Analytics
- shared/: Libs catalog, knowledge-base

Key features:
- Centralized port, domain, database, and service registries
- 23 SIMCO directives + 6 fundamental principles
- NEXUS agent profiles with delegation rules
- Validation scripts for workspace integrity
- Dockerfiles for all services
- Path aliases for quick reference

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

2025-12-23 00:35:19 -06:00

12 KiB

Raw Blame History

US-PERF-003: Accesibilidad y Gamificación Personalizada

Información Básica

Campo	Valor
ID	US-PERF-003
Épica	EXT-004 - Perfiles Avanzados
Título	Configuración de Accesibilidad, Audio y Preferencias de Gamificación
Prioridad	Media (P2)
Story Points	5 SP
Estado	NOT STARTED
Fase	Mes 3 (Extensiones Primera Ola)
Presupuesto	$2,500 MXN

Historia de Usuario

Como usuario con necesidades específicas de accesibilidad o preferencias de experiencia gamificada Quiero configurar opciones de accesibilidad (alto contraste, lector de pantalla, movimiento reducido) y personalizar mi experiencia de gamificación (rankings, notificaciones de XP, celebraciones) Para adaptar la plataforma a mis capacidades y disfrutar de una experiencia cómoda y motivadora

Valor de Negocio

Impacto

Inclusión: Accesible para usuarios con discapacidades visuales, motoras, cognitivas
Compliance: Cumplimiento WCAG 2.1 AA (legal requirement)
Personalización: Usuarios controlan nivel de gamificación
Experiencia: Flexibilidad mejora satisfacción 25%

Métricas de Éxito

15% usuarios activan al menos 1 opción de accesibilidad
30% usuarios ajustan preferencias de gamificación
Tiempo de carga con alto contraste < 2s
100% compatibilidad screen readers (JAWS, NVDA, VoiceOver)

Criterios de Aceptación

CA-01: Configuración de Accesibilidad

Dado que el usuario configura accesibilidad Cuando accede a la sección Entonces puede activar:

Alto Contraste: aumenta contraste de texto/fondo a ratio 7:1 mínimo
Movimiento Reducido: desactiva animaciones y transiciones (respeta prefers-reduced-motion)
Navegación por Teclado: indicadores de foco visibles mejorados
Lector de Pantalla: optimizaciones adicionales para ARIA labels
Subtítulos: activar para todos los videos
Descripción de Imágenes: mostrar alt text siempre visible
Focus Visible: indicadores de foco extra visibles (3px border)
Link a guía completa de accesibilidad
Explicación de beneficios de cada opción

CA-02: Configuración de Audio y Sonido

Dado que la plataforma tiene efectos de audio Cuando el usuario configura audio Entonces puede ajustar:

Efectos de Sonido: ON/OFF (clicks, notificaciones, logros)
Música de Fondo: ON/OFF (si aplicable)
Volumen General: slider 0-100%
Volumen de Efectos: slider 0-100%
Volumen de Música: slider 0-100%
Sonidos de Notificación: ON/OFF
Preview de sonidos al ajustar (reproducir muestra)
Guardar preferencias localmente (localStorage)
Mute rápido con botón global

CA-03: Preferencias de Gamificación

Dado que el usuario personaliza su experiencia gamificada Cuando ajusta preferencias de gamificación Entonces puede configurar:

Mostrar en Rankings: Sí / No (ocultar de leaderboards públicos)
Comparaciones Sociales: Activadas / Solo Amigos / Desactivadas
Notificaciones de XP/Cacao: Siempre / Solo grandes cantidades (>50) / Nunca
Celebraciones Animadas: Todas / Solo importantes (logros, level up) / Ninguna
Showcasear Logros: Público / Solo Amigos / Privado
Multiplicadores Visibles: Sí / No (mostrar bonos activos)
Mantener motivación sin presión social
Efectos reflejados inmediatamente en interfaz

CA-04: Modo de Lectura Optimizado

Dado que el usuario prefiere lectura clara Cuando activa modo de lectura Entonces se aplica:

Fuente optimizada para dislexia (OpenDyslexic opcional)
Espaciado de línea aumentado (1.5x)
Ancho máximo de párrafo (70 caracteres)
Reducción de distracciones visuales
Fondo crema en lugar de blanco puro
Resaltado de línea actual al leer

CA-05: Configuración de Navegación

Dado que el usuario necesita navegación adaptada Cuando configura navegación Entonces puede:

Activar Breadcrumbs siempre visibles
Tamaño de botones: Normal / Grande / Extra Grande (touch targets 44px+)
Posición de menú: Lateral / Superior / Inferior
Mostrar Tooltips siempre / Al pasar mouse / Nunca
Confirmaciones extra: Siempre pedir confirmación antes de acciones importantes

CA-06: Atajos de Teclado Personalizados

Dado que el usuario usa navegación por teclado Cuando accede a atajos Entonces puede:

Ver lista completa de atajos disponibles (modal con Tab)
Atajos predefinidos:
- Ctrl+K: Búsqueda rápida
- Ctrl+H: Ir a Home/Dashboard
- Ctrl+P: Perfil
- Ctrl+N: Notificaciones
- G+M: Ir a Mis Mecánicas
- G+L: Ir a Leaderboard
- ?: Mostrar ayuda
Personalizar atajos (opcional)
Export/import de configuración de atajos

CA-07: Experiencia Sensorial Reducida

Dado que el usuario tiene sensibilidad sensorial Cuando activa modo reducido Entonces se aplica:

Desactivar todas las animaciones
Eliminar efectos de parallax
Reducir colores vibrantes a paleta suave
Eliminar videos auto-play
Desactivar efectos de hover complejos
Mantener funcionalidad completa sin estética distractora

CA-08: Idioma y Localización

Dado que el usuario configura idioma Cuando selecciona preferencias Entonces puede:

Idioma de Interfaz: Español / Inglés
Formato de Fecha: DD/MM/YYYY / MM/DD/YYYY / YYYY-MM-DD
Formato de Hora: 12h (AM/PM) / 24h
Zona Horaria: Auto-detectar / Seleccionar manualmente
Moneda: MXN / USD (para referencia de costos)
Cambios aplicados inmediatamente
Persistencia en backend para sincronizar dispositivos

CA-09: Configuración de Densidad Visual

Dado que el usuario ajusta densidad de interfaz Cuando cambia la configuración Entonces puede elegir:

Compacta: máxima información en pantalla, espaciado mínimo
Cómoda: balance entre información y espacio (default)
Espaciosa: máximo espacio, ideal para touch y accesibilidad
Preview en tiempo real del cambio
Afecta: padding de cards, tamaño de fuente, espaciado entre elementos

CA-10: Persistencia y Sincronización

Dado que el usuario configura preferencias Cuando guarda cambios Entonces el sistema debe:

Guardar en base de datos (backend)
Sincronizar entre todos los dispositivos del usuario
Aplicar cambios inmediatamente sin reload
Cache en localStorage para carga rápida inicial
Detectar conflictos entre dispositivos (usar más reciente)
Export de configuración como archivo JSON
Import de configuración desde archivo

Especificaciones Técnicas

Frontend Components

src/pages/preferences/
├── AccessibilitySection.tsx
├── AudioSection.tsx
├── GamificationSection.tsx
├── NavigationSection.tsx
├── KeyboardShortcutsSection.tsx
├── LocalizationSection.tsx
└── components/
    ├── VolumeSlider.tsx
    ├── ShortcutKeyBinder.tsx
    ├── DensityPreview.tsx
    └── AccessibilityChecker.tsx

TypeScript Interfaces

interface AccessibilitySettings {
  highContrast: boolean;
  reducedMotion: boolean;
  keyboardNavigation: boolean;
  screenReaderOptimizations: boolean;
  alwaysShowCaptions: boolean;
  alwaysShowAltText: boolean;
  enhancedFocus: boolean;
  dyslexiaFont: boolean;
  readingMode: boolean;
}

interface AudioSettings {
  soundEffects: boolean;
  backgroundMusic: boolean;
  masterVolume: number; // 0-100
  effectsVolume: number;
  musicVolume: number;
  notificationSounds: boolean;
}

interface GamificationSettings {
  showInRankings: boolean;
  socialComparisons: 'all' | 'friends' | 'none';
  rewardNotifications: 'always' | 'large' | 'never';
  celebrations: 'all' | 'important' | 'none';
  showcaseVisibility: 'public' | 'friends' | 'private';
  showMultipliers: boolean;
}

interface NavigationSettings {
  breadcrumbsAlwaysVisible: boolean;
  buttonSize: 'normal' | 'large' | 'xlarge';
  menuPosition: 'side' | 'top' | 'bottom';
  tooltipBehavior: 'always' | 'hover' | 'never';
  extraConfirmations: boolean;
}

API Endpoints

// PUT /api/preferences/:userId/accessibility
// PUT /api/preferences/:userId/audio
// PUT /api/preferences/:userId/gamification
// GET /api/preferences/:userId/export
// POST /api/preferences/:userId/import

Definición de Terminado (DoD)

Sección de accesibilidad implementada
Alto contraste funcional (ratio 7:1)
Reduced motion respeta prefers-reduced-motion
Screen reader compatible (ARIA completo)
Configuración de audio con sliders
Preview de sonidos funcional
Preferencias de gamificación
Modo de lectura optimizado
Fuente para dislexia disponible
Atajos de teclado documentados
Configuración de navegación
Idioma y localización
Densidad visual con preview
Persistencia en backend
Sincronización multi-dispositivo
Export/import de configuración
Tests de accesibilidad (axe-core, WAVE)
Compliance WCAG 2.1 AA verificado
Tests con screen readers
Documentación de accesibilidad

Dependencias

Depende de

US-PERF-001: Sistema de preferencias de usuario
EAI-003: Sistema de gamificación

Riesgos y Mitigaciones

Riesgo	Probabilidad	Impacto	Mitigación
Alto contraste rompe diseño	Media	Medio	Testing exhaustivo, CSS variables
Reduced motion elimina feedback visual	Media	Bajo	Alternativas visuales estáticas
Screen readers no funcionan	Baja	Alto	Testing con JAWS, NVDA, VoiceOver
Sincronización falla entre dispositivos	Media	Bajo	Fallback a localStorage, retry logic

Estimación Detallada (5 SP)

Tarea	Horas	Responsable
Diseño UX/UX accesible	6h	UX Designer
Implementar alto contraste	5h	Frontend Dev
Reduced motion	4h	Frontend Dev
Screen reader optimizations	6h	Frontend Dev
Audio controls	5h	Frontend Dev
Gamificación preferences	5h	Frontend Dev
Modo lectura	4h	Frontend Dev
Atajos de teclado	5h	Frontend Dev
Navegación y densidad	4h	Frontend Dev
Idioma y localización	6h	Frontend Dev
Backend API	4h	Backend Dev
Sincronización	4h	Backend Dev
Testing accesibilidad	8h	QA + Accessibility Specialist
Documentación	4h	Tech Lead
TOTAL	70h

Presupuesto: $2,500 MXN (~$145 USD) Duración Estimada: 2 días (equipo de 4-5 personas)

Tareas de Implementación

Backend (9h - 45%)

Diseñar schema para preferencias de accesibilidad y gamificación (1.5h)
Implementar endpoints PUT /api/preferences/:userId/accessibility (2h)
Crear endpoints para configuración de audio y gamificación (2h)
Desarrollar sistema de sincronización multi-dispositivo (2h)
Implementar export/import de configuración como JSON (1.5h)

Frontend (7h - 35%)

Crear AccessibilitySection con toggles (1.5h)
Implementar AudioSection con sliders de volumen (1h)
Desarrollar GamificationSection con previews (1.5h)
Crear modo de lectura optimizado con fuente para dislexia (1h)
Implementar atajos de teclado personalizados (1h)
Desarrollar configuración de densidad visual con preview (1h)

Testing y QA (3h - 15%)

Realizar tests de accesibilidad con axe-core y WAVE (1.5h)
Testing con screen readers (JAWS, NVDA, VoiceOver) (1h)
Verificar compliance WCAG 2.1 AA (0.5h)

Deploy y Documentación (1h - 5%)

Documentar API de preferencias (0.5h)
Crear documentación de accesibilidad para usuarios (0.5h)

Total Estimado: 20h

Cronograma

Fase	Fecha Inicio Planificada	Fecha Fin Estimada	Horas	Estado
Backend	28 Oct 2024	29 Oct 2024	9h	Planificado
Frontend	29 Oct 2024	30 Oct 2024	7h	Planificado
Testing	30 Oct 2024	31 Oct 2024	3h	Planificado
Deploy	31 Oct 2024	31 Oct 2024	1h	Planificado

12 KiB Raw Blame History