Screenshot Annotator
Documentsscreenshot-annotatorScreenshot Annotator is an Agent Skill for documents published in the majiayu000/claude-skill-registry repository on GitHub: a SKILL.md instruction file an AI agent can load to do this task.
Add manual-style annotations (red boxes, arrows, callouts, highlights) to screenshots for technical documentation. Use when creating user manuals, tutorials, or guides that need visual indicators pointing to UI elements.
QUICK START
How to use this skill
Bring this guide into your coding agent with a prompt tailored to the tool you use.
- Open your project in Codex.
- Copy and paste the prompt below.
- Review files and risks before approving any action.
Prompt to paste
Inspect the Agent Skill at https://github.com/majiayu000/claude-skill-registry/blob/HEAD/skills/data/screenshot-annotator/SKILL.md and all supporting files. Report provenance, permissions, scripts, dependencies, and security risks. Propose an exact installation into .agents/skills/screenshot-annotator, but wait for my approval before writing files or running scripts.
Copying this prompt does not install or run the skill. Review third-party files before use.
Screenshot Annotator
Add annotations to screenshots without modifying the original image. Annotations are overlaid on top.
Workflow
- Analyze the screenshot to identify the target element
- Generate annotation overlay using Gemini Vision API
- Output annotated image as a separate file
Usage
python scripts/annotate.py "{image_path}" "{instruction}" --style "{style}" --text "{label}" --output "{output_path}"
Parameters
| Parameter | Required | Default | Description |
|---|---|---|---|
| image_path | Yes | - | Path to screenshot |
| instruction | Yes | - | What to annotate (e.g., "the Login button") |
| --style | No | red_box | Annotation style |
| --text | No | - | Text label to add |
| --output | No | auto | Output path |
Styles
| Style | Description |
|---|---|
| red_box | Red rectangle + arrow (default) |
| arrow | Red arrow pointing to element |
| callout | Speech bubble with text |
| highlight | Semi-transparent yellow overlay |
| circle | Red circle around element |
| number | Numbered marker for steps |
Examples
# Basic annotation
python scripts/annotate.py "login.png" "the Login button"
# With text label
python scripts/annotate.py "settings.png" "the gear icon" --text "Click here"
# Callout style
python scripts/annotate.py "form.png" "email field" --style callout --text "Enter your email"
Requirements
- GEMINI_API_KEY or GOOGLE_API_KEY in environment
- Python packages: google-genai, Pillow, python-dotenv