Descripción
Contexto general
Simulador educativo de Tailwind CSS inspirado en la interfaz de tres paneles y la experiencia gamificada de aprendesql.dev. El alumno edita HTML con clases de Tailwind en un editor CodeMirror 6 y observa, en tiempo real, una vista previa validada visualmente dentro de un iframe sandboxed. Al superar todas las comprobaciones de una lección, se acumula XP, se marca como completada con confetti y toast de celebración, y se desbloquea la siguiente lección. Incluye 50 lecciones en 18 módulos, motor de validación visual por computed styles (4 tipos de regla), tour interactivo de onboarding con SVG spotlight, paleta de comandos ⌘K, dark mode sincronizado host↔iframe vía postMessage, página de progreso y certificados. Construido con Angular 22 zoneless + Signals + TypeScript 6 estricto.
Motivación
Por qué lo construí
Ofrecer una forma interactiva y gamificada de aprender Tailwind CSS, donde el alumno escribe código real y recibe feedback visual inmediato en lugar de leer documentación pasiva.
Validar el aprendizaje con un motor de computed styles que comprueba el HTML del alumno contra reglas declarativas, asegurando que las clases aplicadas produzcan el resultado visual esperado.
Replicar la experiencia de tres paneles (lecciones · editor · preview) y la gamificación (XP, confetti, desbloqueo progresivo) de aprendesql.dev, adaptada al ecosistema Angular zoneless con Signals.
Mantener la seguridad del simulador con un iframe sandboxed (allow-scripts sin allow-same-origin) que renderiza el código del alumno con Tailwind Play CDN, sin acceso al DOM del host.
Características
Lo que destaca
Angular 22 zoneless con Signals — sin Zone.js, con input()/output()/computed()/linkedSignal()/effect() e inject(), control flow nativo (@if/@for/@switch) y carga lazy del editor vía @defer (on idle).
Motor de validación visual con 4 tipos de regla (computed-style, class-present, attribute, structure) y normalización de colores vía resolución DOM (oklch/hex/nombres → rgb canónico) para comparar de forma robusta contra Tailwind v4.
Comunicación host ↔ iframe por postMessage bidireccional filtrada por event.source y marca __aprendeTw, con snapshot de estilos capturado tras requestAnimationFrame (Tailwind aplicado).
50 lecciones en 18 módulos (layout, color, spacing, tipografía, estados, responsive, borders, effects, sizing, transforms, interactivity, backgrounds, filters, backdrop-filters, mask, svg, tables, accessibility) tipadas por interfaces TS estrictas.
Tour interactivo de 4 pasos con SVG spotlight/mask (patrón driver.js), navegación automática entre pasos, retry de target lazy/deferred con backoff, responsive con bottom sheet en móvil y focus trap accesible.
Paleta de comandos ⌘K con búsqueda global de lecciones, utilidades Tailwind y conceptos del glosario, navegación por teclado (↑/↓/Enter/Esc) y a11y completa (role=dialog, aria-activedescendant, role=listbox/option).
Gamificación con XP acumulada, porcentaje de avance, desbloqueo progresivo de lecciones, confetti con física de partículas, toast de celebración, página de progreso y certificado al completar todas las lecciones.
Persistencia de progreso, tema y tour completado en localStorage; dark mode sincronizado host↔iframe sin recargar; auto-height del iframe con ResizeObserver + postMessage.