AI Skill MartKhám phá skillLệnhChương trìnhHọcSkill là gì?
 
← Về danh sách

reanimate — Nhân bản & kiểm chứng animation

Sao chép từng khung hình animation từ website, video hay GIF vào codebase của bạn, rồi quay lại và đối chiếu bằng số liệu cho tới khi khớp.

Lập trìnhNâng cao★ 448⑂ 37Điểm AI 9/10Cập nhật lần cuối: 31 thg 10, 2026

Làm được gì

  • Chụp nguồn tham chiếu (URL live, screen recording, mp4/mov/webm, GIF, Lottie, bản export prototype) thành frames, dữ liệu tracking, computed style và danh sách animation đã khai báo.
  • Viết motion spec: mỗi phần tử/thuộc tính một dòng gồm trigger, thời điểm bắt đầu, duration, delay/stagger, from→to, easing.
  • Triển khai đúng stack sẵn có của bạn (đọc package.json, thư viện animation đang dùng), rồi quay lại bản clone với cùng viewport, selector, trigger, fps và so sánh từng frame (diff sheet, sai số timing, mức khớp easing).
  • Lặp 2–5 vòng cho tới khi mọi dòng spec đạt; nếu vẫn lỗi thì báo cáo kèm con số và lý do thay vì âm thầm hạ chuẩn.
  • Hỗ trợ cả canvas, WebGL, WebGPU, three.js: shader source, uniform cố định, scene graph, texture/model, dùng đồng hồ ảo để mọi lần chụp đều giống nhau.

Phù hợp với ai

  • Lập trình viên frontend cần tái hiện hero, marquee, carousel, hiệu ứng scroll từ site tham chiếu.
  • Creative/interaction developer muốn bằng chứng số liệu thay vì "nhìn cũng giống".
  • Nhóm làm GSAP, Framer Motion, CSS motion hoặc scene 3D và hay phải reverse-engineer.

Ví dụ sử dụng

  1. "Làm hero giống trang này" → chụp URL → viết spec → dựng component → kiểm tra sai lệch timing trong ±80 ms.
  2. Khách gửi video, chỉ cần "đoạn 0:12–0:15 của cái toggle" → trích frames đúng khoảng đó, crop widget và dựng lại.
  3. Nhân bản nền particle three.js → đọc shader và uniform từ trace, so sánh từng kênh với đồng hồ ảo và cùng --seed.

· · · 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/NiazMorshed2007/reanimate/HEAD/skills/reanimate/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 AI Skill Mart.
Copy thư mục skills/reanimate từ repo GitHub NiazMorshed2007/reanimate vào ~/.claude/skills/reanimate/ 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/NiazMorshed2007/reanimate.git && mkdir -p ~/.claude/skills && cp -r reanimate/skills/reanimate ~/.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. Mở terminal.
  2. Cài Bun: curl -fsSL https://bun.sh/install | bash (bắt buộc để chạy script).
  3. Clone kho: git clone https://github.com/NiazMorshed2007/reanimate.git
  4. Chép skill: mkdir -p ~/.claude/skills && cp -r reanimate/skills/reanimate ~/.claude/skills/
  5. Khởi động lại Claude Code và kiểm tra reanimate đã xuất hiện trong danh sách skill.
  6. Lần đầu dùng, chạy bash ~/.claude/skills/reanimate/scripts/setup.sh để tải Playwright Chromium và ffmpeg (khoảng 250 MB).
  7. Yêu cầu ví dụ: "clone animation phần hero của URL này vào dự án". Kết quả nằm trong thư mục .reanimate/ của dự án — nên thêm vào .gitignore.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT