courtneymgabrus-star/Video

Instalación del plugin: Antes de los comandos de configuración o actualización, sigue las reglas de ejecución del plugin cuando esta habilidad esté dentro de un plugin de HyperFrames. Las instalaciones independientes mantienen las instrucciones de actualización a continuación.

Primero, mantén esta habilidad actualizada — confirma con el usuario antes de ejecutar: npx hyperframes skills update figma. Una operación rápida sin cambios cuando todo está actualizado; de lo contrario, actualiza esta habilidad junto con las habilidades principales del dominio de las que depende antes de que confíes en ellas.

Figma → HyperFrames

Trae el trabajo del usuario en Figma a una composición. Dividido por capacidad (§2 de la especificación de diseño):

Fase	Qué	Transporte	Superficie
1	Activos estáticos	REST	hyperframes figma asset
2	Tokens/estilos de marca	REST	hyperframes figma tokens
3	Componentes → HTML	REST	hyperframes figma component
4	Movimiento → GSAP	conector cuando esté disponible	usa su contexto de movimiento
5	Shaders	conector / exportación manual	úsalo o una exportación nativa

REST se usa donde sea posible (utilizable a gran escala, sin interfaz gráfica). Un conector Figma compatible es opcional para datos de movimiento y shaders; sin uno, solicita una exportación nativa. Cada ruta congela los activos localmente para que los renders sean deterministas. Las reconstrucciones de storyboard componen exportaciones de activos de la Fase 1 (REST) con ensamblaje de línea de tiempo impulsado por el agente — no se necesita conector. Los activos congelados existentes, registros de manifiesto y enlaces no se ven afectados por cambios de ruta — la división solo cambia qué credencial utiliza la siguiente importación.

Autenticación — dos credenciales, con alcance

Verificación previa — antes de la primera llamada CLI, verifica que exista un token: shell env ([ -n "$FIGMA_TOKEN" ]) o el .env del proyecto (la CLI lo carga automáticamente — una entrada en .env cuenta como configurado). Si no hay ninguno, NO ejecutes el comando para capturar el error — guía al usuario a través de la configuración única primero, luego detente y espera:

1. figma.com/settings → Seguridad → Tokens de acceso personal → Generar nuevo token.
2. Alcances — solo lectura es todo lo que esta integración necesita (nunca escribe en Figma): Contenido del archivo: Solo lectura + Metadatos del archivo: Solo lectura. Añade Contenido de la biblioteca: Solo lectura si ejecutarás tokens en un plan que no sea Enterprise — el respaldo de estilos publicados llama a /v1/files/:key/styles, que da 403 sin este alcance (un alcance que la configuración anterior omitía). Opcionalmente Variables: Solo lectura para variables de marca — solo para Enterprise; sin él, tokens degrada automáticamente a estilos publicados (esperado, no es un error — dilo). Un 403 ahora nombra el alcance exacto que falta; los 429 se reintentan automáticamente (límite por minuto, respeta Retry-After).
3. Pide al usuario que configure FIGMA_TOKEN en su perfil de shell o .env del proyecto; nunca le pidas que pegue el token en la conversación.

Durante la incorporación, también establece expectativas de una vez: cada importación aterriza como un archivo local congelado con procedencia registrada — los renders nunca llaman a Figma, volver a ejecutar un comando reimporta solo lo que cambió en Figma, y un token funciona para activos, tokens de marca y componentes en todos los archivos que la cuenta de Figma del usuario pueda ver.

• Fases 4–5 (movimiento/shaders): un conector Figma compatible, con autorización separada del token. Si no está disponible o no está autenticado, pide al usuario que lo conecte o proporcione una exportación nativa, luego detente.
• Di exactamente qué credencial necesita una fase que falla — nunca presentes la división como rota.
• BAD_TOKEN (401) en medio del flujo → el token ha caducado o sido revocado; regenera. FORBIDDEN (403) → el mensaje nombra el alcance exacto que falta (ej. library_content:read para el respaldo de estilos) — agrégalo, o el archivo no es visible para la cuenta. REQUIRES_ENTERPRISE (403 en variables) → no es un fallo: el respaldo de estilos ya se ejecutó. RATE_LIMITED (429) → el cliente ya reintentó con retroceso (esto aplica a TODA lectura — activos, tokens, estilos, árboles de nodos, versiones — el reintento vive en la ruta de solicitud compartida; Retry-After se respeta, limitado a 60s); si aún aparece, espera un minuto o importa menos nodos por llamada.

Conciencia de límite de velocidad (§2.1 de especificación): las cuotas del conector varían según el plan de Figma — agrupa solicitudes de fotogramas principales, omite capturas de pantalla de verificación a menos que se soliciten, y almacena en caché las respuestas sin procesar para que la rederivación nunca gaste una segunda llamada. REST es por minuto (10+/min, depósitos por punto final) — bien a gran escala, retrocede en 429.

Enrutamiento

Analiza el enlace de Figma del usuario con parseFigmaRef (URL, fileKey:nodeId, fileKey simple). Luego, según la intención:

• "usa esta capa / logo / imagen" → Activo (CLI)
• "trae mi marca / colores / tokens" → Tokens (CLI)
• "construye una escena desde este fotograma" → Componente (CLI)
• "importa esta animación / movimiento" → Movimiento (conector cuando esté disponible, más abajo)
• una sección de storyboard / tira de fotogramas de escena → Storyboard (más abajo)
• relleno/efecto de shader → Shaders (más abajo)

Narra cada paso para el usuario — antes de cada comando, di qué vas a extraer de Figma; después, di dónde aterrizó el artefacto (la ruta congelada / sidecar / directorio de componentes), qué cambió en la composición y la siguiente acción inmediata (vista previa, añadir variables impresas, reimportar para enlazar bindings). El usuario nunca debe tener que preguntar "¿funcionó?" o "¿y ahora qué?".

Activos (Fase 1 — CLI)

hyperframes figma asset '<url-o-fileKey:nodeId>' [más refs…] [--format svg|png|jpg|pdf] [--scale 2] [--description "..."] [--entity "..."]

Renderiza sobre REST, sanitiza SVG, congela bajo .media/images/, añade al manifiesto con procedencia, regenera .media/index.md (el inventario de uso de medios compartido), imprime un fragmento <img>. Idempotente por fileKey:nodeId:format:scale:version. Prefiere SVG para vectores/logos (escalable, animable), PNG --scale 2 para fidelidad de mapa de bits. Siempre pasa --description "<qué es>" (se convierte en la fila del índice + <img alt>); añade --entity "<nombre>" para marcas de marca nombradas para que resolve --entity de medios las encuentre después (los aciertos de entidad coinciden en imagen/icono).

Procesa muchos nodos en UNA solicitud — pasa varias referencias (separadas por espacios o comas) del MISMO archivo: hyperframes figma asset 'KEY:1-2' 'KEY:3-4' 'KEY:5-6'. Todas se renderizan en una sola llamada /v1/images, que es la respuesta de Figma al límite de velocidad por minuto — prefierela sobre N comandos separados cuando se extrae un conjunto completo de activos de un fotograma. --description/--entity aplican a cada nodo en el lote, así que agrupa nodos que compartan un propósito. Los 429 también se reintentan automáticamente con retroceso.

Tokens (Fase 2 — CLI)

hyperframes figma tokens <fileKey>

Importa variables como entradas de variable de marca de composición + archivo sidecar figma-tokens.json + registros de índice de enlace (.media/figma-bindings.jsonl). Las variables están restringidas a Enterprise en el origen: en otros planes, el comando degrada a metadatos de estilos publicados (los valores se resuelven en el momento de la importación del componente). Añade las entradas impresas al data-composition-variables de la composición.

Importa tokens antes que componentes cuando se deseen ambos — eso permite que los colores de los componentes se vinculen a variables de marca en lugar de duplicados horneados.

Ruta de variables no Enterprise (probada en campo): Las variables REST están restringidas a Enterprise, pero un conector compatible puede proporcionar definiciones de variables. Cuando tokens reporta REQUIRES_ENTERPRISE y el conector está disponible, recupera las variables de la escena principal una vez, almacena en caché la respuesta sin procesar en .media/figma-cache/ y úsala para construir el índice de enlace. El árbol de nodos REST boundVariables proporciona VariableID por propiedad; únelos por nodo y propiedad, luego escribe filas .media/figma-bindings.jsonl ({kind:"binding", figmaId, sourceFileKey, compositionVariableId: "figma:<nombre>", version}) más las entradas de variable de composición. Todo lo que sigue (resolución var() de componentes, actualización, variables CSS en tiempo de ejecución) es la maquinaria enviada. Etiquétalo para el usuario: "tokens a través del conector Figma — los planes Enterprise obtienen esto de hyperframes figma tokens directamente."

El tiempo de ejecución define cada variable de composición declarada como una propiedad personalizada CSS (raíz del documento + hosts de subcomposición), así que importar var(--slug, literal) llena el recolor cuando el valor predeterminado de la variable cambia — actualizar un valor en data-composition-variables renombra cada componente importado sin reimportar nada. hyperframes render --variables '<json>' las anula en tiempo de renderizado.

Componentes (Fase 3 — CLI)

hyperframes figma component '<url-o-fileKey:nodeId>'

Árbol de nodos → HTML editable con geometría exacta de Figma, empaquetado como un elemento de registro bajo compositions/components/<nombre>/. Vectores/operaciones booleanas se rasterizan automáticamente mediante exportación de Fase 1. Pase de enlace (§7.1 de especificación, solo ID exacto — nunca coincidencia de valores):

• Autoverificación de fidelidad estática (obligatorio para contenido principal): después de importar, renderiza el fragmento y compáralo con los píxeles propios de Figma — figma asset <mismo nodo> --format png es la verdad fundamental. El texto es el eje de deriva conocido: un cuadro de texto de Figma más corto que su altura de línea tiene límites recortados verticalmente (el mapeador emite text-box-trim para estos; la deriva medida sin él era de ~6px en una fuente de 70px). Si la comparación muestra una deriva que el mapeador no cubre, repórtala — no ajustes el fragmento manualmente en silencio.
• Relleno vinculado a un token importado → var(--slug, #literal) — la actualización de marca se propaga.
• Vinculado a un token desconocido → literal + bandera data-figma-unresolved. El comando te lo dice; ofrece al usuario: ejecuta tokens en el archivo fuente (o biblioteca), luego reimporta el componente para vincularlos. Pregunta una vez por biblioteca desconocida qué archivo es — nunca adivines, nunca coincidas por hexadecimal.

Movimiento (Fase 4 — asistido por conector)

Baliza de uso: Las fases asistidas por conector no tienen punto de contacto CLI, así que dispara la baliza de habilidad al inicio y al final (anónimo, con consentimiento, nunca falla): npx hyperframes events --skill=figma-motion al comenzar, npx hyperframes events --skill=figma-motion --event=skill_completed --outcome=success|error al terminar. Lo mismo para shaders (figma-shaders) y storyboards (figma-storyboard).

No existe equivalente REST. Cuando haya un conector compatible disponible, úsalo y entrega su salida a los helpers puros en @hyperframes/core/figma; de lo contrario, solicita una exportación nativa:

1. Recupera el contexto de movimiento para el fotograma principal en una solicitud recursiva, no una solicitud por elemento. Guarda el JSON sin procesar junto al proyecto (.media/figma-cache/) para que la retraducción sea gratuita.
2. Normaliza en MotionDocs con motionContextToDocs(rawResponse, { selectorFor, repeat }) de @hyperframes/core/figma — nunca transcribas números de fotogramas clave manualmente. El helper codifica las reglas de decodificación probadas en campo mecánicamente: analiza los fragmentos de motion.dev (la codificación confiable — los fragmentos CSS estiran las duraciones y pueden discrepar; se ignoran), elimina los fotogramas clave de cola de bucle (segmentos de menos de un milisegundo en tiempos ≈0.9999→1 son el reinicio instantáneo del bucle, no movimiento creado — el bucle se realiza mediante repeat reinicio), y preserva los eases bezier textualmente. selectorFor debe devolver los ID de la importación del componente de Fase 3 — no derives selectores de nombres de nodos. 2b. Valida contra la verdad fundamental antes de darlo por terminado — obligatorio: exporta el fotograma raíz del cohorte a través del conector disponible y ejecuta node <SKILL_DIR>/scripts/verify-motion.mjs --reference <export.mp4> --render <render.mp4> --crop WxH+X+Y — compara deltas de energía de movimiento (la fidelidad de importación estática se cancela) y falla por debajo de 15 dB de PSNR mínimo de movimiento (calibrado: fiel ≈ 20+, divergente ≈ 5). Mide --crop desde los bordes reales de la tarjeta del render, no adivines. FALLO significa revisar la traducción, no el umbral.
3. motionToGsap(doc) → emitTimelineScript(spec) → inyecta como una etiqueta <script> después de las etiquetas CDN de GSAP + CustomEase. En pausa, finito, registrado en window.__timelines con una clave literal.
4. Pista no traducible (impulsada por shader, propiedad no soportada, máscaras complejas) → exporta a través del conector, congela el MP4, luego intégralo como <video class="clip">. Excepción: pistas impulsadas por shader — la ruta de exportación de Figma aplana los shaders al color base (ver Shaders más abajo), así que un horneado allí pierde silenciosamente el shader; pide al usuario una exportación nativa de Figma en su lugar. Siempre di qué ruta usaste y por qué. Los eases nombrados fuera del conjunto mapeado retroceden a lineal — la tabla de mapeo vive en motionEase.ts; señala el retroceso al usuario cuando ocurra.
5. Ejecuta npx hyperframes check antes de darlo por terminado.

Shaders (Fase 5 — mayormente manual)

La ruta de renderizado del conector de Figma no ejecuta shaders (se aplastan al color base), y el código fuente del shader solo es accesible para estilos publicados en biblioteca (suscripción Full completa). Ruta predeterminada: pide al usuario que exporte el fotograma del shader de forma nativa en Figma (PNG o MP4 de movimiento), luego impórtalo como un activo/clip de Fase 1. No intentes la captura de píxeles del conector de un shader — producirá silenciosamente algo incorrecto.

Storyboards (una SECCIÓN de fotogramas de escena → animación)

La regla cardinal: los fotogramas de storyboard son FOTOGRAMAS CLAVE, no diapositivas. Dos fotogramas que contienen el mismo elemento describen el estado de ese elemento a través del tiempo — anima el ELEMENTO entre los estados; nunca reproduzcas los fotogramas como una secuencia de imágenes fijas. Un logo dibujado en cuatro fotogramas consecutivos con y descendente es UN elemento ascendiendo a través de cuatro fotogramas clave. Reproducir fotogramas de storyboard uno tras otro es el modo de fallo; reconstruir las líneas de tiempo de los elementos que implican es el trabajo.

Los archivos de storyboard siguen una gramática que puedes analizar mecánicamente — no mires a ojo, decodifica:

1. Unidades de escena: dentro de la SECCIÓN, cada nodo del tamaño de un fotograma es una escena — tanto FRAMEs nombrados como RECTÁNGULOS de fotograma completo sueltos (los diseñadores pegan imágenes fijas directamente en la sección). Filtra por tamaño (≈ relación de aspecto de la composición, ej. >1400×900), no por tipo de nodo o nombre.
2. Orden = posición x (por filas si la tira se envuelve). Ordena las escenas por absoluteBoundingBox.x.
3. Diferencia adyacente — todo lo que no es idéntico en el siguiente fotograma es un cambio animado. La presencia de un elemento determina su opacidad, su posición su transformación, su tamaño su escala. La interpolación es lineal por defecto, a menos que un conector proporcione curvas de ease — entonces úsalas.
4. Montaje de salida: después de reconstruir las líneas de tiempo, ensambla como un archivo de composición de HyperFrames con un solo componente por elemento animado. Marca el storyboard como completado.

Referencia — estructura del manifiesto (.media/index.md + figma-bindings.jsonl)

Después de cada comando de importación, el manifiesto de medios y el archivo de enlaces se actualizan automáticamente. .media/index.md contiene una tabla de todos los activos importados con procedencia. .media/figma-bindings.jsonl contiene líneas JSON con {kind:"binding", figmaId, sourceFileKey, compositionVariableId, version} para enlaces de tokens de componentes.

(Final) Controles del agente antes de terminar

1. Ejecuta npx hyperframes check — fallos en lint/validación bloquean la entrega.
2. El manifiesto de medios (.media/index.md) debe existir y tener al menos una fila.
3. Si se importaron tokens/componentes, los archivos de enlace deben ser válidos.
4. Previsualiza en el navegador del usuario: npx hyperframes preview y confirma que el resultado se vea bien antes de declarar éxito.
5. Balizas de evento: dispara npx hyperframes events --skill=figma-<fase> --event=skill_completed --outcome=success|error para movimiento, shaders y storyboards.

---

Fin de la habilidad Figma→HyperFrames.