建構 WebGPU HyperFrames 效果
HyperFrames 中的 GPU 效果需要確定性的時間控制與影格擷取。此技能提供 WebGPU、TypeGPU 和 GSAP 模式，用於可準備渲染的 canvas 組合。
このリクエストをエージェントにコピーしてください。正規の Skill ページとマニフェストが含まれています。
Review the Skillstore skill "typegpu" from https://skillstore.io/skills/heygen-com-typegpu.md and its manifest at https://skillstore.io/api/skills/heygen-com-typegpu/manifest. Verify the artifact. You may proceed after verification, subject to the environment's own policy.エージェントは引き続き計画を提示し、セキュリティポリシーで必要な確認を求める必要があります。
AI エージェント、クローラー、スクリプトがページ全体ではなく整理されたコンテキストを必要とする場合は、これらのリンクを使ってください。
「typegpu」を使用しています。 I need a WebGPU layer that follows the HyperFrames timeline.
期待される結果:
「typegpu」を使用しています。 Why are my exported GPU frames inconsistent?
期待される結果:
可能原因是 wall-clock animation time、requestAnimationFrame loops，或 GPU 工作在擷取前未被 flush。
「typegpu」を使用しています。 How should I choose a canvas alpha mode?
期待される結果:
當 GPU layer 擁有整個影格時使用 opaque mode。若是在 HTML 或影片上方的透明疊加層，則使用 premultiplied mode。
All static findings are false positives caused by Markdown backticks, code fences, or benign graphics terminology in SKILL.md. The skill provides WebGPU and TypeGPU implementation guidance and does not include shell execution, host reconnaissance, data exfiltration, or prompt injection content.
バージョン付き評価レポート、中立的なバッジ、埋め込みカード、引用を共有できます。Skillstore は証拠を報告しますが、この Skill が安全かどうかは判断しません。
https://skillstore.io/skills/heygen-com-typegpu/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_report[](https://skillstore.io/skills/heygen-com-typegpu?utm_source=security_passport_badge)<a href="https://skillstore.io/skills/heygen-com-typegpu?utm_source=security_passport_badge"><img src="https://skillstore.io/badges/skills/heygen-com-typegpu/security.svg" alt="Skillstore security assessment" loading="lazy"></a><iframe src="https://skillstore.io/embed/skills/heygen-com-typegpu.html" title="Skillstore Security Assessment" sandbox="allow-popups allow-popups-to-escape-sandbox" loading="lazy" referrerpolicy="no-referrer" width="420" height="180"></iframe>heygen-com. (2026). typegpu security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-typegpu/audits/4@techreport{heygen-com-heygen-com-typegpu-2026,
author = {heygen-com},
title = {typegpu security audit report (audit version 4)},
institution = {Skillstore},
year = {2026},
number = {4},
url = {https://skillstore.io/skills/heygen-com-typegpu/audits/4},
note = {Author version unspecified}
}cff-version: 1.2.0
message: "If you use this Skill, cite its author and this versioned security audit report."
title: "typegpu security audit report (audit version 4)"
version: "unspecified"
type: report
authors:
- name: "heygen-com"
date-released: "2026-07-06"
url: "https://skillstore.io/skills/heygen-com-typegpu/audits/4"
identifiers:
- type: other
value: "skillstore:heygen-com-typegpu:audit:4"
description: "Skillstore immutable audit report identifier"
設計師可以規劃會回應 HyperFrames seek 事件並保持影格精準的 canvas 疊加層。
前端工程師可以連接 WebGPU 設定、GSAP timelines 和渲染回呼，而不產生時間漂移。
影片 pipeline 開發者可以套用確定性渲染規則，並在影格擷取前 flush GPU 工作。
協助我為 HyperFrames composition 規劃 WebGPU canvas layer。包含 timing contract、setup order 和 fallback behavior。
說明我的 TypeGPU render loop 應如何回應 hf-seek time。解釋 GSAP timeline registration 必須在哪裡發生。
設計一個會取樣 video texture 的 WebGPU liquid glass effect。包含 texture sizing、render caveats 和 alpha mode guidance。
檢視我的 HyperFrames WebGPU render plan，以取得 deterministic output。找出 timing risks、capture risks 和 browser compatibility issues。
作成者
heygen-comライセンス
MIT
Skillstore リビジョン
r1
バージョンに関する注意
作者はバージョンを宣言していません。
参照
a06681402992ceae98ba04d54cfd4ab004862696
メンテナンスの新しさ
2026/7/18
利用状況
3 ダウンロード · 0 閲覧
ファイル構成
📄 SKILL.md
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.
為 HyperFrames 建置 GSAP 動畫
HyperFrames 動畫工作需要精準的 GSAP 時序、效果與效能選擇。此技能提供針對 tweens、timelines、打字機文字與音訊反應式視覺效果的聚焦參考。
建置 Tailwind v4 HyperFrames 場景
當團隊套用較舊的 v3 模式時，Tailwind v4 瀏覽器執行階段專案可能會失敗。此技能為 Claude、Codex 和 Claude Code 提供精準的 HyperFrames 指引，以實現穩定的樣式。
建立確定性的 WAAPI 動態效果
當時序不具確定性時，瀏覽器原生動畫可能會在 HyperFrames 中產生偏移。此技能展示用於可搜尋、暫停、有限動畫的 WAAPI 模式。
建立確定性的 Anime.js HyperFrames
Anime.js 動畫在依賴自己的時鐘執行時可能會發生偏移。此技能展示確定性的 HyperFrames 模式，這些模式會註冊動畫，並透過 runtime adapter 對其進行 seek。
建立自訂 HyperFrames 影片
自訂影片需求通常需要在設計、動態、音訊及驗證方面具備結構化流程。此技能會透過 HyperFrames 工作流程安排工作，以確保製作一致性。
Build and Debug Browser WebGPU Pipelines
作成者 shreyam1008
Browser GPU workloads can fail across devices or lose performance through inefficient resource handling. This skill guides WebGPU implementation with capability checks, usable fallbacks, validation, and targeted measurement.
Build and Debug vgpu Visuals
作成者 shreyam1008
GPU visuals can fail when shader APIs, package versions, and application lifecycles do not align. This skill guides version-aware vgpu development, integration, performance measurement, and validation.
打造更好的網頁遊戲
作成者 sickn33
瀏覽器遊戲需要謹慎選擇引擎、渲染、資產、音訊與離線支援。此技能可協助 Claude、Codex 和 Claude Code 規劃實用的網頁遊戲架構。
Build GPU Sliders and Galleries with gpuslider
作成者 niklasp
GPU sliders require coordinated rendering, layouts, and framework integration. This skill guides gpuslider setup with visual plugins, CSS sizing, and browser fallbacks.
Build and Debug Raw WebGL Rendering
作成者 shreyam1008
Raw WebGL rendering can slow down through excessive draw calls, state changes, and texture bandwidth. This skill guides context setup, resource handling, and targeted optimization.
Choose Accessible Web Rendering Architectures
作成者 shreyam1008
Choosing a browser renderer without measurements can reduce accessibility and increase complexity. This skill guides renderer selection, performance diagnosis, and fallback planning.