Skill
Tạo mã video xác định với ak:remotion
Xây dựng composition Remotion theo frame, quản lý media và điều kiện package, đồng thời xác minh bằng chứng preview và render.
Dùng ak:remotion khi bạn tạo hoặc review video lập trình bằng React. Skill
cung cấp các rule đóng gói cho composition, animation theo frame, sequencing,
media, caption, biểu đồ, 3D, transition, metadata, font, đo lường và hiệu ứng an
toàn khi render.
Chọn ak:remotion cho React render theo timeline
Dùng Skill khi
- Bạn cần video theo dữ liệu, animation, ảnh tĩnh, social clip, chuỗi biểu đồ, video có caption, Lottie scene hoặc template dựa trên React.
- Bạn đang thêm audio, video, ảnh, GIF, font local hoặc Google, transition, duration động, trích xuất metadata hoặc trích xuất frame.
- Bạn cần nội dung Three.js render xác định trên timeline Remotion.
- Bạn đang review mã Remotion hiện có để tìm flicker, lỗi timing, tải media, overflow hoặc khác biệt chỉ xuất hiện khi render.
Chọn workflow khác khi
- Bạn cần trải nghiệm 3D tương tác trên browser thay vì video render. Dùng
ak:threejs. - Bạn cần UI ứng dụng thông thường hoặc brand asset tĩnh thay vì timeline.
- Bạn chỉ cần chỉnh sửa video trong ứng dụng desktop; Skill này viết và render mã nguồn.
Chuẩn bị project và render contract
- Xác nhận phiên bản Remotion và React đã cài, package manager, composition entry point, output codec và container, kích thước, fps, duration và môi trường render.
- Cung cấp asset local có giấy phép trong
public/hoặc URL từ xa đã được phê duyệt và cho phép CORS. Ghi lại nguồn, kích thước, duration, codec và dung lượng tệp dự kiến. - Xác định nội dung, timing, brand token, typography, safe zone, caption, yêu cầu accessibility và frame hoặc timestamp nghiệm thu.
- Dự trù CPU, bộ nhớ, mạng, dung lượng tạm và kích thước output cuối. Render, giải mã media, 3D, hiệu ứng và transcription có thể tốn nhiều tài nguyên.
- Chỉ cài package cần cho rule đã chọn, chẳng hạn
@remotion/media,@remotion/captions,@remotion/transitions,@remotion/layout-utils,@remotion/fonts,@remotion/google-fonts,@remotion/lottie,@remotion/gif,@remotion/threehoặc Mediabunny.
| Runtime | Cách gọi | Ranh giới bằng chứng |
|---|---|---|
| Claude Code | /ak:remotion ... | Cách phân phối native có thể dùng Claude Hooks được hỗ trợ; render tool và codec phụ thuộc môi trường project. |
| Cursor | /ak:remotion ... | Lệnh slash do người dùng xác minh, không phải bằng chứng về hỗ trợ media hoặc render tương đương. |
| Codex | $ak:remotion ... | Hỗ trợ khám phá native với Hook projection một phần và khả năng render phụ thuộc môi trường. |
Chạy Skill
/ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"/ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"$ak:remotion "Create a 15-second 1080x1080 product update video at 30 fps using existing brand tokens and local assets; include captions, reduced-motion-safe transitions, deterministic tests at key frames, and stop before the final render"Skill không có mode flag cấp cao nhất. Skill chọn rule file theo tính năng được yêu cầu. Các rule runtime quan trọng gồm:
| Khu vực | Hành vi bắt buộc | Hiệu ứng có thể quan sát |
|---|---|---|
| Animation | Điều khiển giá trị bằng useCurrentFrame() và đổi giây bằng fps của composition | CSS transition, CSS animation, Tailwind animate-* và animation useFrame() tự vận hành bị cấm vì render có thể flicker hoặc khác nhau. |
| Asset | Dùng staticFile() cho asset trong public/ và component media của Remotion | Tệp local được mã hóa để phục vụ; media từ xa tạo phụ thuộc mạng và CORS. |
| Composition | Khai báo width, height, fps, duration, props và calculateMetadata tùy chọn | Metadata có thể fetch hoặc kiểm tra media trước khi render và có thể đổi duration, kích thước, props, codec mặc định cùng tên output. |
| Sequencing | Dùng Sequence, Series và transition timeline | Giá trị frame của sequence là local; transition chồng scene và làm giảm tổng duration. Premount component có timing. |
| Media | Dùng package Remotion đã cài cho audio, video, GIF, caption, font và Lottie | Cài package làm thay đổi manifest và lockfile; khả năng giải mã media và render khác nhau theo môi trường. |
| 3D | Cài @remotion/three, dùng ThreeCanvas với kích thước và lighting | Sequence trong ThreeCanvas dùng layout="none"; animation vẫn theo frame. |
| Transcription | Chọn Whisper.cpp local, WASM trên browser hoặc cloud API | Lựa chọn local tiêu tốn CPU, bộ nhớ, đĩa hoặc hạ tầng server; cloud transcription gửi audio ra ngoài và có thể phát sinh phí. |
Theo dõi các stage có thể quan sát
- Xác nhận render contract. Chốt composition ID, props, fps, kích thước, logic duration, loại output, asset và ranh giới thẩm quyền.
- Kiểm tra capability đã cài. Đối chiếu ví dụ trong rule với phiên bản package hiện tại, codec, hỗ trợ browser hoặc server và package manager.
- Xây dựng scene xác định. Suy ra animation từ frame và fps, dùng timing cục bộ của composition, đồng thời chờ font và media trước khi render.
- Lắp timeline. Sequence, trim, transition, caption và mix media trong khi tính duration cuối từ phần chồng thực tế và rule playback.
- Preview và test frame chính. Kiểm tra điểm bắt đầu, biên transition, thay đổi caption, phần trim media, frame cuối, overflow, tải font và trạng thái lỗi.
- Chỉ render khi được phê duyệt. Ghi lại lệnh render, codec, duration, thời gian chạy, vấn đề tài nguyên cao nhất, đường dẫn output, dung lượng tệp và xác minh playback.
Giữ phê duyệt media ngoài và compute rõ ràng
Phê duyệt preview không phải phê duyệt render
Render cuối có thể dùng nhiều CPU, bộ nhớ, đĩa, mạng và thời gian. Render cũng có thể fetch asset từ xa hoặc gọi nhà cung cấp transcription. Xác nhận riêng đường dẫn output, ngân sách tài nguyên, cách xử lý dữ liệu ngoài và chi phí nhà cung cấp.
- Ảnh, video, audio, caption, font, Lottie và metadata endpoint từ xa sẽ liên hệ external host. Pin hoặc đưa asset đã phê duyệt về local để output tái lập được.
- Cloud transcription gửi audio đến nhà cung cấp và có thể phát sinh phí. Không gửi media bảo mật khi chưa được phê duyệt.
- Lệnh thêm package liên hệ registry và thay đổi tệp project. Dùng package manager của repository và review diff manifest cùng lockfile.
- Render ghi output lớn và dữ liệu tạm. Xác định đích cùng dung lượng còn trống trước khi bắt đầu; không âm thầm ghi đè một bản render có giá trị.
- Pitch shifting được tài liệu hóa là chỉ dành cho render phía server, không phải hành vi của Studio hoặc Player. Xem khác biệt preview/render là test case bắt buộc.
Xác minh output và bằng chứng
Một lần chạy hoàn chỉnh nên có diff source và asset, metadata của composition, thay đổi package, screenshot hoặc assertion ở frame chính, phép tính timing và transition, đồng bộ caption và audio, kiểm tra overflow và font, cùng bằng chứng preview cộng render thật khi render đã được phê duyệt. Phát output từ đầu đến cuối và xác minh codec, kích thước, fps, duration, audio, caption, frame cuối và dung lượng tệp. Với biểu đồ và nội dung hình ảnh quan trọng, cung cấp caption, lời thuyết minh hoặc nội dung chữ tương đương dễ tiếp cận khi cần.
| Triệu chứng | Bước tiếp theo an toàn |
|---|---|
| Preview và render khác nhau | Loại animation CSS hoặc thư viện tự vận hành, điều khiển giá trị từ frame, chờ media/font và render một khoảng chẩn đoán nhỏ. |
| Media trống hoặc không giải mã được | Xác minh CORS, URL nguồn, codec, media package đã cài và bằng chứng giải mã Mediabunny; cung cấp trạng thái lỗi hoặc fallback. |
| Duration sai | Tính lại offset sequence, trim, playback rate, metadata và phần transition chồng theo API đã cài. |
| Chữ bị cắt hoặc thay đổi giữa các máy | Tải đúng font trước khi đo, khớp thuộc tính đo và test overflow ở frame đại diện. |
| Render quá chậm hoặc quá lớn | Render một khoảng giới hạn, profile media nặng, 3D, hiệu ứng, độ phân giải và concurrency, rồi điều chỉnh một ràng buộc khi được phê duyệt. |
| Caption bị lệch | Xác minh timestamp nguồn, phép đổi fps, frame cục bộ của sequence, biên trang và thay đổi playback rate. |
Các rule đóng gói là hướng dẫn tại một thời điểm và có thể khác API Remotion đã
cài; một số ví dụ cũng dựa trên tài liệu hiện hành bên ngoài. Xác nhận prop nhạy
theo phiên bản trước khi đổi mã. Stable và beta chứa rule Skill ak:remotion
giống nhau trong các bản phát hành được tài liệu hóa.
Tiếp tục với Runtime adapter, Project, artifact và checkpoint hoặc tổng quan Engineer Kit.
Xây 3D web scene có thể xác minh với ak:threejs
Dùng tri thức Three.js đóng gói và example có thể search để triển khai, profile và validate trải nghiệm 3D có giới hạn.
Biến bằng chứng hệ thống thành sơ đồ với ak:excalidraw
Tạo sơ đồ Excalidraw có thể chỉnh sửa cho kiến trúc, luồng và codebase bằng canvas trực tiếp hoặc workflow dựa trên tệp, rồi xác minh artifact đã render.