screenshot-annotator

Apply red boxes, arrows, and callouts to screenshots using Gemini Vision.

345|12|Updated Apr 14, 2026

Search Tags:#documentation #screenshot #callouts #overlay #annotate #arrows

Ready to run

npx skills add https://github.com/minicoohei/ai-agent-camp --skill screenshot-annotator-minicoohei

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: screenshot-annotator
Source: https://github.com/minicoohei/ai-agent-camp/tree/main/.claude/skills/screenshot-annotator
Command: npx skills add https://github.com/minicoohei/ai-agent-camp --skill screenshot-annotator-minicoohei

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires google-genai, Pillow, python-dotenv, and includes scripts (resource) components.

What problem does it solve?

Annotating screenshots manually for documentation or tutorials is time-consuming and error-prone, especially when you need consistent overlays across many images.

Core Features & Use Cases

Automatically applies overlays such as red boxes, arrows, callouts, and highlights without modifying the original image.
Supports multiple styles and optional text labels to clarify UI elements.
Useful for product docs, developer guides, and UX reviews that require clear visual cues.

Quick Start

Run the annotate.py script with a screenshot path and a target instruction to generate an annotated image.

Frequently Asked Questions about screenshot-annotator

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I automatically annotate screenshots with arrows and callouts for documentation?▼

You can automatically annotate screenshots with arrows and callouts by running the annotate.py script with a screenshot path and target instruction to generate an annotated image. This process uses Gemini Vision to apply overlays like red boxes, arrows, and callouts for documentation.

Does adding overlay annotations modify the original screenshot image?▼

Adding overlay annotations does not modify the original screenshot image. The process produces non-destructive annotated outputs, ensuring your original input images remain unchanged while generating new files with red boxes, arrows, and highlights applied.

Do I need a Gemini API key to apply visual callouts to UI walkthroughs?▼

Yes, you need a Gemini API key to apply visual callouts to UI walkthroughs. The annotation process requires a GEMINI_API_KEY or GOOGLE_API_KEY environment variable to leverage Gemini Vision for consistent visual guidance across images.

Can I use this screenshot annotation method for technical manuals and UX reviews?▼

Yes, you can use this screenshot annotation method for technical manuals and UX reviews. It works across product demos, developer guides, and UX reviews by applying consistent visual cues and optional text labels to clarify UI elements.

What is the best way to add red boxes and highlights to multiple screenshots consistently?▼

The best way to add red boxes and highlights to multiple screenshots consistently is to automate the process using Gemini Vision. By passing target instructions to the annotation script, you ensure predictable overlays and safe parameter validation across all images.