VividKit Crystal clear AI coding
EN
Chọn Thiết Lập Bắt Đầu với AgentKit Tiếp Tục với ClaudeKit Chuyển từ ClaudeKit sang AgentKit Gỡ hẳn ClaudeKit AgentKit Là Gì? AgentKit Hoạt Động Như Thế Nào? Kit, Skill, Agent & Hook AgentKit Hỗ Trợ Runtime AgentKit Ứng Dụng AgentKit Desktop Cấu Hình AgentKit Tra Cứu CLI ak Cheatsheet skill AgentKit Workflows AgentKit Statusline AgentKit Cập Nhật CLI ak & Kits AgentKit Helper Cài lại clean AgentKit Xử Lý Sự Cố AgentKit Giới Thiệu ClaudeKit Hướng Dẫn ClaudeKit CLI Tìm Lệnh Phù Hợp Bảng Lệnh Nhanh Quy Trình Mẫu Tham Chiếu CLI Claude Mechanics Permission Modes ClaudeKit Hooks Coexistence ClaudeKit x Codex CK → Tool coding khác Cách ClaudeKit Hoạt Động Inside ClaudeKit Tìm Unknowns Của Bạn Khôi Phục Session Sửa Lỗi Từ Log Thiết Kế UI/UX Chuyển Đổi Tài Khoản Cấu Hình IDE Remote Control Codex App Sơ đồ hệ thống UI Review Gate Khuyến Mãi Ủng Hộ VividKit

Tóm tắt nhanh / Lệnh

Bộ Engineer

/ak:hyperframes

Wrapper HeyGen HyperFrames

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

01

Xác nhận đúng fit

02

Kiểm dependency

03

Pin CLI

04

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; class="clip" và timing attribute điều khiển visibility.

Nguyên tắc 03

Lệnh npx đã pin cùng lint 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.

01

Khởi động

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

  1. 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; chuyển React-first, Remotion và encode-only sang nơi khác.
  2. 2 Kiểm dependency Cần Node.js 22+ và FFmpeg trong PATH; chỉ đặt HEYGEN_API_KEY cho remote render, rồi chạy node scripts/verify-prereqs.mjs trước khi render.
02

Xử lý

Agent / skill thực thi

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

Kiểm chứng

Gate, review, xác thực

  1. 5 Sửa HTML theo contract Viết HTML thuần với data-composition-id, data-start, data-duration, data-width, data-height, data-track-index và class="clip" làm contract timing/sizing.
  2. 6 Preview Chạy npx -y hyperframes@0.7.99 preview my-composition và mở URL local được in ra để scrub timing trước khi tốn thời gian render.
04

Đóng

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

  1. 7 Lint trước render Chạy npx -y hyperframes@0.7.99 lint my-composition và sửa mọi lỗi timing data-* hoặc composition trước khi render.
  2. 8 Render hoặc cloud render Render local bằng npx -y hyperframes@0.7.99 render ... --output, hoặc dùng lệnh top-level cloud render riêng khi cần remote render có HEYGEN_API_KEY.

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, 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, lint 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, lint, 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 remote render bằng HEYGEN_API_KEY.
Kết quả:
Kiểm prerequisite và HEYGEN_API_KEY, giữ cloud render là lệnh top-level riêng, lint trước, render với --output và kiểm artifact video.
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 lint, kiểm data-composition-id, data-start, data-duration và class="clip", 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/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, 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 đã pass trước render và ffprobe đã chứng minh duration/dimension của MP4.

Tiếp theo