Agent skill

gist-image

Use when you need to host images (screenshots, diagrams, PNGs) on GitHub for use in PR descriptions, issues, or markdown docs. Solves the problem that `gh gist create` rejects binary files.

View SKILL.md on GitHub Repository
Stars 0
Forks 1

Install this agent skill to your Project

npx add-skill https://github.com/idvorkin/chop-conventions/tree/main/skills/gist-image

SKILL.md

Gist Image Upload

Host binary images on GitHub via gists. Gists are git repos — you can clone them and push binary files that the web UI and CLI reject.

Setup

Ensure .tmp/ is gitignored in the project (gist clones live here):

bash
grep -q '^\.tmp/' .gitignore 2>/dev/null || echo '.tmp/' >> .gitignore

Quick Reference

bash
GIST_NAME="pr-135-screenshots"  # descriptive name for this batch

# 1. Create gist with placeholder
GIST_URL=$(gh gist create --desc "$GIST_NAME" - <<< "# $GIST_NAME" 2>&1 | grep gist.github.com)
GIST_ID=$(basename "$GIST_URL")
GH_USER=$(gh api user --jq '.login')

# 2. Clone into .tmp/<name>, add images, push
git clone "$GIST_URL" ".tmp/$GIST_NAME"
cp /path/to/*.png ".tmp/$GIST_NAME/"
cd ".tmp/$GIST_NAME" && git add *.png && git commit -m "add images" && git push && cd -

# 3. Use raw URLs (permanent as long as gist exists)
# https://gist.githubusercontent.com/$GH_USER/$GIST_ID/raw/FILENAME.png

URL Format

https://gist.githubusercontent.com/{user}/{gist_id}/raw/{filename}

GitHub serves these with correct content-type: image/png headers, so they render inline in markdown:

markdown
![Screenshot](https://gist.githubusercontent.com/user/abc123/raw/screenshot.png)

Grouping Images per PR

Put all images for a PR in a single gist. Name the gist after the PR for traceability:

bash
GIST_NAME="pr-135-row-selection"
# Follow Quick Reference steps above with this name
# All screenshots end up in .tmp/pr-135-row-selection/

One gh gist delete removes them all. One rm -rf .tmp/pr-135-row-selection cleans up locally.

Updating PR Descriptions

bash
gh api repos/OWNER/REPO/pulls/NUMBER -X PATCH -f body="
## Screenshots
![feature](https://gist.githubusercontent.com/$GH_USER/$GIST_ID/raw/feature.png)
"

Cleanup

bash
gh gist delete $GIST_ID --yes
rm -rf ".tmp/$GIST_NAME"

Common Mistakes

  • Forgetting to push — images only exist locally until you git push
  • Using gist web URL instead of raw — gist.github.com/... shows the HTML page, not the image. Use gist.githubusercontent.com/.../raw/...
  • Creating public gists for private repos — use gh gist create without --public (default is secret)
  • Forgetting cd - — always return to the project root after pushing to the gist clone

Recommended Agent Skills

Expand your agent's capabilities with these related and highly-rated skills.

idvorkin/chop-conventions

up-to-date

Sync git repository with upstream. Use at the start of a session, when asked to sync, get up to date, check git status, or when working on a stale branch.

0 1
Explore
idvorkin/chop-conventions

image-explore

Brainstorm multiple visual directions for a blog image, generate them in parallel, build a comparison page, and optionally publish as a shareable link (Surge.sh or gist).

0 1
Explore
idvorkin/chop-conventions

build-bd

0 1
Explore
idvorkin/chop-conventions

background-usage

Check Claude Code plan usage via a hidden tmux session. Reports weekly usage percentage, time until reset, and pacing status.

0 1
Explore
idvorkin/chop-conventions

ammon

What time is it for Ammon? Looks up the current time in Denmark (Europe/Copenhagen timezone) and reports it.

0 1
Explore
idvorkin/chop-conventions

showboat

Create executable demo documents with screenshots using Showboat + Rodney. Use when the user wants to document an app, create a visual walkthrough, take screenshots of a deployed site, run an accessibility audit, or build self-verifying documentation.

0 1
Explore

Didn't find tool you were looking for?

Be as detailed as possible for better results