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

Terminal Screenshot (ANSI → ảnh PNG)

Chuyển output màu của công cụ dòng lệnh thành ảnh PNG để Claude thật sự "nhìn thấy" màu sắc, độ tương phản và cách căn lề trong terminal.

Lập trìnhTrung 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ì

Bình thường Claude chỉ nhận được văn bản thuần cùng các mã escape thô như \x1b[48;2;92;30;34m, chứ không thấy màu đã render. Vì vậy không thể trả lời trung thực câu hỏi "độ tương phản dòng thêm/xóa trong diff có đủ rõ chưa?" hay "theme này có quá tối không?".

Skill giải quyết bằng hai bước tách biệt:

  1. Capture: chạy lệnh trong shell thật với --color=always, CLICOLOR_FORCE=1 hoặc script -q /dev/null để lưu file .ansi giữ nguyên toàn bộ màu.
  2. Render: dùng scripts/render_ansi.sh để tạo PNG (ưu tiên freeze, nếu không có thì dùng ansi2html.py + Chrome headless), rồi đọc ảnh bằng công cụ Read để đánh giá màu.

Nguyên tắc quan trọng nhất: đừng để renderer tự chạy lệnh (freeze --execute "git diff | delta"), vì delta chạy trong pty con sẽ tự bỏ khối màu nền và cột số dòng. Ngoài ra phải truyền đúng màu nền terminal thật (ví dụ #282c34) để đánh giá tương phản chính xác.

Phù hợp với ai

  • Lập trình viên hay tinh chỉnh màu cho delta, bat, eza, starship, pager của lazygit.
  • Người muốn kiểm chứng theme sáng/tối và độ dễ đọc dựa trên hình ảnh thật, không đoán theo mã hex.
  • Ai cần debug lỗi highlight hoặc căn lề của công cụ CLI cùng Claude.

Ví dụ sử dụng

  • Kiểm tra thay đổi màu delta: git --no-pager diff | delta --dark --line-numbers --width=110 > /tmp/diff.ansi rồi render_ansi.sh /tmp/diff.ansi /tmp/diff.png "#282c34" và xem ảnh để đánh giá tương phản thêm/xóa.
  • So sánh theme của bat: capture cùng một file với nhiều theme, render ra PNG và chọn theme dễ đọc nhất.
  • Kiểm tra màu diff của lazygit: TUI toàn màn hình không capture được, nên render riêng git diff | delta (lazygit dùng chung cấu hình delta) để xác minh gián tiếp.

· · · 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 daymade-claude-code/terminal-screenshot từ repo GitHub daymade/claude-code-skills vào ~/.claude/skills/terminal-screenshot/ 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 && mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-claude-code/terminal-screenshot ~/.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à clone repo: git clone https://github.com/daymade/claude-code-skills.git
  2. Copy skill vào thư mục skill của Claude: mkdir -p ~/.claude/skills && cp -r claude-code-skills/daymade-claude-code/terminal-screenshot ~/.claude/skills/
  3. Cấp quyền thực thi: chmod +x ~/.claude/skills/terminal-screenshot/scripts/render_ansi.sh
  4. (Khuyến nghị) Cài renderer freeze: brew install charmbracelet/tap/freeze hoặc go install github.com/charmbracelet/freeze@latest. ⚠️ Không dùng brew install freeze vì đó là một app GUI trùng tên.
  5. Nếu không cài được freeze, chỉ cần có Chrome/Chromium — script sẽ tự chuyển sang ansi2html.py + Chrome headless.
  6. Ghi lại màu nền terminal của bạn, ví dụ với Ghostty: ghostty +show-config --default | grep '^background'.
  7. Khởi động lại Claude Code và yêu cầu ví dụ: "chụp ảnh terminal để kiểm tra màu delta giúp tôi".
Xem mã nguồn trên GitHub ↗Giấy phép: MIT