Thực hành tốt nhất cho Remotion
Bộ kiến thức chuyên sâu cho Remotion (làm video bằng React), chia thành các tệp quy tắc theo chủ đề: animation, phụ đề, asset, transition.
Ảnh · VideoTrung cấp★ 177⑂ 19Điểm AI 6/10Cập nhật lần cuối: 17 thg 5, 2026
Skill này làm gì
Đây là skill tổng hợp kiến thức về Remotion — framework tạo video bằng React. Phần thân SKILL.md hoạt động như mục lục, còn giải thích chi tiết và ví dụ code nằm trong 28 tệp thuộc thư mục rules/.
- Nền tảng animation, đường cong thời gian (
interpolate,spring), transition, trimming, sequencing - Cách nhúng ảnh, video, audio, font, GIF, Lottie
- Xử lý phụ đề: nhập tệp .srt, chuyển giọng nói thành văn bản, hiệu ứng highlight từng chữ kiểu TikTok
- Dùng Mediabunny để lấy thời lượng, kích thước video, trích xuất frame, kiểm tra khả năng decode
calculateMetadatađể đặt động thời lượng/kích thước/props, TailwindCSS, đo text và DOM, biểu đồ, 3D với Three.js
Phù hợp với ai
- Lập trình viên React dùng Remotion để tự động tạo video quảng cáo, short-form, video báo cáo
- Người muốn giảm lỗi khi Claude Code dùng sai API của Remotion
- Nhóm muốn chuẩn hoá pattern cho các việc lặp lại như phụ đề, audio
Ví dụ sử dụng
- "Tạo phụ đề kiểu TikTok khớp với file audio" → skill đọc
transcribe-captions.mdvàdisplay-captions.mdđể sinh code highlight theo từng từ. - "Tự tính durationInFrames theo độ dài file mp4 vừa thêm" → áp dụng
get-video-duration.md+calculate-metadata.md. - "Làm chuyển cảnh mềm hơn bằng spring easing" → tham chiếu
timing.mdvàtransitions.mdđể sửa component transition.
· · · Hướng dẫn cài đặt · · ·
Dùng thử ngay, không cần cài
Dán đoạn dưới vào Claude là dùng được skill này mà không cần cài đặt.
Hãy đọc hướng dẫn trong tệp này và làm theo để giúp mình: https://raw.githubusercontent.com/Karanjot786/agent-skills-cli/HEAD/.agent/skills/remotion-best-practices/SKILL.md Mình muốn: (viết việc bạn cần ở đây)
Nếu Claude không mở được liên kết, hãy mở liên kết và copy nội dung vào rồi dán.
↓ Thấy hữu ích thì tải ZIP bên dưới và cài. Sau đó skill tự chạy, không phải dán lại mỗi lần.
Cài vào ứng dụng Claude (không cần terminal)
- Tải tệp ZIP bằng nút bên dưới.
- Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
- Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
Cài vào Claude Code
Để Claude làm — dán câu dưới đây vào Claude Code
Hãy cài skill mình tìm thấy trên Claude Skill Mart. Copy thư mục .agent/skills/remotion-best-practices từ repo GitHub Karanjot786/agent-skills-cli vào ~/.claude/skills/remotion-best-practices/ của mình. Sau khi cài xong, cho mình biết skill này làm được gì trong một câu.
Cài bằng lệnh thủ công
git clone https://github.com/Karanjot786/agent-skills-cli.git /tmp/agent-skills-cli && mkdir -p ~/.claude/skills && cp -r /tmp/agent-skills-cli/.agent/skills/remotion-best-practices ~/.claude/skills/⚠ Đây là skill do người khác tạo. Hãy kiểm tra repo gốc trước khi cài.
- Mở Terminal.
- Tải repo:
git clone https://github.com/Karanjot786/agent-skills-cli.git - Tạo thư mục skill:
mkdir -p ~/.claude/skills - Sao chép cả thư mục (để có luôn
rules/):cp -r agent-skills-cli/.agent/skills/remotion-best-practices ~/.claude/skills/ - Kiểm tra:
ls ~/.claude/skills/remotion-best-practices/rulesphải thấy các tệp .md quy tắc. - Khởi động lại Claude Code, rồi thử yêu cầu như "viết component phụ đề Remotion" để skill tự được kích hoạt.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT