Skill: vision-to-motion

Prompt

# BRIEF DE ARQUITECTURA DE SKILL: `vision-to-motion` ## 1. Propósito central y casos de uso Necesitamos diseñar e implementar una nueva **skill** denominada `vision-to-motion`. El objetivo fundamental de esta skill es: **Tomar cualquier referencia adjuntada por el usuario en video o imágen (animaciones, capturas de pantalla, prototipos de UI/UX, motion graphics o cinemáticas) y traducirla a código interactivo ejecutable con fidelidad estricta 1:1.** **Es muy importante la atención atómica al detalle**. Cada elemento, interacción y animación observada en la referencia target es decisiva para la experiencia completa, una reconstrucción a medias constituye una entrega inválida. La skill debe ser completamente agnóstica al contenido: **debe funcionar con la misma solvencia para diferentes casos de uso**. ### Casos de Uso Representativos (la skill no se limita solo a estos casos) - **Microinteracciones y estados de componentes:** Animaciones de botones con transformación morfológica (*morphing*), loaders orgánicos, transiciones de éxito/error o micro-recompensas gamificadas. - **Transiciones de pantalla con elementos compartidos (*Shared Element Transitions*):** Vistas donde una tarjeta pequeña se expande fluidamente a pantalla completa reacomodando tipografía, imágenes y controles sin saltos visuales. - **Scrollytelling y narrativa visual:** Páginas orquestadas por scroll donde elementos vectoriales, textos y capas de fondo se ensamblan, rotan o transforman conforme el usuario avanza verticalmente. - **Visualización dinámica de datos y analítica:** Gráficas financieras o dashboards con trazado vectorial animado, barras con aceleración perceptual y tooltips con inercia reactiva. - **Físicas y dinámicas de interacción (2D / Canvas):** Comportamientos de arrastre elástico (*drag-and-drop* con tensión), gravedad, sistemas de partículas o colisiones interactivas controladas por el cursor. - **Showcases y visores de producto 3D (WebGL / Three.js):** Cámaras orbitales de 360°, despieces técnicos de producto (*exploded views*) o transiciones de cámara en perspectiva entre estados de visualización. - **Onboardings y carruseles cinemáticos móviles:** Secuencias de bienvenida con ilustraciones multicapa en paralaje, transiciones swipe y paginadores fluidos. - **Sistemas de navegación y menús no convencionales:** Menús radiales, docks cinéticos tipo macOS con magnificación, acordeones espaciales o barras flotantes con desenfoque de fondo. - **Tipografía cinética y efectos de texto:** Animaciones de fuentes variables (*variable fonts*), máscaras dinámicas de revelado de texto, tipografía tridimensional o cinemática editorial interactiva. - **Mecánicas lúdicas y minijuegos en navegador:** Loops interactivos en 2D (ruletas de premios, dinámicas de equilibrio, interfaces tipo máquina tragamonedas o mini-puzzles en Canvas). - **Interfaces diegéticas y HUDs de ciencia ficción (FUI):** Pantallas holográficas, escáneres biométricos, efectos de distorsión CRT o consolas de monitoreo táctico. --- ## 2. El Problema a Resolver Cuando un Agente de IA intenta recrear código a partir de video, enfrenta tres retos estructurales que este skill debe resolver: 1. **Resolución Temporal y Comprensión Cinética Completa:** * La ingestión multimodal estándar suele muestrear a tasas muy bajas (ej. 1 FPS), omitiendo eventos que ocurren en fracciones de segundo (cortes rápidos, aceleraciones, microinteracciones). * El skill debe garantizar que el agente no "adivine" ni opere con fotogramas aislados, sino que perciba y deconstruya la continuidad temporal completa de la acción. 2. **Deconstrucción de Capas y Naturaleza de los Elementos:** * En un video, toda la información visual viene aplanada y degradada por códecs de compresión. * El skill debe orientar al agente a discernir qué elementos deben programarse nativamente en código vectorial (HTML, SVG, CSS, Canvas) para mantener nitidez matemática, y qué elementos deben tratarse como texturas plásticas o arte rasterizado el cual debe ser re-generado con sus propias herramientas generativas de imagen. 3. **Fidelidad Interactiva Dual:** * El código entregado no debe ser una simple captura pasiva ni un bucle estático. * Debe cumplir una doble función: reproducir con precisión milimétrica la coreografía y tiempos observados en la referencia original, pero al mismo tiempo quedar vivo, funcional y manipulable para el usuario final (scroll, clics, respuestas reactivas). --- ## 3. Tu Encargo como Agente Arquitecto Se requiere que **propongas y diseñes una arquitectura de Skill totalmente de tu autoría** para `vision-to-motion`, optimizada para ejecutarse dentro de Agentes de IA con las capacidades necesarias. Debes también establecer los requisitos mínimos de multimodalidad para que la skill funcione. Tu propuesta debe incluir: 1. **Metadatos y Frontmatter (`SKILL.md`):** * Nombre (`vision-to-motion`) y una descripción de activación en tercera persona altamente precisa (cuándo y por qué debe despertarse este skill). 2. **Filosofía y Principios Rectores:** * Criterios no negociables de calidad, fidelidad y salvaguardas estrictas para evitar alucinaciones visuales o suposiciones sobre el movimiento. 3. **Estructura Modular del Paquete:** * Organización de directorios (`SKILL.md` y subcarpetas), justificando el rol y valor de cada componente o flujo. 4. **Fases de Operación Macro:** * La secuencia lógica de etapas por las que debe transitar el agente desde que el usuario entrega el archivo de referencia hasta que el código queda funcionando y verificado en el entorno local. 5. **Criterios de Verificación y Auditoría:** * Mecanismo mediante el cual el agente valida empíricamente que la réplica en código es idéntica a la fuente antes de dar la tarea por concluida. Presenta tu propuesta técnica estructurada de forma modular, concisa y rigurosa.