gh-image – skill Thiết kế & UI cho agent AI
Tải ảnh local lên GitHub và lấy URL nhúng user-attachments chuẩn; dùng khi được yêu cầu đính kèm ảnh chụp màn hình vào PR, issue hoặc comment, hoặc nhúng ảnh trước/sau vào README.
Cài skill gh-image bằng một lệnh
Chọn công cụ bạn đang dùng, copy lệnh và dán vào terminal. Skill sẽ nằm trong thư mục skills của công cụ đó và sẵn sàng dùng ở phiên làm việc tiếp theo.
Claude Code
mkdir -p ~/.claude/skills && curl -fsSL https://skill.dn1nguoi.com/z/gh-image-00220.tgz | tar xz -C ~/.claude/skills
Gọi trong Claude Code: /gh-image – rồi mô tả công việc bạn muốn làm.
Codex
mkdir -p ~/.codex/skills && curl -fsSL https://skill.dn1nguoi.com/z/gh-image-00220.tgz | tar xz -C ~/.codex/skills
Gọi trong Codex: $gh-image – rồi mô tả công việc bạn muốn làm.
Hermes Agent
mkdir -p ~/.hermes/skills && curl -fsSL https://skill.dn1nguoi.com/z/gh-image-00220.tgz | tar xz -C ~/.hermes/skills
Gọi trong Hermes Agent: /gh-image – rồi mô tả công việc bạn muốn làm.
DeepSeek
mkdir -p ~/.deepcode/skills && curl -fsSL https://skill.dn1nguoi.com/z/gh-image-00220.tgz | tar xz -C ~/.deepcode/skills
Gọi trong DeepSeek: /gh-image – rồi mô tả công việc bạn muốn làm.
Nội dung SKILL.md
Nội dung SKILL.md gốc bằng tiếng Anh.
Upload images to GitHub (gh-image)
GitHub has no public API for image uploads — the web UI uses an internal
endpoint that mints user-attachments URLs scoped to the repo's visibility.
[gh-image](https://github.com/drogers0/gh-image) (MIT, © drogers0) replicates
that flow as a gh CLI extension, so an agent can upload a local image from the
terminal and get a ready-to-embed Markdown image line back.
Overview
This skill drives gh-image to turn a local image file into a hosted GitHub
user-attachments URL, then embeds that URL into a pull request, issue, or
comment. It is the missing "attach a screenshot" capability for terminal agents.
When to Use This Skill
Use this skill when asked to:
- "Attach a screenshot to the PR" or "add an image to the PR description"
- "Put this image in the issue" / "comment with these screenshots"
- "Show the test results / before-and-after in the PR"
- Embed any local image into GitHub Markdown without leaving the terminal
How It Works
Step 1: Verify prerequisites
gh auth status # gh installed & authenticated
gh extension list | grep -q 'drogers0/gh-image' \
|| gh extension install drogers0/gh-image # review/pin the extension source firstgh-image does not use the gh token for the upload (that endpoint rejects
tokens). It needs a GitHub user_session cookie, resolved in this order:
--token <value> flag → GH_SESSION_TOKEN env var (use in CI/headless) → a
logged-in browser's cookie store (default for local use).
Before upload, verify the intended repository, image privacy and explicit transfer scope. Browser cookie access requires the user’s authorization for that credential source; do not scrape unrelated browser profiles or pass a session value via --token. Internal attachment endpoints and visibility behavior can change: do not treat an unguessable URL or a private repository alone as proof of attachment confidentiality. Verify access with the intended audience and use a different approved sharing method when confidentiality cannot be established.
Step 2: Upload
# Use an absolute path; --repo is optional inside a repo working dir.
gh image "/abs/path/screenshot.png" --repo <owner>/<repo>gh image prints Markdown to stdout, one line per image:
Capture that output — it is the embeddable reference.
Step 3: Embed into the PR / issue / comment
MD="$(gh image "/abs/path/shot.png" --repo owner/repo)"
BODY="$(gh pr view <pr> --repo owner/repo --json body -q .body)"
printf '%s\n\n## Screenshots\n\n%s\n' "$BODY" "$MD" \
| gh pr edit <pr> --repo owner/repo --body-file -Use gh pr comment, gh issue edit, or gh issue comment with --body-file -
for other targets. Always pass --body-file - (not inline --body) so multi-line
bodies and special characters can't break shell quoting.
Step 4: Verify
gh pr view <pr> --repo owner/repo --json body -q .body # confirm URL presentExamples
- Attach a CleanShot screenshot to PR #42: upload the file, append it under a
## Screenshots heading in the PR body.
- Embed before/after images in a README: upload both, paste the two Markdown
lines into the README at the relevant section.
Best Practices
- Resolve globs to absolute paths first; quote paths with spaces/Unicode.
- For display sizing, embed an HTML tag instead of bare Markdown:
<img width="800" src="https://github.com/user-attachments/assets/<uuid>" />.
- In CI, set
GH_SESSION_TOKENfrom a dedicated bot account.
Limitations
- Session cookie required. A
user_sessioncookie grants full account access
(not scoped like a PAT) — treat it like a password; use a bot account in CI.
- Write access to the target repo is required; orgs that enforce SAML SSO need
the session authorized at https://github.com/orgs/<org>/sso first.
- Attachment access must be verified: do not promise private-repository attachment confidentiality from URL shape alone; check the current GitHub behavior and actual audience before uploading sensitive content.
- Windows + Chrome 127+ cannot read cookies (library limitation) — use another
browser or GH_SESSION_TOKEN.
- The skill embeds the Markdown itself;
gh-imageonly prints the URL.
Skill liên quan
- glassmorphism – Hướng dẫn triển khai Glassmorphism cho web và ứng dụng. Kích hoạt khi người dùng muốn…
- gpt-taste – Dùng khi tạo các trang frontend nặng GSAP theo cấu trúc AIDA nghiêm ngặt, typography…
- gradient-design – Hướng dẫn triển khai Web và App cho Gradient Design. Kích hoạt khi người dùng muốn dùng…
- graphql-architect – Làm chủ GraphQL hiện đại với federation, tối ưu hiệu năng và bảo mật cấp doanh nghiệp…
- grill-me – Một buổi phỏng vấn không khoan nhượng để mài sắc kế hoạch hoặc thiết kế.
- grill-with-docs – Một buổi phỏng vấn không khoan nhượng để mài sắc kế hoạch hoặc thiết kế, đồng thời tạo…
- grilling – Phỏng vấn người dùng không khoan nhượng về kế hoạch hoặc thiết kế. Dùng khi người dùng…
- haskell-pro – Thiết kế và review kiểu dữ liệu Haskell, logic miền thuần túy, phân tích cú pháp…