image-annotations
Annotate screenshots, diagrams, and images with callout rectangles, arrows, labels, and color-coded highlights using PIL. Includes rules for animated GIF annotations with timing and pacing.
Profile →npx skills add github/awesome-copilot --skill image-annotations --agent copilot
Same command for any agent — swap --agent for claude-code, codex, cursor.
Weekly change comes from our own snapshots, not the repository page — it measures attention, not adoption.
What it does
Annotate screenshots, diagrams, and images with callout rectangles, arrows, labels, and color-coded highlights using PIL. Includes rules for animated GIF annotations with timing and pacing.
How it works
The skill provides a workflow to annotate images:
- Install Pillow via pip as prerequisite.
- Define color rules, font settings, and shape guidelines for annotations (rounded rectangles, padding, stroke details).
- Draw a callout around target content using rounded rectangles, lines, and labels with consistent color and typography.
- Offer an algorithmic annotation path via an annotate.py module that places labels automatically to avoid overlap, using a set of steps: grid placement, candidate generation, scoring based on contrast, proximity, and line-of-sight, and greedy placement to maximize overall readability.
- Provide a complete example and a reference snippet demonstrating how to use PIL to draw annotations, including how to position labels and callouts relative to target elements.
- For multiple elements, use annotate_image(image_path, annotations, ...) which computes padding, bounding regions (cyan), label sizing, and candidate annotations, then renders the final image with colored annotations.
When to use it
Use this skill when you need to:
- Highlight a specific area in a screenshot for a PR description
- Annotate before/after images to show what changed
- Add labels and callouts to diagrams or architecture images
- Create annotated frames for animated GIF demos
What it can touch
- The tool uses PIL/Pillow to modify images in memory and save annotated outputs. It references file-based resources for fonts and input images. The example module annotate.py is intended to be saved alongside the script and imported.
Caveats
- Prerequisites include: pip install Pillow -q
- Font handling differs by platform: on Windows it uses Ink Free font path; on Linux/macOS it falls back to load_default().
- Stroke, padding, and color rules are explicit (e.g., red for bad/removed, orange for highlights) and must be followed as defined in the color rules and shapes sections.
- The algorithm relies on exact pixel coordinates for element bounding boxes and uses a grid and scoring to place labels to minimize overlap, but the behavior is dependent on input data and may not guarantee perfect placements in all cases.
# Image Annotations Add visual callouts to any image — screenshots, diagrams, architecture docs, demo frames — using PIL/Pillow. Highlights what changed or what to look at, so reviewers don't have to guess. ## When to Use This Skill Use this skill when you need to: - Highlight a specific area in a screenshot for a PR description - Annotate before/after images to show what changed - Add labels and callouts to diagrams or architecture images - Create annotated frames for animated GIF demos ## Prerequisites ```bash pip install Pillow -q ``` ## Color Rules - **Red (`#E63946`)** — only for "bad" / "removed" things (e.g., circling a bug being fixed) - **Yellowish-orange (`#FF9F1C`)** — for neutral highlights ("look here", "new feature", etc.) - Never use red just because it's eye-catching — red = bad/removed ## Font - Use **Ink Free** (`C:/Windows/Fonts/Inkfree.ttf`) for a handwritten look on Windows - On Linux/macOS, fall back to `ImageFont.load_default()` - Size **36** for annotations on ~1400px-wide images - `stroke_width=1` with `stroke_fill=<same color as fill>` — gives body without being too thick - Do NOT use white stroke — looks like a bad glow effect ## Shapes - Prefer **rounded
- When to Use This Skill
- Prerequisites
- Color Rules
- Font
- Shapes
- Reference Snippet
- Algorithmic Annotation — annotate.py
- Quick start
- Coordinate grid helper
- Algorithm overview
- Debug mode colors
- Arrow styles
- annotate.py — full module
- Image Diffing
pip install Pillow -q
What does the image-annotations skill do?
Annotate screenshots, diagrams, and images with callout rectangles, arrows, labels, and color-coded highlights using PIL. Includes rules for animated GIF annotations with timing and pacing.
How do I install it?
Run `npx skills add github/awesome-copilot --skill image-annotations --agent claude-code` — it drops the skill into your project so the agent can pick it up. Swap the --agent value for codex, cursor or copilot if you use one of those.
Where does this skill come from?
From github/awesome-copilot, a repository with 37,432 stars. We read it straight from the repository tree rather than a submitted listing, so what you see here is what is actually published.
Is a popular skill a good skill?
Not necessarily. Stars measure attention, not adoption — a repository can trend for a week and be abandoned. That is why we show the weekly change from our own snapshots next to the total, instead of a single flattering number.