typegpu
Build WebGPU HyperFrames Effects
GPU effects in HyperFrames need deterministic timing and frame capture. This skill gives WebGPU, TypeGPU, and GSAP patterns for render-ready canvas compositions.
Install with my Agent
Copy this request to your Agent. It includes the canonical Skill page and manifest.
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.Your Agent should still show its plan and request any confirmation required by the security policy.
Agent-readable resources
Use these links when an AI agent, crawler, or script needs clean context instead of reading the full page.
Test it
Using "typegpu". I need a WebGPU layer that follows the HyperFrames timeline.
Expected outcome:
- Register GSAP timelines before awaited GPU setup.
- Render only from the HyperFrames seek event time.
- Submit GPU work and wait for completion before frame capture.
Using "typegpu". Why are my exported GPU frames inconsistent?
Expected outcome:
The likely causes are wall-clock animation time, requestAnimationFrame loops, or GPU work not being flushed before capture.
Using "typegpu". How should I choose a canvas alpha mode?
Expected outcome:
Use opaque mode when the GPU layer owns the frame. Use premultiplied mode for transparent overlays above HTML or video.
Security Audit
SafeAll 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.
Risk Factors
⚙️ External commands (26)
Share & cite this report
Share the versioned assessment report, neutral badge, embed card, and citations. Skillstore reports evidence without deciding whether this Skill is safe.
Copy report link
https://skillstore.io/skills/heygen-com-typegpu/audits/4?utm_source=security_passport&utm_medium=share&utm_campaign=versioned_reportMarkdown badge
[](https://skillstore.io/skills/heygen-com-typegpu?utm_source=security_passport_badge)HTML 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>Embed card
<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>Academic citations (APA · BibTeX · CFF)
APA citation
heygen-com. (2026). typegpu security audit report (audit version 4) [Author version unspecified]. Skillstore. https://skillstore.io/skills/heygen-com-typegpu/audits/4BibTeX citation
@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}
}CITATION.cff
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"
Skillstore Score
Why this score Evidence Confidence: HighWhat You Can Build
Create GPU Motion Layers
Designers can plan canvas overlays that react to HyperFrames seek events and remain frame accurate.
Integrate WebGPU Pipelines
Frontend engineers can connect WebGPU setup, GSAP timelines, and render callbacks without timing drift.
Prepare Reliable Video Renders
Video pipeline developers can apply deterministic render rules and flush GPU work before frame capture.
Try These Prompts
Help me plan a WebGPU canvas layer for a HyperFrames composition. Include the timing contract, setup order, and fallback behavior.
Show how my TypeGPU render loop should respond to hf-seek time. Explain where GSAP timeline registration must happen.
Design a WebGPU liquid glass effect that samples a video texture. Include texture sizing, render caveats, and alpha mode guidance.
Review my HyperFrames WebGPU render plan for deterministic output. Find timing risks, capture risks, and browser compatibility issues.
Best Practices
- Register GSAP timelines before awaited WebGPU setup.
- Render from hf-seek time and avoid wall-clock animation sources.
- Flush submitted GPU work before frame capture in render mode.
Avoid
- Starting WebGPU initialization before registering timelines.
- Driving animation time with performance.now or requestAnimationFrame.
- Assuming video-backed WebGPU textures work identically in headless renderers.
Frequently Asked Questions
What does this skill help build?
Does it require WebGPU support?
Why must GSAP timelines be registered synchronously?
Can it use video as a GPU texture?
Does it generate complete shader code?
Is it useful with Claude Code and Codex?
Developer Details
Author
heygen-comLicense
MIT
Skillstore revision
r1
Version notice
The author did not declare a version.
Ref
a06681402992ceae98ba04d54cfd4ab004862696
Maintenance freshness
7/18/2026
Usage
3 downloads · 0 views
File structure
📄 SKILL.md