From 425b077a1711cbe9cd7b2d43f86d05e484c6f4fe Mon Sep 17 00:00:00 2001
From: ukimsanov <ular.kimsanov@heygen.com>
Date: Wed, 20 May 2026 14:27:12 -0700
Subject: [PATCH] fix(skill): audit-found bugs in hyperframes core examples
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Three concrete bugs found while auditing PR #991:

1. html-in-canvas-patterns.md (#1 in catalog, 3D Rotation with Bloom):
   The code example used `new THREE.EffectComposer(renderer)` UMD-style
   namespace access while the ESM imports right below pull them in as
   bare named imports. Three.js r150+ removed the UMD `examples/js/`
   globals, so as written the example throws `TypeError:
   THREE.EffectComposer is not a constructor`. Switched to the bare
   names matching the imports. THREE.Vector2 stays as-is — Vector2 is
   on the THREE namespace.

2. techniques.md (#5, Lottie Animation): The CDN path
   `@lottiefiles/dotlottie-web/dist/dotlottie-player.js` returns 404.
   `@lottiefiles/dotlottie-web` is the JavaScript SDK, not a web
   component — its `main` is `dist/index.cjs`. The web-component
   package is `@lottiefiles/dotlottie-wc` and the custom element is
   `<dotlottie-wc>`, not `<dotlottie-player>`. Updated both.

3. techniques.md (5 occurrences across Lottie / lottie-web /
   Video / @font-face examples): asset paths used the `../capture/`
   pattern that PR #989's `invalid_capture_path` lint rule emits an
   error for. Replaced all with root-relative `capture/...`. PRs #989
   and #991 are no longer self-contradictory.
---
 .../references/html-in-canvas-patterns.md     | 11 ++++++----
 skills/hyperframes/references/techniques.md   | 22 ++++++++++++-------
 2 files changed, 21 insertions(+), 12 deletions(-)

diff --git a/skills/hyperframes/references/html-in-canvas-patterns.md b/skills/hyperframes/references/html-in-canvas-patterns.md
index bd6fd8f79..f826b1f92 100644
--- a/skills/hyperframes/references/html-in-canvas-patterns.md
+++ b/skills/hyperframes/references/html-in-canvas-patterns.md
@@ -98,10 +98,13 @@ var mesh = new THREE.Mesh(
 );
 scene3d.add(mesh);
 
-// Post-processing: bloom for cinematic glow
-var composer = new THREE.EffectComposer(renderer);
-composer.addPass(new THREE.RenderPass(scene3d, camera));
-composer.addPass(new THREE.UnrealBloomPass(new THREE.Vector2(1920, 1080), 0.3, 0.4, 0.85));
+// Post-processing: bloom for cinematic glow.
+// EffectComposer / RenderPass / UnrealBloomPass are ES-module named imports
+// (see the import block below) — they're NOT properties of THREE in modern
+// versions. Three.js r150+ removed the UMD `examples/js/` globals.
+var composer = new EffectComposer(renderer);
+composer.addPass(new RenderPass(scene3d, camera));
+composer.addPass(new UnrealBloomPass(new THREE.Vector2(1920, 1080), 0.3, 0.4, 0.85));
 
 var proxy = { rotY: -0.12, zoom: 4.2 };
 tl.to(
diff --git a/skills/hyperframes/references/techniques.md b/skills/hyperframes/references/techniques.md
index ca7f28fb6..6226b4e28 100644
--- a/skills/hyperframes/references/techniques.md
+++ b/skills/hyperframes/references/techniques.md
@@ -188,16 +188,22 @@ The slide distance DECAYS per word (80→12px) — mimics a camera settling.
 Vector animations that play inside a composition. Use for logos, character animations, icons.
 
 ```html
-<script src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-web/dist/dotlottie-player.js"></script>
-<dotlottie-player
+<!-- The web-component package is `@lottiefiles/dotlottie-wc` (the SDK
+     `@lottiefiles/dotlottie-web` does NOT expose a custom element).
+     The element tag is <dotlottie-wc>. -->
+<script
+  src="https://cdn.jsdelivr.net/npm/@lottiefiles/dotlottie-wc/dist/dotlottie-wc.js"
+  type="module"
+></script>
+<dotlottie-wc
   class="lottie"
-  src="../capture/assets/lottie/animation-0.json"
+  src="capture/assets/lottie/animation-0.json"
   autoplay
   loop
   speed="1.5"
   style="width:500px;height:500px;"
 >
-</dotlottie-player>
+</dotlottie-wc>
 <script>
   gsap.set(".lottie", { scale: 0.3, opacity: 0 });
   tl.to(".lottie", { scale: 1, opacity: 1, duration: 0.35, ease: "back.out(1.6)" }, 0.2);
@@ -212,7 +218,7 @@ var anim = lottie.loadAnimation({
   renderer: "svg",
   loop: false,
   autoplay: false,
-  path: "../capture/assets/lottie/animation-0.json",
+  path: "capture/assets/lottie/animation-0.json",
 });
 ```
 
@@ -226,7 +232,7 @@ Embed real video footage inside compositions. Videos must be `muted` with `plays
 <div class="video-frame" style="width:680px;height:840px;border-radius:16px;overflow:hidden;">
   <video
     id="footage"
-    src="../capture/assets/videos/clip.mp4"
+    src="capture/assets/videos/clip.mp4"
     muted
     playsinline
     style="width:100%;height:100%;object-fit:cover;"
@@ -285,10 +291,10 @@ Animate font-variation-settings to reshape glyphs in real-time. Works with varia
 ```html
 <style>
   /* Load the captured local variable font — do NOT use Google Fonts @import.
-     Replace this placeholder with an @font-face pointing to ../capture/assets/fonts/. */
+     Replace this placeholder with an @font-face pointing to capture/assets/fonts/. */
   @font-face {
     font-family: "Fraunces";
-    src: url("../capture/assets/fonts/Fraunces-Variable.woff2") format("woff2");
+    src: url("capture/assets/fonts/Fraunces-Variable.woff2") format("woff2");
     font-weight: 100 900;
     font-style: normal;
     font-display: block;