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:remotion

Video React bằng Remotion

Dùng bộ quy tắc Remotion cho video React: composition, sequencing, đường cong animation, asset, caption, effect, chart theo dữ liệu và metadata render.

01

Chọn đúng Remotion

02

Định nghĩa composition

03

Lập timeline

04

Gắn asset media

Nguyên tắc 01

Ưu tiên video viết bằng React component; video HTML-first thuộc ak-hyperframes

Nguyên tắc 02

Timeline đúng phụ thuộc vào sequencing, trimming và metadata thời lượng

Nguyên tắc 03

Xử lý media phải rõ ràng: font, caption, audio, video, GIF và Lottie đều có quy tắc riêng

Nguyên tắc 04

Đo layout động trước khi tin rằng lúc render sẽ vừa

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 Chọn đúng Remotion Dùng khi video được viết bằng React component; ưu tiên ak-hyperframes nếu video là HTML/CSS thuần với thời gian trong data attribute.
  2. 2 Định nghĩa composition Chọn quy tắc cho composition, still, folder, props, thời lượng, kích thước và calculateMetadata khi cần.
02

Xử lý

Agent / skill thực thi

  1. 3 Lập timeline Dùng quy tắc sequencing, trimming, transition, timing, spring, interpolation và text animation để đặt từng cảnh.
  2. 4 Gắn asset media Nạp ảnh, video, âm thanh, font, GIF, Lottie, caption SRT và caption từ transcript bằng helper Remotion phù hợp.
03

Kiểm chứng

Gate, review, xác thực

  1. 5 Đo nội dung động Đo DOM node hoặc chữ khi cần khớp layout, caption, biểu đồ hoặc thành phần composition responsive.
  2. 6 Thêm hình ảnh nâng cao Áp dụng 3D, chart, chuỗi effect, wave, blur và Tailwind chỉ khi composition cần.
04

Đóng

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

  1. 7 Kiểm tra đầu vào render Dùng quy tắc thời lượng, kích thước, can-decode, metadata audio/video và trích frame trước khi render media dài hoặc do người dùng cung cấp.

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:remotion [video or component]

Đối số

[video or component] Bắt buộc

Brief video hoặc component

Yêu cầu bằng ngôn ngữ tự nhiên cho video, still, scene, chart, caption, media, 3D hoặc component Remotion. Nêu composition ID, kích thước, fps, duration, asset, timing, frame nghiệm thu và final render đã được duyệt hay chưa; Skill không có mode flag cấp cao nhất.

/ak:remotion "Create video product update 15 giây 1080x1080 ở 30 fps dùng brand tokens và local assets hiện có; bao gồm captions, transitions an toàn reduced-motion, deterministic tests tại key frames, và stop trước final render"

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ế.

Video React có animation Khuyến nghị 
/ak:remotion onboarding explainer with captions
Dùng khi:
Dùng khi cần viết video lập trình bằng React component trong Remotion.
Kết quả:
Hướng dẫn theo rule cho Remotion composition, sequencing, đường cong timing, caption, asset và cấu trúc scene sẵn sàng render.
Metadata và cắt media 
/ak:remotion product demo using video clips and audio
Dùng khi:
Dùng trước khi trộn video tải lên, audio, metadata thời lượng, kiểm tra decode và trimming.
Kết quả:
Áp dụng rule audio, video, metadata Mediabunny, can-decode, trích frame và trimming để playback luôn đồng bộ.
Render theo dữ liệu động 
/ak:remotion data-driven sales chart video
Dùng khi:
Dùng khi chart, prop động, đo text hoặc metadata composition được tính toán ảnh hưởng tới render.
Kết quả:
Kết hợp rule chart, calculateMetadata, đo text và đo DOM để layout động có kích thước và timing đúng.
Sequence 3D hoặc effect 
/ak:remotion hero video with 3D objects and blur effects
Dùng khi:
Dùng khi scene Remotion cần Three.js, React Three Fiber, blur, wave, chuỗi effect hoặc styling Tailwind.
Kết quả:
Dùng rule 3D, effect, Tailwind, animation và transition để đặt visual nâng cao trên timeline Remotion mạch lạc.

Phạm vi xử lý

  • Composition và metadata
  • Sequence và transition
  • Hiển thị và tạo caption
  • Cắt audio/video
  • Chart và 3D trong Remotion
  • Effect và typography

Tiếp theo