recordalexia/docs/prompt-claude-code-recordalexia-director.md

recordaLexia — Construcción con Claude Code (prompt director, afinado al handoff)

Qué eres y qué vas a construir

Actúa como arquitecto/desarrollador full-stack. Construye recordaLexia, una app web familiar para que niños con TDAH vean cada día, en una tablet en modo kiosko (horizontal), qué material llevar al cole y qué rutinas hacer por la tarde, con gamificación por monedas y tienda de recompensas. Es multi-niño y bilingüe ES/CA.

Trabajas en LOCAL (Claude Code Desktop). Nada de nube ni infraestructura corporativa.

Punto de partida: handoff de Claude Design (FUENTE DE VERDAD VISUAL)

El diseño está en app-de-rutinas-visuales-para-tdah/project/Rutinas TDAH.dc.html (+ support.js). Es un prototipo en HTML con su propio runtime (DCLogic). NO lo incrustes: reconstruye sus pantallas y componentes en Angular 19 respetando con fidelidad los tokens, tamaños, estados y microinteracciones que se describen abajo.

Sistema de diseño (extraído del handoff — úsalo como design tokens)

• Tipografía: Fredoka (títulos, etiquetas, números; pesos 400–700) y Nunito (texto; 400–900). Etiquetas de tareas en MAYÚSCULAS.
• Iconografía = emojis (decisión deliberada del diseño). Mantenerla: cada material/actividad/premio lleva su emoji. No introduzcas una librería de iconos.
• Colores de acento por categoría: #F2A65A (naranja), #5B8DEF (azul), #A78BD0 (morado), #7FBF6B (verde), #5BC0BE (teal), #F4C95D (amarillo), #EC8FA4 (rosa).
• Texto: principal #2A3142; secundarios #5A6B82, #7A879B, #8C99AB, #9FB0BD.
• Superficies: blanco #fff, gris suave #F4F7F9/#EEF2F6; bordes #E6ECF0, #D3DCE3, #DCE3EA. Fondo de pantalla: #EFF4F6 con gradientes radiales suaves (#FBF4E9, #E2F0EC) y dos "blobs" orgánicos difuminados.
• Monedas: pill con fondo #FFF6E0, texto #C7912B, emoji 🪙.
• Tarjeta de tarea: borde 3px, radio 26px, min-height 92px. En estado COMPLETADO el fondo pasa a un tinte del color (color + alpha 24), el borde toma el color, anima pop y aparece un check circular de 60px (checkPop).
• Tiles de icono: 66px, radio 20px, fondo en tinte del color. Hero (modo Foco): 200px.
• Áreas táctiles grandes: check 60px, botones de navegación 64px, teclas PIN 84px.
• Animaciones definidas: pop, checkPop, floatY/floatYb, walletBump, confFall (confeti), shake (error), celebPop, ringGlow (timer), slideUp.

Stack objetivo (doméstico/homelab — NADA corporativo)

• Frontend: Angular 19 standalone components + signals, TypeScript estricto. i18n ES/CA (p. ej. @angular/localize o ngx-translate, a tu criterio).
• Backend: Spring Boot 3.x / Java 21 / Gradle 8 + PostgreSQL (Liquibase).
• Empaquetado: Docker multi-stage + docker-compose (postgres + backend + Nginx sirviendo el frontend).
• Auth ligera: kiosko sin fricción para el niño + PIN para el panel de padres.
• PROHIBIDO en esta fase: Keycloak, Gravitee, Camunda, Kubernetes, Jenkins.
• Comenta el código en español, sobre todo la lógica de negocio.

Pantallas a implementar (fieles al prototipo)

1. Perfiles (profiles): título "¿QUIÉN ENTRA HOY?", tarjetas grandes por niño con mascota (emoji), nombre, monedas y selector de edad (− / +). Botón discreto "⚙️ Padres" que lleva al PIN.
2. Home (home), con DOS modos conmutables:
   • A · Tablero: cabecera (saludo "Hola, {nombre} 👋" + día/fecha grande + timer "SALIMOS EN {min} min" con anillo glow + monedero 🪙 + botón tienda 🎁); barra de progreso global "{hechas}/{total} listo ✨"; banner de eventos (examen 📋 / deberes 📎) con TTS; dos columnas: COLE 🎒 y TARDE 🌙, cada tarea como tarjeta (icono, etiqueta, botón 🔊 TTS, check). Estado vacío: 🏖️ "HOY NO HAY COLE".
   • B · Foco: una sola tarea a pantalla (hero tile 200px), botones ‹ ›, puntos de progreso, botón grande "¡HECHO!" + 🔊, y pie "Quedan X · Después: Y".
   • Al completar TODAS las tareas: overlay de celebración con confeti, 🦊🎉, "¡TODO LISTO!", "+{monedasDia}" y botón "¡GENIAL! 👍".
3. Tienda (store): cabecera con monedero, grid de 3 columnas de premios (icono, nombre, coste 🪙, botón CANJEAR o "Te faltan N"); toast de confirmación.
4. PIN (pin): teclado numérico 3×4, 4 dígitos, feedback de error (shake).
5. Padres (parents): barra superior con pestañas y botón "🔓 Salir". Pestañas:
   • 📅 Horario: rejilla de 5 días (L–V); por día, las actividades del cole.
   • 🎒 Materiales: actividades (Gimnasia, Música, Matemáticas, Lengua…) y su material como chips; alta de actividad/material.
   • 📋 Eventos: lista de exámenes/deberes con fecha; alta.
   • 🌙 Rutinas: selector de día + lista de rutinas de tarde reordenables.
   • 🪙 Recompensas: steppers de monedas (por tarea / por bloque / por día) y toggles (sonido, TTS); gestión del catálogo de la tienda.

Decisiones a respetar

• Conserva el modo Foco (B): es clave para TDAH. Hazlo seleccionable como preferencia del niño (no como control de demo).
• Elimina el "dock" inferior de prototipo (los botones de demo A/B, idioma, reiniciar, empty). Sustituye sus funciones por ajustes reales: el modo A/B y el idioma son preferencias; "reiniciar" no existe en producción (el día se regenera).
• Mantén TTS (Web Speech API, voz es-ES / ca-ES) y el sonido de recompensa (puedes mantener el tono sintetizado con WebAudio o un sample corto).
• Mantén las monedas voladoras de la tarjeta al monedero y el walletBump.
• Bilingüe ES/CA en toda la UI; el idioma es una preferencia conmutable.

Mapa de componentes Angular sugerido

ProfileSelectComponent, HomeComponent (con BoardViewComponent y FocusViewComponent), TaskCardComponent, MorningTimerComponent, WalletComponent, ProgressBarComponent, EventBannerComponent, CelebrationOverlayComponent, StoreComponent + RewardCardComponent, PinPadComponent, ParentsComponent con sus 5 paneles de pestaña. Servicios: ApiService (HTTP tipado), TtsService, SoundService, I18nService, KioskService (fullscreen/landscape).

Implicaciones para el dominio/backend

Sigue docs/prompt-claude-code-backend-rutinas-tdah.md, que ya incorpora estos requisitos derivados del diseño: i18n (label_es/label_ca) en materiales, actividades y premios; icon (emoji) y color por entidad; hora de salida por niño; ajustes por niño (modo tablero/foco, sonido, TTS, edad, mascota); y order en las rutinas de tarde. Mantén alineados los DTOs del backend con los modelos del frontend, en especial GET /api/children/{id}/today.

Datos semilla (reproducir los del prototipo)

• Niños: Nora 🦊 (#F2A65A, 7 años, 42 monedas), Leo 🐢 (#5BC0BE, 9, 28), Mía 🦉 (#A78BD0, 6, 55).
• Cole: estuche ✏️, libro de mates 📘, flauta 🎵, ropa de gimnasia 👕, zapatillas 👟, almuerzo 🍎.
• Tarde: deshacer la mochila 🎒, merendar 🥪, hacer los deberes 📝, practicar piano 🎹, recoger la mesa 🍽️.
• Actividades: Gimnasia 🤸 (equipación/zapatillas/toalla/agua), Música 🎵 (flauta/libreta), Matemáticas 📘 (libro/regla/estuche), Lengua 📖 (lectura/cuaderno).
• Premios: 30 min tablet 🎮 (20), peli en familia 🍿 (50), tarde en el parque 🛝 (40), elijo la cena 🍕 (30), 30 min más despierto 🌙 (60), sorpresa dino 🦖 (80).
• Gamificación por defecto: 5 monedas/tarea, 10/bloque, 20/día completo.
• PIN demo de padres: 1234 (hazlo configurable).

Orden de trabajo (por fases, valida cada una)

1. Esqueleto del monorepo + docker-compose + README.
2. Backend: dominio + Liquibase + datos semilla + endpoints /today, toggle, wallet, tienda, CRUD de padres. Tests.
3. Frontend: tokens/estilos globales (Fredoka/Nunito, paleta, animaciones).
4. Frontend: Perfiles + Home (Tablero y Foco) cableados contra la API.
5. Frontend: Tienda + Panel de padres (5 pestañas) + i18n ES/CA.
6. Dockerfiles + arranque end-to-end (docker-compose up) y prueba del flujo: configurar día → ver HOY → marcar → ganar monedas → celebración → canjear.

Entregables

Monorepo compilable y levantable con docker-compose up, con README de arranque local y notas para desplegarlo después en el homelab.