remotion-best-practices

Overview

What is the remotion-best-practices skill?

Kỹ năng remotion-best-practices là một tập hợp có chọn lọc các hướng dẫn và quy tắc để xây dựng video với Remotion, framework tạo video dựa trên React. Nó gom các pattern chuyên biệt cho animation, audio, captions, cách dùng FFmpeg, assets, cảnh 3D và nhiều hơn nữa vào các file rule tập trung trong thư mục rules/.

Thay vì phải tự ghép nối các ví dụ từ đầu, kỹ năng này cung cấp những hướng dẫn có quan điểm rõ ràng về cách cấu trúc code Remotion sao cho render ổn định, mở rộng được cho các dự án phức tạp và dễ bảo trì về lâu dài.

Who is this skill for?

Hãy cài kỹ năng này nếu bạn:

• Xây dựng video marketing, sản phẩm hoặc social bằng Remotion và React
• Cần tạo video một cách lập trình (ví dụ: nội dung dựa trên dữ liệu hoặc template)
• Làm việc với nội dung nặng audio như podcast, audiogram hoặc music visualizer
• Muốn có pattern rõ ràng cho captions, subtitles và quy trình làm việc với SRT
• Đang thêm nội dung 3D hoặc Three.js vào các composition Remotion của bạn

Kỹ năng này hữu ích cho frontend engineer, motion designer biết code, và các team muốn chuẩn hóa cách viết dự án Remotion.

What problems does it solve?

Kỹ năng Remotion best-practices giúp bạn giải quyết những vấn đề thực tế thường gặp trong các dự án Remotion, như:

• Điều khiển mọi animation theo frames để render ổn định và có tính quyết định (deterministic)
• Import và tham chiếu hình ảnh, video, audio và font đúng cách qua thư mục public/ và staticFile()
• Tạo composition video sạch sẽ với timing, transition và parameters nhất quán
• Xử lý audio (layering, cắt, delay, volume, speed, loop, SFX)
• Tạo audio visualization (cột spectrum, waveform, hiệu ứng phản ứng theo bass)
• Làm việc với captions và subtitles, bao gồm import SRT và transcription
• Sử dụng FFmpeg cho các tác vụ như cắt, trích frame hoặc phát hiện đoạn im lặng
• Tích hợp 3D dùng Three.js và React Three Fiber qua @remotion/three
• Tính toán động metadata của composition (duration, kích thước, props) trước khi render
• Xác thực khả năng tương thích media với Mediabunny trước khi render

Nếu bạn đang làm bất kỳ thứ gì vượt quá một demo Remotion đơn giản, bộ rule này sẽ cung cấp các pattern đã được kiểm chứng trong môi trường production.

When is this skill a good fit?

Hãy dùng kỹ năng remotion-best-practices khi:

• Dự án của bạn đã dùng Remotion hoặc bạn đang đánh giá Remotion cho việc sinh video
• Bạn muốn có guideline nhất quán về animation, asset, audio, caption và 3D
• Bạn cần ví dụ ở cấp độ code chứ không chỉ tài liệu khái quát

Đây không phải là bản thay thế cho tài liệu chính thức của Remotion, cũng không phải khóa học React từ đầu. Giả định rằng bạn đã quen với React cơ bản và ít nhất đã lướt qua tài liệu Remotion.

How to Use

1. Installation and setup

Install the skill into your agent environment

Dùng trình quản lý skill để thêm kỹ năng Remotion best-practices từ repository upstream:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Lệnh này giúp remotion-best-practices trở thành nguồn tri thức mà agent của bạn có thể dùng để tham chiếu các file rule khi hỗ trợ dự án Remotion.

Review the core documentation files

Sau khi cài xong, hãy mở các file sau trước:

• SKILL.md – Mô tả tổng quan, khi nào nên dùng và link tới các file rule chính
• rules/animations.md – Cách điều khiển animation với useCurrentFrame() và useVideoConfig()
• rules/assets.md – Cách import hình ảnh, video, audio và font đúng chuẩn
• rules/audio.md – Làm việc với audio, cắt, delay và layering
• rules/audio-visualization.md – Dữ liệu audio, waveform và audio spectrum visualization
• rules/3d.md – Cảnh 3D dùng Three.js và React Three Fiber qua @remotion/three

Những rule này là nền tảng cho phần lớn workflow chỉnh sửa video với Remotion.

2. Core concepts and best practices

Drive all animations by frame

Tham khảo rules/animations.md cho nguyên tắc trung tâm của animation trong Remotion:

• Dùng useCurrentFrame() để đọc frame hiện tại
• Dùng useVideoConfig() để lấy fps
• Tính toán thời gian animation theo giây, rồi chuyển sang frame (seconds * fps)
• Dùng các helper như interpolate() để map frame sang vị trí, opacity hoặc thuộc tính khác
• Tránh dùng CSS transition, CSS animation và các class animation của Tailwind; chúng không render ổn định trong Remotion

Cách tiếp cận theo frame này đảm bảo đầu ra nhất quán bất kể tốc độ playback hay môi trường.

Manage assets via public/ and staticFile()

File rules/assets.md định nghĩa cách xử lý media:

• Đặt toàn bộ static media (image, font, audio, video) vào thư mục public/
• Dùng staticFile("my-file.ext") để tham chiếu asset bên trong public/
• Kết hợp staticFile() với các component Remotion như <Img>, <Video>, <Audio>
• Dùng URL từ xa trực tiếp khi file được host trên web

Pattern này giúp tránh lỗi sai đường dẫn, xử lý sẵn việc URL encoding và hoạt động ổn qua nhiều môi trường triển khai khác nhau.

Build robust audio and sound design

File rules/audio.md bao quát các workflow liên quan đến audio:

• Import audio với <Audio> từ @remotion/media
• Cắt đoạn audio bằng trimBefore và trimAfter (dựa trên frame)
• Delay audio hoặc sync với hình ảnh bằng wrapper <Sequence>
• Layer nhiều component <Audio> cho nhạc nền, voiceover và SFX

Với các visual điều khiển bằng audio, hãy kết hợp với rules/audio-visualization.md để:

• Cài @remotion/media-utils
• Dùng useWindowedAudioData() để đọc mẫu audio trong một khoảng thời gian
• Dùng visualizeAudio() để sinh dữ liệu tần số cho cột spectrum

Nhờ đó, việc tạo audiogram, title bắt beat và music visualization trở nên đơn giản hơn.

Handle captions and subtitles

SKILL.md ở cấp cao nhất sẽ trỏ sang các rule về caption:

• rules/subtitles.md – Các pattern dùng subtitle
• rules/display-captions.md – Render caption trên màn hình
• rules/import-srt-captions.md – Import file caption dạng SRT
• rules/transcribe-captions.md – Workflow tập trung vào transcription

Hãy dùng các rule này khi bạn cần:

• Sub cháy (burned-in) cho nội dung social
• Track caption theo từng ngôn ngữ
• Quy trình caption tự động hoặc bán tự động

Use FFmpeg for advanced video operations

Hướng dẫn rules/ffmpeg.md chỉ ra khi nào nên dùng FFmpeg song song với Remotion cho các tác vụ như:

• Cắt hoặc nối các video nguồn
• Phát hiện đoạn im lặng trong audio
• Trích frame hoặc tạo GIF

Remotion tập trung vào phần render; FFmpeg xử lý phần nặng của file media gốc. Kết hợp cả hai thường là cách hiệu quả nhất cho pipeline video trong production.

Bring in 3D with Three.js and React Three Fiber

Nếu bạn muốn có cảnh 3D trong video Remotion, hãy đọc rules/3d.md:

• Cài package @remotion/three với lệnh khuyến nghị npx remotion add @remotion/three (hoặc lệnh tương đương của package manager bạn dùng)
• Bọc nội dung 3D trong <ThreeCanvas> và truyền width, height từ useVideoConfig()
• Thiết lập lighting cơ bản (ví dụ: ambientLight và directionalLight)
• Điều khiển mọi animation 3D bằng useCurrentFrame() thay vì useFrame() từ @react-three/fiber

Như vậy, nội dung 3D sẽ được render frame-by-frame đúng cách, không bị nhấp nháy hay lệch sync.

3. Dynamic compositions and metadata

Calculate duration and dimensions dynamically

File rules/calculate-metadata.md cho thấy cách dùng calculateMetadata trên một <Composition> để:

• Điều chỉnh durationInFrames dựa trên dữ liệu bên ngoài (ví dụ: độ dài video đầu vào)
• Khớp kích thước composition với video input hoặc các giá trị động khác
• Biến đổi props trước khi quá trình render bắt đầu

Khi kết hợp với các helper như rules/get-video-duration.md và rules/get-video-dimensions.md, bạn có thể:

• Tự động điều chỉnh kích thước composition theo nội dung được upload
• Đảm bảo phần intro/outro khớp chính xác với độ dài media

Điều này đặc biệt hữu ích cho hệ thống video do người dùng tạo hoặc dựa trên template.

4. Media validation and compatibility

Check if a video can be decoded

Hướng dẫn rules/can-decode.md giới thiệu Mediabunny để kiểm tra tương thích:

• Cài Mediabunny với npx remotion add mediabunny
• Dùng helper canDecode() để kiểm tra một video nguồn URL có thể decode trong browser hay không
• Dùng biến thể canDecodeBlob() cho các nguồn Blob được upload

Điều này rất hữu ích khi bạn xây dựng flow upload cần xác thực media trước khi bắt đầu một lần render tốn kém.

5. Additional focused rules

Ngoài các chủ đề cốt lõi, thư mục rules/ còn chứa nhiều hướng dẫn chuyên sâu mà bạn có thể dùng khi cần:

• rules/compositions.md – Cấu trúc và quản lý các composition Remotion
• rules/timing.md, rules/sequencing.md, rules/transitions.md, rules/text-animations.md – Điều khiển chi tiết chuyển động và timing
• rules/fonts.md, rules/measuring-text.md, rules/measuring-dom-nodes.md – Tinh chỉnh typography và layout
• rules/gifs.md, rules/images.md, rules/videos.md, rules/transparent-videos.md, rules/trimming.md, rules/extract-frames.md – Làm việc với các định dạng và thao tác media khác nhau
• rules/maps.md, rules/charts.md, rules/lottie.md, rules/light-leaks.md – Các pattern hình ảnh theo domain cụ thể
• rules/voiceover.md, rules/sfx.md – Quy trình voice và sound effects
• rules/tailwind.md – Dùng Tailwind theo cách tương thích với Remotion (loại trừ các class animation bị cấm)

Bạn có thể tham chiếu linh hoạt tùy theo tính năng mà dự án yêu cầu.

6. Workflow tips for using this skill

With an AI agent

Nếu bạn dùng một AI assistant đã cài kỹ năng này:

• Hãy yêu cầu nó mở một file rule cụ thể (ví dụ rules/audio.md) khi bạn cần ví dụ chi tiết hơn
• Để nó sinh code snippet tuân thủ các rule (không dùng CSS transition, mọi animation qua useCurrentFrame(), dùng staticFile() đúng cách, v.v.)
• Dùng kỹ năng này như checklist khi review hoặc refactor code Remotion

In a team setting

Ở mức team, bạn có thể chuẩn hóa dựa trên kỹ năng này bằng cách:

• Chia sẻ link tới các file rules/*.md phù hợp trong tài liệu nội bộ
• Đưa các pattern từ kỹ năng này vào coding guideline nội bộ
• Dùng nó làm tài liệu tham khảo khi onboarding developer mới vào dự án Remotion

FAQ

Is this skill the same as the Remotion framework?

Không. Remotion là framework nền tảng để tạo video bằng React. Kỹ năng remotion-best-practices là tập hợp best practices và các file rule nằm bên trên Remotion, dùng để định hướng cách bạn cấu trúc code, xử lý media và tránh các lỗi thường gặp.

Do I need to know React to benefit from this skill?

Có. Hệ sinh thái Remotion xây dựng trên React, và các ví dụ trong những file rule giả định rằng bạn hiểu component, props và hook. Kỹ năng này tập trung vào các vấn đề đặc thù Remotion, không phải dạy React từ đầu.

How do I install the Remotion best-practices skill?

Hãy cài vào môi trường agent hoặc skills của bạn với:

npx skills add https://github.com/remotion-dev/skills --skill remotion

Sau đó mở SKILL.md và thư mục rules/ để khám phá các chủ đề có sẵn.

Can I use this skill without a Remotion project yet?

Bạn có thể đọc nội dung và ví dụ mà chưa cần dự án Remotion, nhưng nó hữu ích nhất khi bạn đã có workspace Remotion. Nhiều rule tham chiếu các package như @remotion/media, @remotion/media-utils, @remotion/three hoặc Mediabunny mà bạn sẽ muốn cài trực tiếp vào dự án.

Does this skill cover 3D content with Three.js?

Có. File rules/3d.md dành riêng cho 3D trong Remotion dùng Three.js và React Three Fiber thông qua @remotion/three. Nó giải thích cách cài package, bọc nội dung trong <ThreeCanvas> và điều khiển animation bằng useCurrentFrame().

Where do I find guidance on audio visualizations and audiograms?

Hãy dùng rules/audio-visualization.md. File này hướng dẫn cách cài @remotion/media-utils, lấy dữ liệu audio bằng useWindowedAudioData() và chuyển đổi qua visualizeAudio() để tạo các cột spectrum và waveform cho audiogram.

What if I need to work with captions and subtitles?

Bắt đầu từ SKILL.md, nơi trỏ tới:

• rules/subtitles.md cho các pattern subtitle tổng quát
• rules/display-captions.md cho việc render caption trên màn hình
• rules/import-srt-captions.md cho import file SRT
• rules/transcribe-captions.md cho các workflow transcription

Những hướng dẫn này sẽ bao phủ hầu hết nhu cầu caption trong video dựa trên Remotion.

When should I use FFmpeg instead of pure Remotion code?

Hãy dùng FFmpeg khi bạn cần thao tác trên file media gốc như cắt chính xác, nối, phát hiện đoạn im lặng hoặc trích frame. Remotion mạnh ở việc compose và render scene trong React. rules/ffmpeg.md giải thích thời điểm và cách tích hợp FFmpeg cùng pipeline Remotion của bạn.

Can this skill help me avoid performance and rendering issues?

Có. Nhiều rule được viết ra chính để tránh các lỗi phổ biến, ví dụ:

• Cảnh 3D bị nhấp nháy khi dùng useFrame() thay vì useCurrentFrame()
• Animation không render vì phụ thuộc vào CSS transition
• Đường dẫn asset bị sai và URL encode không đúng
• Media lỗi trong quá trình render vì không thể decode

Làm theo các pattern trong rules/animations.md, rules/assets.md, rules/3d.md và rules/can-decode.md sẽ giúp dự án Remotion của bạn ổn định hơn.

How do I explore all available rule files?

Sau khi cài, hãy mở thư mục rules/ trong môi trường của bạn. Một số file quan trọng gồm:

• rules/3d.md
• rules/animations.md
• rules/assets.md
• rules/audio-visualization.md
• rules/audio.md
• rules/ffmpeg.md
• rules/compositions.md
• rules/timing.md
• rules/subtitles.md
• rules/voiceover.md

Hãy dùng Files tab hoặc editor của bạn để duyệt phần còn lại, bao gồm các chủ đề chuyên biệt như chart, map, GIF và Tailwind.