スキル hyperframes-animation

📦

hyperframes-animation

Name: hyperframes-animation
Author: heygen-com

コンテンツリビジョン r2 高リスク ⚙️ 外部コマンド🌐 ネットワークアクセス📁 ファイルシステムへのアクセス⚡ スクリプトを含む🔑 環境変数

決定論的なHyperFramesアニメーションを構築

複雑なモーションシーンでは、決定論的かつシークセーフな動作を維持することが困難です。このスキルは、再利用可能なHyperFramesのルール、ブループリント、トランジション、アダプター、振付監査機能を提供します。

対応: Claude Codex Code(CC)

⚠️ 38 不十分

インストール前に停止して確認を求めてください。

計画を確認し、ファイルを変更する前にユーザーの明示的な同意を得てください。

自分のエージェントでインストール

このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。

エージェントリクエスト

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.

エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。

エージェントが読めるリソース

AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。

Markdown詳細 GET /skills/heygen-com-hyperframes-animation.md 署名済み manifest GET /api/skills/heygen-com-hyperframes-animation/manifest 署名済み lockfile GET /api/skills/heygen-com-hyperframes-animation/lockfile

テストする

「hyperframes-animation」を使用しています。 6枚の機能カードを製品概要へとアニメーションさせてください。

期待される結果:

grid-card-assembleブループリントを使用します。短いスライドとフェードの登場をスタッガーさせ、完成したグリッドを維持した後、主要カードにフォーカスを移すトランジションを実行します。

「hyperframes-animation」を使用しています。シーク可能な3Dデバイスの登場演出を作成してください。

期待される結果:

デバイスにはThree.jsを使用し、一時停止状態の単一のHyperFramesタイムラインを使用します。決定論的なシーク値から、カメラ、オブジェクトのトランスフォーム、ミキサー時間を制御します。

「hyperframes-animation」を使用しています。長い空白区間を含むアニメーションマップをレビューしてください。

期待される結果:

このマップには振付上のデッドゾーンがあります。直前の静止状態を延長する、次の登場を早める、または意図の明確なフォーカストランジションを追加してください。

セキュリティ監査

高リスク

v5 • 2026/7/19 バージョン別レポートを開く

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

スキャンされたファイル

25,346

解析済み行数

レビュー項目

誤検知を無視

確認済みのセキュリティ上の懸念 (3)

高

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.

高

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.

高

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.

機能レビュー項目 (5)

これらは、このスキルに期待される可能性のある実際のローカル機能であるため、レビューが必要ですが、確認済みの悪意ある動作としてはカウントされません。

中

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.

低

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.

低

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.

低

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.

低

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.

リスク要因

⚙️ 外部コマンド (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

🌐 ネットワークアクセス (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

📁 ファイルシステムへのアクセス (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

⚡ スクリプトを含む (4)

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

🔑 環境変数 (28)

監査者: claude 監査履歴を表示 →

このレポートを共有・引用

バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。

バージョン別レポートを開く

レポートリンクをコピー

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

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)

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>

埋め込みカード

<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>

学術引用 (APA · BibTeX · CFF)

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

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"

Skillstore スコア

このスコアの理由証拠の信頼度: 中

アーキテクチャ

保守性

コンテンツ

コミュニティ

仕様準拠

作成できるもの

製品モーションを構成

基本単位となるルールとシーンのブループリントを組み合わせ、決定論的な製品デモを構築します。

Webアニメーションを実装

サポート対象のランタイムを選択し、HyperFramesのレンダリング制約に適合するシーク可能なタイムラインを構築します。

振付を監査

アニメーションマップを生成し、トゥイーンのタイミング、デッドゾーン、衝突、要素のライフサイクルをレビューします。

これらのプロンプトを試す

アニメーションルールを選択

[trigger]が発生したときに[element]をアニメーションさせる必要があります。適切なHyperFramesルールを2つ推奨し、モーションシーケンスを説明してください。

シーンのブループリントを構築

[message]向けに[duration]秒のHyperFramesシーンを作成してください。ブループリントを選択してフェーズに分割し、使用するルールを一覧にしてください。

ランタイムに適応

[GSAP, Lottie, Three.js, Anime.js, CSS, WAAPI, or TypeGPU]を使用して、このモーション計画を実装してください。結果が決定論的かつシークセーフになるようにしてください。

コンポジション全体を監査

[composition]のアニメーションマップをレビューしてください。タイミングの空白、衝突、不十分なスタッガー、ライフサイクルの問題を特定し、振付を改善する具体的な方法を提示してください。

ベストプラクティス

より大きなブループリントを選択する前に、2～4個の基本単位となるルールを組み合わせてください。
決定論的なシークのために、一時停止状態の単一のタイムラインと事前計算済みのレイアウト値を使用してください。
依存関係をローカルに固定し、実装後にアニメーションマップの検出結果をレビューしてください。

回避

非同期コールバックや実時間ベースのイベント内でタイムラインを構築しないでください。
レンダリング中に、シードなしのランダム処理、無限リピート、ユーザーイベントの状態を使用しないでください。
各ランタイムがシーン内で明確な役割を持つ場合を除き、複数のランタイムを混在させないでください。

よくある質問

このスキルは何のために設計されていますか？

HyperFramesコンポジション向けの決定論的なモーションデザインと実装をサポートします。

GSAPは必須ですか？

いいえ。デフォルトはGSAPですが、このスキルはLottie、Three.js、Anime.js、CSS、WAAPI、TypeGPUにも対応しています。

完全なシーン計画を作成できますか？

はい。複数フェーズのブループリントを提供し、それらを基本単位となるルールやトランジションと組み合わせるための支援を行います。

アニメーションマップスクリプトは何を生成しますか？

サンプリングされたトゥイーン、要素の状態、タイミング密度、デッドゾーン、スタッガー、衝突、要約を含むアニメーションマップを作成します。

このスキルはネットワークアクセスなしで動作しますか？

ガイダンスの大部分はローカルで利用できますが、多くの例ではCDNライブラリを使用します。また、監査スクリプトが不足しているパッケージを初期セットアップする場合もあります。

HyperFramesのコアガイダンスを置き換えるものですか？

いいえ。このスキルはHyperFramesのコアコンポジションコントラクトに依存し、アニメーション固有のパターンを追加します。

開発者情報

作成者

heygen-com

ライセンス

MIT

Skillstore リビジョン

バージョンに関する注意

作者はバージョンを宣言していません。

リポジトリ

https://github.com/heygen-com/hyperframes/tree/main/skills/hyperframes-animation/

参照

77d0e66fbadeb1f5d1e6a5aada7861240b8ed2d7

メンテナンスの新しさ

2026/7/19

利用状況

7 ダウンロード · 0 閲覧

ファイル構成

📁 adapters/

📄 animate-text.md

📄 animejs.md

📄 css-animations.md

📄 gsap-easing-and-stagger.md

📄 gsap-timeline-and-labels.md

📄 gsap-transforms-and-perf.md

📄 gsap.md

📄 html-in-canvas-patterns.md

📄 lottie.md

📄 three.md

📄 typegpu.md

📄 waapi.md

📁 blueprints/

📄 comparison-split.md

📄 constellation-hub.md

📄 cta-morph-press.md

📄 cursor-ui-demo.md

📄 dataviz-countup.md

📄 device-surface-showcase.md

📄 grid-card-assemble.md

📄 kinetic-type-beats.md

📄 logo-assemble-lockup.md

📄 overwhelm-surround.md

📄 spatial-pan-stations.md

📄 ticker-takeover.md

📄 titlecard-reveal.md

📄 typewriter-reveal.md

📄 video-text-pivot.md

📄 blueprints-index.md

📁 examples/

📄 brand-reveal-assemble-zoom.html

📄 comparison-split-cards.html

📄 concept-demo-decode-pan.html

📄 cta-morph-press.html

📄 cta-orbit-collapse.html

📄 demo-page-scroll-spotlight.html

📄 hook-counter-burst.html

📄 messaging-multi-phrase.html

📄 metric-video-text-pivot.html

📄 problem-mockup-overwhelm.html

📄 proof-logo-chain.html

📄 takeover-ticker-displace.html

📄 workflow-approve-press.html

📁 rules/

📄 3d-page-scroll.md

📄 3d-text-depth-layers.md

📄 ai-tracking-box.md

📄 ambient-glow-bloom.md

📄 asr-keyword-glow.md

📄 avatar-cloud-network.md

📄 camera-cursor-tracking.md

📄 card-morph-anchor.md

📄 center-outward-expansion.md

📄 context-sensitive-cursor.md

📄 coordinate-target-zoom.md

📄 counting-dynamic-scale.md

📄 css-marker-patterns.md

📄 cursor-click-ripple.md

📄 depth-of-field-blur.md

📄 depth-scatter-assemble.md

📄 discrete-text-sequence.md

📄 dynamic-content-sequencing.md

📄 gsap-effects.md

📄 hacker-flip-3d.md

📄 kinetic-beat-slam.md

📄 motion-blur-streak.md

📄 multi-phase-camera.md

📄 orbit-3d-entry.md

📄 physics-press-reaction.md

📄 press-release-spring.md

📄 reactive-displacement.md

📄 scale-swap-transition.md

📄 sine-wave-loop.md

📄 split-tilt-cards.md

📄 spring-pop-entrance.md

📄 stat-bars-and-fills.md

📄 svg-icon-enrichment.md

📄 svg-path-draw.md

📄 vertical-spring-ticker.md

📄 viewport-change.md

📄 rules-index.md

📁 scripts/

📄 animation-map-sampling.mjs

📄 animation-map-sampling.test.mjs

📄 animation-map.mjs

📄 animation-map.test.mjs

📄 package-loader.mjs

📄 package-loader.test.mjs

📄 SKILL.md

📄 techniques.md

📁 transitions/

📄 catalog.md

📄 css-3d.md

📄 css-blur.md

📄 css-cover.md

📄 css-destruction.md

📄 css-dissolve.md

📄 css-distortion.md

📄 css-grid.md

📄 css-light.md

📄 css-mechanical.md

📄 css-other.md

📄 css-push.md

📄 css-radial.md

📄 css-scale.md

📄 overview.md

📄 TRANSITION-REGISTRY.md

heygen-com のその他のスキル

すべて表示

📦

hyperframes-audio

Mix HyperFrames Audio with Precision

Audio tracks can compete for frequencies, levels, and space, making voiceovers difficult to understand. This skill applies focused effects, automation, presets, and voiceover carving for clearer HyperFrames mixes.

デザイン＆クリエイティブ表示

📦

gsap

HyperFrames向けGSAPアニメーションの構築

HyperFramesのアニメーション作業には、正確なGSAPのタイミング、エフェクト、パフォーマンス上の選択が必要です。このスキルは、トゥイーン、タイムライン、タイプライターテキスト、オーディオ反応型ビジュアルに関する重点的なリファレンスを提供します。

コーディング＆開発表示

📦

tailwind

Tailwind v4 HyperFrames シーンの構築

Tailwind v4 browser-runtime プロジェクトでは、チームが古い v3 パターンを適用すると失敗することがあります。このスキルは Claude、Codex、Claude Code に、安定したスタイリングのための正確な HyperFrames ガイダンスを提供します。

コーディング＆開発表示

📦

waapi

決定論的な WAAPI モーションを作成する

タイミングが決定論的でない場合、ネイティブブラウザーアニメーションは HyperFrames でずれることがあります。このスキルでは、シーク可能で一時停止された有限のアニメーション向けの WAAPI パターンを示します。

コーディング＆開発表示

📦

animejs

決定論的な Anime.js HyperFrames を作成する

Anime.js のアニメーションは、独自のクロックで実行されるとずれが生じることがあります。このスキルでは、アニメーションを登録し、ランタイムアダプターを通じてシークする決定論的な HyperFrames パターンを示します。

コーディング＆開発表示

📦

general-video

カスタム HyperFrames 動画を作成

カスタム動画の依頼では、デザイン、モーション、音声、検証にまたがる構成が必要になることがよくあります。このスキルは、一貫した制作のために HyperFrames ワークフローを通じて作業を進めます。

デザイン＆クリエイティブ表示

すべて表示

📦

brag

Create a Polished Launch Video

作成者 latent-spaces

Turning a project into a concise launch video requires product analysis, scripting, animation, audio, and rendering. Brag coordinates that workflow with Hyperframes and delivers a video, poster, storyboard, and share copy.

デザイン＆クリエイティブ表示

📦