| name | screenshot-annotator |
| description | スクリーンショットに赤枠・矢印・吹き出し等の注釈を自動追加するスキル。 「スクショに注釈を付けて」「画面に矢印を追加」「マニュアル用の注釈」等のリクエストで発動。 |
| triggers | ["スクショに注釈を付けて","画面に矢印を追加","マニュアル用の注釈","赤枠を付けて","吹き出しを追加","screenshot-annotator","annotate screenshot"] |
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
python scripts/annotate.py "login.png" "the Login button"
python scripts/annotate.py "settings.png" "the gear icon" --text "Click here"
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
Overview
スクリーンショットに赤枠・矢印・吹き出し・ハイライト等の注釈を自動で追加するスキルです。技術ドキュメント、ユーザーマニュアル、チュートリアル作成に最適。
Troubleshooting
| エラー | 解決方法 |
|---|
| API key not found | GEMINI_API_KEY または GOOGLE_API_KEY を環境変数に設定 |
| Element not found in screenshot | instruction をより具体的に記述（例: "左上の歯車アイコン"） |
Success Criteria
