Ctrl K

Tóm tắt nhanh / Lệnh

Bộ Marketing

/ak:hyperframes

Wrapper HeyGen HyperFrames

Dùng wrapper HeyGen HyperFrames CLI đã pin cho video lập trình HTML-first: kiểm Node/FFmpeg/FFprobe/Chrome, scaffold, sửa HTML timing, preview, lint và check, render và chứng minh MP4.

Xác nhận đúng fit

Kiểm dependency

Pin CLI

Scaffold composition

Nguyên tắc 01

HyperFrames dành cho HTML/CSS được timing bằng data-* attribute, không phải việc Remotion React-first.

Nguyên tắc 02

HTML composition là source of truth; id, data-start và data-duration trên mỗi clip điều khiển timing.

Nguyên tắc 03

Lệnh npx đã pin cùng lint, check và ffprobe giúp hành vi CLI thay đổi nhanh vẫn kiểm chứng được.

Bản đồ thực thi

Các nhánh chính từ đầu vào đến kết quả, bám theo cách command chạy khi dùng thật.

Khởi động

Đầu vào, phạm vi, route

1 Xác nhận đúng fit Dùng HyperFrames cho video dọc/social 1080×1920 ngắn, clip launch, promo loop và motion graphics viết bằng HTML. Chỉ dùng nexu-io/html-video khi máy đã có binary đó hoặc catalog mẫu khớp; không thì ở lại HyperFrames. Chuyển React-first, Remotion và encode-only sang nơi khác.
2 Kiểm dependency Cần Node.js 22+, FFmpeg và FFprobe trong PATH, và Chrome headless (hyperframes browser ensure); credential HeyGen (HEYGEN_API_KEY hoặc hyperframes auth login) chỉ dùng cho cloud render. Chạy node scripts/verify-prereqs.mjs trước khi render.

Xử lý

Agent / skill thực thi

3 Pin CLI Chạy mọi bước CLI qua npx -y hyperframes@0.8.77 và tránh lệnh npx -y hyperframes không pin trong script hoặc tài liệu.
4 Scaffold composition Scaffold composition mới bằng lệnh init đã pin, ví dụ npx -y hyperframes@0.8.77 init my-composition --resolution portrait --non-interactive.

Kiểm chứng

Gate, review, xác thực

5 Sửa HTML theo contract Viết HTML thuần: phần root có data-composition-id, data-start="0", data-width, data-height và thường có data-duration; mỗi clip có timing mang id, data-start và data-duration.
6 Preview Chạy npx -y hyperframes@0.8.77 preview my-composition và mở URL local được in ra để scrub timing trước khi tốn thời gian render.

Đóng

Báo cáo, bàn giao, artifact

7 Lint rồi check Chạy npx -y hyperframes@0.8.77 lint my-composition để có phản hồi nhanh, rồi check làm cổng cuối: nó chạy lại lint và kiểm lỗi runtime, request fail, layout chồng lấn và độ tương phản trong trình duyệt. Dùng snapshot --at để xem khung hình chính mà không cần render.
8 Render hoặc cloud render Render local bằng npx -y hyperframes@0.8.77 render ... --strict --output, hoặc dùng lệnh top-level cloud render riêng (xem trước bằng --dry-run) khi cần cloud render có credential.

Cú pháp, đối số, subcommand

Cách gọi skill: cú pháp, đối số vị trí, option dùng chung, rồi từng subcommand với cú pháp và kết quả riêng.

Cú pháp

/ak:hyperframes [composition or command]

Đối số

[composition or command] Bắt buộc

Brief composition hoặc lệnh

Yêu cầu bằng ngôn ngữ tự nhiên cho composition HTML HyperFrames, scaffold, preview, lint/check, render local, render cloud hoặc gỡ lỗi. Nêu aspect ratio, duration, asset, output path và ranh giới local/cloud; đây không phải lệnh parser cố định.

/ak:hyperframes "Scaffold a 6-second 1080x1920 draft product-launch loop under ./assets/videos/launch/, preview locally, pass lint and check before rendering, and render an MP4 to ./assets/videos/launch/launch.mp4 without contacting the HeyGen cloud endpoint"

Prompt mẫu

Ví dụ gọi command theo từng flag, subcommand, mode hoặc route dùng được trong workflow thực tế.

Launch sản phẩm dọc Khuyến nghị

/ak:hyperframes create a 9:16 product-launch clip as a plain HTML composition

Dùng khi:: Khi cần video dọc/social ngắn render từ HTML/CSS.
Kết quả:: Kiểm Node.js và FFmpeg, scaffold bằng init --resolution portrait đã pin, sửa HTML timing data-*, preview, pass lint và check, render và ffprobe MP4.

Render cloud remote

/ak:hyperframes render my-composition remotely with HeyGen cloud output to ./assets/videos/my-composition.mp4

Dùng khi:: Khi đã có composition HTML HyperFrames và cần cloud render bằng credential HeyGen.
Kết quả:: Kiểm prerequisite và credential HeyGen, pass check trước, giữ cloud render là lệnh top-level riêng được xem trước bằng --dry-run, rồi kiểm artifact video.

Catalog html-video sẵn có

/ak:hyperframes render this promo from the html-video template catalog already on this machine

Dùng khi:: Khi clip HTML-to-MP4 theo mẫu nên dùng checkout hoặc binary html-video đã có trên máy.
Kết quả:: Rời HyperFrames chỉ vì html-video đã có sẵn, theo reference đó để cài và render, và không nhét engine vào project.

Gỡ lỗi MP4 lỗi

/ak:hyperframes troubleshoot a blank or too-short MP4 from my-composition

Dùng khi:: Khi render HyperFrames bị trắng, quá ngắn hoặc lỗi do timing composition sai.
Kết quả:: Chạy verifier, chạy lại check, kiểm data-composition-id, data-start, data-duration và đăng ký timeline, rồi theo troubleshooting đã ghi trước khi render lại.

Phạm vi xử lý

Video dọc/social HTML-first
Timing composition bằng data-*
Kiểm prerequisite
Luồng init/preview/lint/check/render đã pin
Định tuyến render local, cloud, lambda và cloudrun

Artifact tạo ra

Tóm tắt render HyperFrames

Mẫu đường dẫn

Path composition, chuỗi lệnh đã pin, kết quả lint và check, lệnh render, path MP4 output, duration và dimension từ ffprobe, ghi chú local/cloud.

Kết quả đáng tin phải cho thấy lint và check đã pass trước render và ffprobe đã chứng minh duration/dimension của MP4.