Claude Skill MartKhám phá skillSkill là gì?
 
← Về danh sách

Trình tạo GIF Demo CLI

Chỉ cần đưa danh sách lệnh, skill sẽ dùng VHS ghi lại terminal và xuất ra ảnh GIF động sẵn dùng cho README.

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

Skill này làm gì

  • Tự sinh file tape của VHS từ danh sách lệnh bạn cung cấp rồi ghi thành GIF động.
  • Cho phép tùy chỉnh theme, cỡ chữ, kích thước terminal, tiêu đề; tự tăng thời gian chờ cho lệnh nặng như install, build, test.
  • Hỗ trợ demo tự khởi tạo: dùng Hide/Show để dọn trạng thái cũ và chuẩn bị môi trường mà người xem không thấy.
  • Lọc log ồn ào bằng regex và xử lý giới hạn parser của VHS (không nhận $, dấu nháy kép, backtick) bằng cách mã hóa base64.
  • Tăng tốc GIF bằng gifsicle mà không cần ghi lại; trích frame bằng ffmpeg để kiểm tra nội dung.
  • Có chế độ batch từ file YAML để tạo nhiều GIF một lượt và chế độ ghi trực tiếp qua asciinema.

Phù hợp với ai

  • Người bảo trì dự án mã nguồn mở muốn chèn demo động vào README.
  • Lập trình viên phải ghi lại cùng một demo sau mỗi bản phát hành (tape file giúp tái lập chính xác).
  • DevRel / người viết tài liệu kỹ thuật cần minh họa cách dùng công cụ nội bộ.
  • Ai đã mệt với việc quay lại video màn hình chỉ vì đánh sai một lệnh.

Ví dụ sử dụng

  1. Demo cài đặt package: -c "npm install my-package" -c "npm run build" -o demo.gif là có ngay GIF cho README.
  2. Luôn ghi từ trạng thái sạch: thêm --bootstrap "npm uninstall my-package 2>/dev/null" --speed 2 để ẩn bước dọn dẹp và xuất GIF nhanh gấp đôi.
  3. Tạo hàng loạt: khai báo các demo cài đặt / sử dụng / nâng cao trong demos.yaml rồi chạy batch_generate.py để xuất tất cả vào ./gifs.

· · · Hướng dẫn cài đặt · · ·

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 cli-demo-generator từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/cli-demo-generator/ 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/daymade/claude-code-skills.git /tmp/claude-code-skills && cp -r /tmp/claude-code-skills/cli-demo-generator ~/.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 và cài VHS: brew install charmbracelet/tap/vhs (trên Linux hãy tải binary từ GitHub Releases hoặc dùng package manager).
  2. Cài các công cụ tùy chọn: brew install gifsicle ffmpeg asciinema (tăng tốc GIF, kiểm tra frame, ghi trực tiếp).
  3. Nếu dùng chế độ batch YAML: pip3 install pyyaml.
  4. Clone repo skill: git clone https://github.com/daymade/claude-code-skills.git
  5. Copy thư mục skill vào Claude Code: mkdir -p ~/.claude/skills && cp -r claude-code-skills/cli-demo-generator ~/.claude/skills/
  6. Khởi động lại Claude Code và yêu cầu ví dụ: "tạo GIF demo cho CLI của tôi" — skill sẽ tự được gọi.
  7. Kiểm tra file demo.gif được tạo; nếu chữ bị ngắt dòng, tăng --width hoặc giảm --font-size.
Xem mã nguồn trên GitHub ↗Giấy phép: MIT