Habilidades hyperframes-animation

📦

hyperframes-animation

Name: hyperframes-animation
Author: heygen-com

Revisión del contenido r2 Riesgo alto ⚙️ Comandos externos🌐 Acceso a red📁 Acceso al sistema de archivos⚡ Contiene scripts🔑 Variables de entorno

Crea animaciones deterministas con HyperFrames

Es difícil mantener la consistencia determinista y la capacidad de desplazamiento temporal seguro en escenas de movimiento complejas. Esta habilidad proporciona reglas, esquemas, transiciones y adaptadores reutilizables de HyperFrames, además de auditorías de coreografía.

Compatible con: Claude Codex Code(CC)

⚠️ 38 Deficiente

Detente y solicita confirmación antes de instalar.

Revisa el plan y obtén el consentimiento explícito del usuario antes de modificar archivos.

Instalar con mi Agente

Copia esta solicitud en tu Agente. Incluye la página canónica del Skill y el manifiesto.

Solicitud de agente

Review the Skillstore skill "hyperframes-animation" from https://skillstore.io/skills/heygen-com-hyperframes-animation.md and its manifest at https://skillstore.io/api/skills/heygen-com-hyperframes-animation/manifest. Verify the artifact. Stop and obtain explicit user consent before installing or changing files.

Tu Agente debe seguir mostrando su plan y solicitar cualquier confirmación exigida por la política de seguridad.

Recursos legibles por agentes

Usa estos enlaces cuando un agente de IA, crawler o script necesite contexto limpio en vez de leer la página completa.

Detalle Markdown GET /skills/heygen-com-hyperframes-animation.md Manifest firmado GET /api/skills/heygen-com-hyperframes-animation/manifest Lockfile firmado GET /api/skills/heygen-com-hyperframes-animation/lockfile

Pruébalo

Usando "hyperframes-animation". Anima seis tarjetas de funciones para formar una vista general del producto.

Resultado esperado:

Usa el esquema grid-card-assemble. Escalona entradas breves con deslizamiento y fundido, mantén la cuadrícula ya formada y, a continuación, desplaza el foco hacia la tarjeta principal.

Usando "hyperframes-animation". Crea la entrada navegable de un dispositivo 3D.

Resultado esperado:

Usa Three.js para el dispositivo y una única línea de tiempo pausada de HyperFrames. Controla la cámara, las transformaciones del objeto y el tiempo del mezclador mediante valores deterministas de desplazamiento temporal.

Usando "hyperframes-animation". Revisa un mapa de animación con un intervalo vacío prolongado.

Resultado esperado:

El mapa muestra una zona muerta en la coreografía. Prolonga el asentamiento anterior, adelanta la siguiente entrada o añade una transición de foco intencionada.

Auditoría de seguridad

Riesgo alto

v5 • 19/7/2026 Abrir el informe versionado

Most static matches are false positives caused by animation documentation, JavaScript template literals, example URLs, and test utilities. The audit confirmed a dependency-provenance risk: environment-controlled module search paths feed a dynamic import, and the fallback bootstrap can install @latest. No prompt injection, secret collection, covert exfiltration, or screen-capture upload behavior was found. Static review was capped at 400/648 representative findings; omitted static matches are unconfirmed, so automatic publishing stays disabled until manual review.

102

Archivos escaneados

25,346

Líneas analizadas

Elementos de revisión

Falsos positivos ignorados

Preocupaciones de seguridad confirmadas (3)

Alto

scripts/package-loader.mjs:221

Environment file access

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

Alto

scripts/package-loader.mjs:226

Environment file access

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

Alto

scripts/package-loader.mjs:148-159

Unpinned fallback dependency bootstrap

When the bundled package version cannot be discovered, the loader falls back to @latest before a temporary npm install. This weakens the stated pinned-spec protection and permits an unexpected package version to execute after installation.

The code explicitly returns an @latest package spec in this fallback path, while the file comments describe pinned specifications as a security control.

Elementos de revisión de capacidades (5)

Estas son capacidades locales reales que pueden esperarse para esta habilidad, por lo que requieren revisión, pero no se cuentan como comportamiento malicioso confirmado.

Medio

scripts/package-loader.mjs:54

Dynamic import() expression

modules[packageName] = await import(pathToFileURL(entry).href);

The loader dynamically imports a module entry resolved from configured directories. A malicious package placed in a trusted-by-process module location would execute in the local Node process.

Bajo

scripts/package-loader.mjs:221

Environment variable access (bracket notation)

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

Bajo

scripts/package-loader.mjs:226

Environment variable access (dot notation)

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

Bajo

scripts/package-loader.mjs:221

Environment variable object

return (process.env[NODE_MODULES_ENV] ?? "").split(delimiter).filter(Boolean);

This environment variable controls directories searched for module resolution. Its value can influence which JavaScript module is dynamically imported.

Bajo

scripts/package-loader.mjs:226

Environment variable object

for (const entry of (process.env.PATH ?? "").split(delimiter)) {

PATH-derived node_modules directories participate in module resolution before dynamic import. A manipulated environment can redirect execution to an attacker-controlled local package.

Factores de riesgo

⚙️ Comandos externos (50)

adapters/animate-text.md:57-58 adapters/animate-text.md:58-59 adapters/animate-text.md:59-60 adapters/html-in-canvas-patterns.md:104-127 adapters/html-in-canvas-patterns.md:168-171 adapters/html-in-canvas-patterns.md:192-217 adapters/html-in-canvas-patterns.md:301-307 adapters/html-in-canvas-patterns.md:308-315 examples/brand-reveal-assemble-zoom.html:252 examples/concept-demo-decode-pan.html:18 examples/concept-demo-decode-pan.html:321 examples/cta-orbit-collapse.html:302 examples/cta-orbit-collapse.html:363 examples/cta-orbit-collapse.html:430 examples/cta-orbit-collapse.html:941 examples/cta-orbit-collapse.html:942 examples/cta-orbit-collapse.html:974 examples/cta-orbit-collapse.html:999 examples/cta-orbit-collapse.html:1017 examples/cta-orbit-collapse.html:1061 examples/cta-orbit-collapse.html:1062 examples/cta-orbit-collapse.html:1238 examples/demo-page-scroll-spotlight.html:645 examples/demo-page-scroll-spotlight.html:646 examples/hook-counter-burst.html:465 examples/hook-counter-burst.html:502 examples/messaging-multi-phrase.html:32 examples/messaging-multi-phrase.html:38 examples/messaging-multi-phrase.html:39 examples/messaging-multi-phrase.html:96 examples/problem-mockup-overwhelm.html:28 examples/problem-mockup-overwhelm.html:30 examples/problem-mockup-overwhelm.html:37 examples/problem-mockup-overwhelm.html:38 examples/proof-logo-chain.html:581 examples/takeover-ticker-displace.html:264 examples/takeover-ticker-displace.html:274 examples/workflow-approve-press.html:583 examples/workflow-approve-press.html:586 rules/3d-text-depth-layers.md:86-93 rules/3d-text-depth-layers.md:93-94 rules/3d-text-depth-layers.md:94-136 rules/3d-text-depth-layers.md:136-145 rules/3d-text-depth-layers.md:177-183 rules/3d-text-depth-layers.md:190-191 rules/ai-tracking-box.md:156-184 rules/ai-tracking-box.md:184-185 rules/ai-tracking-box.md:185-192 rules/ai-tracking-box.md:192-193 rules/ai-tracking-box.md:193-194

🌐 Acceso a red (50)

adapters/animejs.md:23 adapters/animejs.md:74 adapters/gsap.md:15 adapters/html-in-canvas-patterns.md:133 adapters/html-in-canvas-patterns.md:134 adapters/html-in-canvas-patterns.md:135 adapters/html-in-canvas-patterns.md:136 adapters/html-in-canvas-patterns.md:137 adapters/lottie.md:24 adapters/lottie.md:50 adapters/three.md:26 adapters/three.md:75 adapters/three.md:76 examples/brand-reveal-assemble-zoom.html:28 examples/comparison-split-cards.html:28 examples/concept-demo-decode-pan.html:23 examples/cta-morph-press.html:30 examples/cta-orbit-collapse.html:62 examples/demo-page-scroll-spotlight.html:28 examples/hook-counter-burst.html:34 examples/messaging-multi-phrase.html:43 examples/metric-video-text-pivot.html:34 examples/problem-mockup-overwhelm.html:48 examples/proof-logo-chain.html:29 examples/takeover-ticker-displace.html:25 examples/workflow-approve-press.html:34 rules/3d-page-scroll.md:108 rules/3d-text-depth-layers.md:78 rules/ai-tracking-box.md:137 rules/ambient-glow-bloom.md:118 rules/asr-keyword-glow.md:90 rules/avatar-cloud-network.md:148 rules/camera-cursor-tracking.md:108 rules/card-morph-anchor.md:107 rules/center-outward-expansion.md:87 rules/context-sensitive-cursor.md:85 rules/coordinate-target-zoom.md:180 rules/counting-dynamic-scale.md:108 rules/cursor-click-ripple.md:99 rules/depth-of-field-blur.md:97 rules/depth-scatter-assemble.md:98 rules/discrete-text-sequence.md:84 rules/dynamic-content-sequencing.md:113 rules/gsap-effects.md:217 rules/gsap-effects.md:19 rules/gsap-effects.md:20 rules/hacker-flip-3d.md:86 rules/kinetic-beat-slam.md:88 rules/motion-blur-streak.md:130 rules/motion-blur-streak.md:159

📁 Acceso al sistema de archivos (50)

adapters/gsap-transforms-and-perf.md:120 adapters/gsap.md:65 adapters/gsap.md:83 examples/demo-page-scroll-spotlight.html:580 examples/demo-page-scroll-spotlight.html:582 examples/demo-page-scroll-spotlight.html:584 examples/hook-counter-burst.html:357 examples/hook-counter-burst.html:366 examples/problem-mockup-overwhelm.html:959 examples/problem-mockup-overwhelm.html:975 examples/proof-logo-chain.html:465 rules/avatar-cloud-network.md:259 rules/avatar-cloud-network.md:263 rules/avatar-cloud-network.md:266 rules/cursor-click-ripple.md:169 rules/cursor-click-ripple.md:176 rules/cursor-click-ripple.md:181 rules/cursor-click-ripple.md:187 rules/cursor-click-ripple.md:193 rules/cursor-click-ripple.md:198 rules/cursor-click-ripple.md:204 rules/cursor-click-ripple.md:210 rules/cursor-click-ripple.md:215 rules/cursor-click-ripple.md:222 rules/cursor-click-ripple.md:226 rules/cursor-click-ripple.md:231 rules/dynamic-content-sequencing.md:249 rules/dynamic-content-sequencing.md:255 rules/dynamic-content-sequencing.md:261 rules/dynamic-content-sequencing.md:267 rules/dynamic-content-sequencing.md:273 rules/dynamic-content-sequencing.md:279 rules/dynamic-content-sequencing.md:285 rules/gsap-effects.md:218 rules/hacker-flip-3d.md:167 rules/hacker-flip-3d.md:171 rules/hacker-flip-3d.md:175 rules/hacker-flip-3d.md:179 rules/hacker-flip-3d.md:183 rules/kinetic-beat-slam.md:155 rules/kinetic-beat-slam.md:169 rules/kinetic-beat-slam.md:181 rules/motion-blur-streak.md:300 rules/motion-blur-streak.md:325 rules/orbit-3d-entry.md:181 rules/orbit-3d-entry.md:187 rules/orbit-3d-entry.md:193 rules/orbit-3d-entry.md:199 rules/orbit-3d-entry.md:205 rules/orbit-3d-entry.md:211

⚡ Contiene scripts (4)

rules/hacker-flip-3d.md:95 scripts/package-loader.mjs:54 scripts/package-loader.test.mjs:17 scripts/package-loader.test.mjs:30

🔑 Variables de entorno (28)

Auditado por: claude Ver historial de auditorías →

Compartir y citar este informe

Comparte el informe de evaluación versionado, la insignia neutral, la tarjeta insertable y las citas. Skillstore presenta evidencias sin decidir si este Skill es seguro.

Abrir el informe versionado

Copiar enlace del informe

https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report

Insignia Markdown

[![Skillstore security assessment](https://skillstore.io/badges/skills/heygen-com-hyperframes-animation/security.svg)](https://skillstore.io/skills/heygen-com-hyperframes-animation?utm_source=security_passport_badge)

Insignia HTML

<a href="https://skillstore.io/skills/heygen-com-hyperframes-animation?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-hyperframes-animation/security.svg" alt="Skillstore security assessment" loading="lazy"></a>

Tarjeta para insertar

<iframe src="https://skillstore.io/embed/skills/heygen-com-hyperframes-animation.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>

Citas académicas (APA · BibTeX · CFF)

Cita APA

heygen-com. (2026). hyperframes-animation security audit report (audit version 5) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5

Cita BibTeX

@techreport{heygen-com-heygen-com-hyperframes-animation-2026,
  author = {heygen-com},
  title = {hyperframes-animation security audit report (audit version 5)},
  institution = {Skillstore},
  year = {2026},
  number = {5},
  url = {https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5},
  note = {Author version unspecified}
}

CITATION.cff

cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "hyperframes-animation security audit report (audit version 5)"
version: "unspecified"
type: report
authors:
  - name: "heygen-com"
date-released: "2026-07-19"
url: "https://skillstore.io/skills/heygen-com-hyperframes-animation/audits/5"
identifiers:
  - type: other
    value: "skillstore:heygen-com-hyperframes-animation:audit:5"
    description: "Skillstore immutable audit report identifier"

Puntuación de Skillstore

Por qué esta puntuación Confianza de la evidencia: Medio

Arquitectura

Mantenibilidad

Contenido

Comunidad

Cumplimiento de la especificación

Lo que puedes crear

Componer movimiento para productos

Combina reglas atómicas y esquemas de escenas para crear una demostración determinista de un producto.

Implementar animación web

Elige un entorno de ejecución compatible y crea líneas de tiempo navegables que cumplan las restricciones de renderizado de HyperFrames.

Auditar la coreografía

Genera un mapa de animación para revisar la temporización de las interpolaciones, las zonas muertas, las colisiones y los ciclos de vida de los elementos.

Prueba estos prompts

Elegir una regla de animación

Necesito animar [element] cuando se produzca [trigger]. Recomienda dos reglas adecuadas de HyperFrames y explica la secuencia de movimiento.

Crear un esquema de escena

Crea una escena de HyperFrames de [duration] segundos para [message]. Elige un esquema, divídelo en fases y enumera las reglas utilizadas.

Adaptar un entorno de ejecución

Implementa este plan de movimiento con [GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, or TypeGPU]. Mantén el resultado determinista y con desplazamiento temporal seguro.

Auditar una composición completa

Revisa el mapa de animación de [composition]. Identifica intervalos de temporización, colisiones, escalonamientos débiles, problemas de ciclo de vida y mejoras concretas de la coreografía.

Mejores prácticas

Combina entre dos y cuatro reglas atómicas antes de elegir un esquema más amplio.
Usa una única línea de tiempo pausada y valores de disposición precalculados para conseguir un desplazamiento temporal determinista.
Fija las dependencias localmente y revisa los hallazgos del mapa de animación después de la implementación.

Evitar

No crees líneas de tiempo dentro de callbacks asíncronos ni de eventos basados en la hora del sistema.
No uses aleatoriedad sin semilla, repeticiones infinitas ni estados de eventos del usuario durante el renderizado.
No mezcles varios entornos de ejecución salvo que cada uno tenga una responsabilidad clara dentro de la escena.

Preguntas frecuentes

¿Para qué está diseñada esta habilidad?

Permite diseñar e implementar movimiento determinista para composiciones de HyperFrames.

¿Es obligatorio usar GSAP?

No. GSAP es la opción predeterminada, pero la habilidad también abarca Lottie, Three.js, Anime.js, CSS, WAAPI y TypeGPU.

¿Puede crear planes completos de escenas?

Sí. Proporciona esquemas de varias fases y ayuda a combinarlos con reglas atómicas y transiciones.

¿Qué genera el script del mapa de animación?

Genera un mapa de animación con interpolaciones muestreadas, estados de los elementos, densidad temporal, zonas muertas, escalonamientos, colisiones y resúmenes.

¿Funciona la habilidad sin acceso a la red?

La mayoría de las directrices son locales, pero muchos ejemplos usan bibliotecas CDN. El script de auditoría también puede inicializar un paquete que falte.

¿Sustituye las directrices básicas de HyperFrames?

No. Depende del contrato básico de composición de HyperFrames y añade patrones específicos de animación.