belloni123/b16-immersive-frontend

B16 Immersive Frontend

Crea una experiencia memorable en torno a una única idea visual defendible. Esta habilidad complementa un flujo de trabajo de proyecto más amplio; no reemplaza las habilidades de gobernanza, planificación, construcción, verificación o revisión y no pretende reproducir B16 Dev OS.

Establecer el brief

Digiere todo el contexto disponible antes de hacer preguntas. Infiere hechos solo cuando la evidencia los respalde, cita la fuente o etiqueta la inferencia, y pregunta solo por las lagunas que puedan cambiar materialmente la dirección. Usa briefing.md cuando la dirección aún no esté aprobada.

Antes de la implementación, presenta una dirección compacta que cubra la tesis visual, la jerarquía de contenido, el punto focal del héroe, la tipografía, la paleta, el ritmo del diseño, la narrativa de movimiento, la pila probable, el presupuesto de rendimiento, los respaldos, la procedencia de los activos y las exclusiones. Obtén la aprobación para esta dirección. No trates la aprobación de un concepto como permiso para despliegues, compras, cuentas, tokens o cambios no relacionados en el sistema.

Diseñar con intención

• Comienza con móvil primero, luego expande la composición y coreografía para viewports más grandes.
• Fundamenta la identidad en el tema, la audiencia, los materiales, el idioma y el contenido real. Evita un aspecto genérico de kit de componentes.
• Gasta audacia visual en un lugar memorable y mantén el sistema de apoyo disciplinado.
• Redacta copia humana, técnicamente precisa, en voz activa. Usa minúsculas excepto la primera letra y sin guión largo. Nunca inventes pruebas, socios, testimonios, métricas o capacidades.
• Usa una familia de iconos coherente por proyecto, elegida por ajuste a la pila, identidad, cobertura, licencia, costo, mantenimiento, accesibilidad y peso. Usa marcas oficiales o autorizadas. Importa iconos individuales con 'tree shaking' real donde la pila lo soporte.
• Haz que cada acción principal sea operable sin hover. Especifica los estados táctil, teclado, foco, activo, carga, deshabilitado, error y vacío donde sea relevante.

Elegir la pila más pequeña y suficiente

Lee stack-selection.md cuando se esté considerando movimiento, canvas 2D o 3D. Conserva la pila actual a menos que se justifique y apruebe un cambio.

No agregues React a WordPress para un solo efecto. No hagas obligatoria ninguna biblioteca en todos los sitios. No instales una dependencia solo porque aparezca en un plan. Prefiere CSS y APIs de plataforma para transiciones simples, Motion para coreografía de componentes, GSAP con ScrollTrigger para secuencias de línea de tiempo o scroll deliberadas, PixiJS para escenas 2D exigentes, Three.js para WebGL directo, y React Three Fiber con helpers selectivos de drei cuando React ya exista y la composición declarativa de escenas sea beneficiosa. Lenis es opcional, nunca automático.

Usa ReactBits y Codrops solo como referencias selectivas. Confirma la licencia y procedencia del código y los activos antes de reutilizarlos. Prefiere síntesis original; conserva los avisos requeridos para cualquier extracto con licencia.

Especificar el movimiento antes de construirlo

Para cada animación significativa, registra:

1. Propósito: qué explica, prioriza, confirma o hace espacialmente legible.
2. Disparador: carga, entrada, clic, cambio de estado, puntero, scroll o progreso de medios.
3. Duración y easing: incluye límites para repetición e interrupción.
4. Comportamiento en móvil: qué cambia para viewport, puntero grueso, táctil, batería y capacidad del dispositivo.
5. Respaldo: estado estático final para movimiento reducido, JavaScript no disponible, medios fallidos, WebGL perdido o hardware limitado.

Evita significado solo en hover y movimiento continuo decorativo. La navegación, el mensaje principal y la llamada a la acción deben funcionar antes de que la animación se complete. Bajo prefers-reduced-motion: reduce, renderiza estados finales estables y elimina el comportamiento de desplazamiento por scrubbing, parallax, reproducción automática o scroll suave, en lugar de solo acortarlo.

Presupuestar el rendimiento

Establece presupuestos medibles apropiados para el proyecto antes de la implementación. Considera JavaScript inicial, peso de medios, cantidad de fuentes, concurrencia de animaciones, tareas largas, cambio de diseño, tiempo de contenido más grande, estabilidad de fotogramas, memoria de GPU, relación de píxeles del dispositivo y costo térmico.

Para canvas o WebGL, proporciona un póster estático; limita la relación de píxeles; pausa cuando esté fuera de pantalla u oculto; evita la asignación por fotograma; reduce el trabajo en dispositivos pequeños o limitados; maneja fallos de contexto; y elimina fotogramas, observadores, listeners, texturas, geometrías, materiales, objetivos de renderizado y estado del renderizador. El contenido semántico y los controles deben permanecer fuera o independientes del canvas.

Implementar proporcionalmente

Conserva la dirección aprobada y las convenciones existentes del proyecto. Mantén HTML semántico y contenido real como la fuente de verdad. Carga experiencias pesadas solo donde agreguen valor. Limita los efectos para que múltiples sistemas no controlen la misma propiedad. Usa como máximo un motor de scroll suave, y solo cuando su valor supere la complejidad.

No instales bibliotecas, modifiques un proyecto ni implementes antes de que el plan esté aprobado. Cuando la implementación esté autorizada, explica cualquier adición de pila o activo antes de hacerla y respeta el gestor de paquetes y el archivo de bloqueo del proyecto.

Verificar honestamente

Usa verification.md para trabajo de implementación o revisión. Inspecciona capturas de pantalla en móvil y escritorio, estados de interacción, táctil, teclado, foco, movimiento reducido, respaldos estáticos, comportamiento de carga y fallo, evidencia de rendimiento y comportamiento de limpieza en proporción al cambio.

Reporta exactamente qué se ejecutó, qué pasó, qué se inspeccionó visualmente y qué queda sin verificar. Nunca impliques que se ejecutó una compilación, prueba de navegador, verificación de accesibilidad, prueba de dispositivo o medición de rendimiento cuando no fue así.

Procedencia de la referencia

La guía es una síntesis original. Consulta sources.md para documentación autorizada e inspiración de la comunidad claramente etiquetada. No instales ni ejecutes código de habilidades de terceros a través de esta habilidad.