Claude Skill MartKhám phá skillCâu dùng ngayHọc qua videoDùng terminalSkill là gì?
 
← Về danh sách

Remotion Motion Graphics

Kỹ năng giúp Claude dựng video motion graphics chuyên nghiệp bằng Remotion (React) và tự kiểm tra từng frame trước khi giao.

Ảnh · VideoTrung cấp★ 137⑂ 13Điểm AI 9/10Cập nhật lần cuối: 12 thg 8, 2026

Làm được gì

  • Khởi tạo dự án Remotion mới hoặc đọc và refactor dự án có sẵn theo bộ quy tắc thiết kế chuyển động.
  • Ngăn kiểu "video do AI làm": cấm easing linear, cấm fade đơn lẻ, bắt buộc stagger 3–6 frame, exit nhanh hơn entrance.
  • Áp dụng kiến trúc 5 lớp: background mesh → asset → graphic/typography → color grade → grain + vignette; kèm Ken Burns cho ảnh tĩnh và OffthreadVideo cho video.
  • Bắt buộc vòng lặp kiểm tra: render → trích frame ra PNG → xem bằng mắt → sửa → render lại, với checklist lỗi thường gặp (lỗi khoảng cách em, chữ tràn viền, sai thứ tự lớp).
  • Hướng dẫn xử lý sự cố render: Chromium tải lỗi, dùng headless_shell, ffprobe lấy fps/độ dài clip.

Dành cho ai

  • Lập trình viên React/frontend muốn làm video bằng code.
  • Marketer, creator cần Reels/Shorts, video ra mắt sản phẩm, intro/logo animation đều đặn.
  • Người từng nhờ AI dựng video nhưng kết quả luôn nhìn nhàm và "generic".

Ví dụ sử dụng

  1. "Làm Reel 15 giây 1080×1920 giới thiệu sản phẩm theo màu thương hiệu" → tạo theme, dựng scene, render và soi frame.
  2. "Thêm caption theo lời nói, color grade và intro cho public/clip.mp4" → đặt clip làm lớp asset rồi xếp graphic/grain lên trên.
  3. "Dự án Remotion cũ của tôi trông rất amateur" → đọc toàn bộ src/, thay easing linear bằng spring, thêm stagger và đủ 5 lớp.

· · · 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/haidrrrry/claude-remotion-skill/HEAD/remotion-motion-graphics/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)
  1. Tải tệp ZIP bằng nút bên dưới.
  2. Trong Claude, mở Settings → Capabilities và bật 'Code execution and file creation'. (chỉ một lần)
  3. Vào Customize → Skills → + → 'Upload a skill' rồi tải tệp ZIP lên.
↓ Tải ZIP
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 remotion-motion-graphics từ repo GitHub haidrrrry/claude-remotion-skill vào ~/.claude/skills/remotion-motion-graphics/ 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/haidrrrry/claude-remotion-skill.git /tmp/claude-remotion-skill && mkdir -p ~/.claude/skills && cp -r /tmp/claude-remotion-skill/remotion-motion-graphics ~/.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.

  1. Kiểm tra Node.js (>= 18) và npm: node -v
  2. Clone repo kỹ năng: git clone https://github.com/haidrrrry/claude-remotion-skill.git
  3. Sao chép vào thư mục skill của Claude: mkdir -p ~/.claude/skills && cp -r claude-remotion-skill/remotion-motion-graphics ~/.claude/skills/
  4. Kiểm tra trong ~/.claude/skills/remotion-motion-graphics có đủ references/ và assets/theme.ts.
  5. Khởi động lại Claude Code, rồi yêu cầu ví dụ "tạo video Reel cho sản phẩm" — kỹ năng sẽ tự kích hoạt.
  6. Lần render đầu Remotion sẽ tải Chromium; nếu mạng chặn, hãy chỉ đường dẫn Chromium sẵn có qua --browser-executable như hướng dẫn trong SKILL.md.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT