Agent skill · design visual · github
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.
Why this skill is useful
Provides specific rules and a reference implementation for image annotation using PIL, which the AI wouldn't reliably generate on its own.
What it needs
Requires pillow installed locally. About 10k tokens when loaded. Last updated 2026-08-07. 37,534 stars on the source repository.
What this skill does
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 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.loaddefault() Size 36 for annotations on ~1400px-wide images strokewidth=1 with strokefill=<same color as fill> — gives body without being too thick Do NOT use white stroke — looks like a bad glow effect Shapes Prefer rounded rectangles over circles/ellipses — less pixelation at edges draw.roundedrectangle([x1, y1, x2, y2], radius=14, outline=color, width=5) Padding 18px around the target content Reference Snippet Algorithmic Annotation — annotate.py For images with multiple elements to annotate, use the annotate.py module below. Save it next to your script and import from it. It handles automatic label placement without overlapping. Quick start elem: (x1, y1, x2, y2) tight bounding box — must be exact pixel coordinates label: text label (supports \n for multi-line) drawbox: if True, draws a rounded rectangle around the element. If False (default), draws a V-arrowhead pointing at the element debug: shows targeting rectangles and candidate heatmap for placement validation Coordinate grid helper Always use gridimage() before annotating an unfamiliar image. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills github/image-annotations