fix(ci): format migrated comps with oxfmt, sync skills manifest

CI failures were two root causes (preview-regression was a cascade — its gate
mirrors preview-parity, which was skipped because the Preflight lint+format job
failed):

- Preflight (lint + format): the migrated registry comps (flowchart,
  flowchart-vertical, liquid-glass-notification, vignette demo) were committed
  unformatted — the lefthook format step only ran oxfmt on staged TS, not HTML,
  so `oxfmt --check .` failed in CI. Ran oxfmt on all four. The vignette title's
  per-glyph spans use oxfmt's `</span>`-split form, which keeps the glyphs
  adjacent (no inter-element whitespace), so rendering is unchanged.
- Skills: manifest in sync: the pre-commit hook's manifest generator and CI's
  canonical `gen-skills-manifest.ts` produced different content hashes for the
  same skill; regenerated with the canonical generator so the committed manifest
  matches what CI computes.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

registry/blocks/flowchart-vertical/flowchart-vertical.html

@@ -378,11 +378,7 @@
           tl.addLabel("hold3", "+=0.8");
 
           // 9. Cursor drifts in
-          tl.to(
-            S + " #cursor",
-            { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" },
-            "hold3",
-          );
+          tl.to(S + " #cursor", { x: -1110, y: -1560, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
           tl.add(() => {
@@ -441,11 +437,7 @@
           tl.addLabel("hold6", typingEnd + 0.5);
 
           // 16. Cursor clicks away to deselect
-          tl.to(
-            S + " #cursor",
-            { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" },
-            "hold6",
-          );
+          tl.to(S + " #cursor", { x: -1050, y: -1520, duration: 0.3, overwrite: "auto" }, "hold6");
           tl.to(
             S + " #cursor",
             { scale: 0.8, duration: 0.05, yoyo: true, repeat: 1, overwrite: "auto" },

registry/blocks/flowchart/flowchart.html

@@ -378,11 +378,7 @@
           tl.addLabel("hold3", "+=0.8");
 
           // 9. Cursor drifts in
-          tl.to(
-            S + " #cursor",
-            { x: -1470, y: -540, duration: 1, ease: "power1.inOut" },
-            "hold3",
-          );
+          tl.to(S + " #cursor", { x: -1470, y: -540, duration: 1, ease: "power1.inOut" }, "hold3");
 
           // 10. Cursor clicks — selection border
           tl.add(() => {

registry/blocks/liquid-glass-notification/liquid-glass-notification.html

@@ -407,29 +407,13 @@
         gsap.set("#reply-actions", { y: 8, opacity: 0 });
         gsap.set("#typing-dots span", { opacity: 0.35 });
 
-        tl.to(
-          "#gp1",
-          { left: "1326px", opacity: 1, duration: 0.38, ease: "power3.out" },
-          0.18,
-        );
-        tl.to(
-          "#txt1",
-          { x: -14, opacity: 1, duration: 0.38, ease: "power3.out" },
-          0.18,
-        );
+        tl.to("#gp1", { left: "1326px", opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
+        tl.to("#txt1", { x: -14, opacity: 1, duration: 0.38, ease: "power3.out" }, 0.18);
         tl.to("#gp1", { left: "1340px", duration: 0.16, ease: "power2.out" }, 0.56);
         tl.to("#txt1", { x: 0, duration: 0.16, ease: "power2.out" }, 0.56);
 
-        tl.to(
-          "#gp2",
-          { left: "1326px", opacity: 1, duration: 0.36, ease: "power3.out" },
-          0.82,
-        );
-        tl.to(
-          "#txt2",
-          { x: -14, opacity: 1, duration: 0.36, ease: "power3.out" },
-          0.82,
-        );
+        tl.to("#gp2", { left: "1326px", opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
+        tl.to("#txt2", { x: -14, opacity: 1, duration: 0.36, ease: "power3.out" }, 0.82);
         tl.to("#gp2", { left: "1340px", duration: 0.16, ease: "power2.out" }, 1.18);
         tl.to("#txt2", { x: 0, duration: 0.16, ease: "power2.out" }, 1.18);
 
@@ -485,26 +469,10 @@
           4.25,
         );
 
-        tl.to(
-          "#gp1",
-          { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" },
-          6.72,
-        );
-        tl.to(
-          "#txt1",
-          { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" },
-          6.72,
-        );
-        tl.to(
-          "#gp2",
-          { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" },
-          6.9,
-        );
-        tl.to(
-          "#txt2",
-          { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" },
-          6.9,
-        );
+        tl.to("#gp1", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#txt1", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.72);
+        tl.to("#gp2", { left: "1980px", opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
+        tl.to("#txt2", { x: 640, opacity: 0, duration: 0.42, ease: "power2.in" }, 6.9);
 
         window.__timelines["liquid-glass-notification"] = tl;
       })();

registry/components/vignette/demo.html

@@ -41,7 +41,11 @@
         <div class="demo-subject"></div>
 
         <div class="demo-text">
-          <div class="demo-title"><span class="ch">V</span><span class="ch">I</span><span class="ch">G</span><span class="ch">N</span><span class="ch">E</span><span class="ch">T</span><span class="ch">T</span><span class="ch">E</span></div>
+          <div class="demo-title">
+            <span class="ch">V</span><span class="ch">I</span><span class="ch">G</span
+            ><span class="ch">N</span><span class="ch">E</span><span class="ch">T</span
+            ><span class="ch">T</span><span class="ch">E</span>
+          </div>
           <div class="demo-subtitle">Frame the eye. Hold the moment.</div>
         </div>
       </div>

skills-manifest.json

@@ -18,7 +18,7 @@
       "files": 1
     },
     "hyperframes-animation": {
-      "hash": "a23faee17396c153",
+      "hash": "c9bbeb7e68c5854d",
       "files": 115
     },
     "hyperframes-cli": {