Skip to content
Documentation
Skill

/screenshot-analyzer

スクリーンショットからエラー診断や操作チュートリアルを自動生成するスキル。 「スクショを分析して」「画面のエラーを調べて」「操作手順を作って」等のリクエストで発動。

From plugin
ai-agent-camp
345193 skills8 agents200 commands
Install
$ npx -y skills add minicoohei/ai-agent-camp --skill screenshot-analyzer --agent claude-code

How it fires

How this skill gets triggered: by you, by Claude, or both.

  • Fires itselfAuto-invocation. Claude auto-loads it when your prompt matches the work.Auto-invocation is when the right skill fires by itself at the right moment, driven by a FLOW.md router and a hook, instead of you invoking it by name. It is the difference between a skill being installed and a skill actually getting used.Read the full definition →
  • You can call itInvoke it directly when you want it.
  • Slash command/screenshot-analyzer

Context preview

The summary Claude sees to decide when to auto-load this skill.

スクリーンショットからエラー診断や操作チュートリアルを自動生成するスキル。 「スクショを分析して」「画面のエラーを調べて」「操作手順を作って」等のリクエストで発動。

SKILL.md

screenshot-analyzer.SKILL.md
name: screenshot-analyzer
description: "スクリーンショットからエラー診断や操作チュートリアルを自動生成するスキル。 「スクショを分析して」「画面のエラーを調べて」「操作手順を作って」等のリクエストで発動。"
triggers:
  - スクショを分析して
  - 画面のエラーを調べて
  - 操作手順を作って
  - スクリーンショット解析
  - エラー画面を診断
  - screenshot-analyzer
  - screenshot analysis

Screenshot Analyzer

Analyze screenshots for error diagnosis or operation tutorial generation.

Modes

1. **Analyze**: Detect errors, identify causes, suggest solutions 2. **Tutorial**: Generate step-by-step operation guides with annotations

Usage

# Error analysis (default)
python scripts/analyze.py "{screenshot}" --mode analyze

# Tutorial generation
python scripts/analyze.py "{screenshot}" --mode tutorial

Parameters

| Parameter | Required | Default | Description | |-----------|----------|---------|-------------| | screenshot | Yes | - | Path to screenshot | | --mode, -m | No | analyze | Mode: analyze or tutorial | | --output, -o | No | auto | Output HTML path | | --no-annotate | No | false | Skip annotation generation |

Output

Analyze Mode

  • Screen description
  • Error detection (message, type, location)
  • Root cause analysis
  • Solution suggestions (NextStep)

Tutorial Mode

  • Screen overview
  • Numbered operation steps
  • Annotated screenshots per step
  • Tips and warnings

Examples

# Analyze error screenshot
python scripts/analyze.py "error_console.png"

# Generate tutorial
python scripts/analyze.py "settings_menu.png" --mode tutorial

# Specify output
python scripts/analyze.py "login.png" --mode tutorial --output "docs/login_guide.html"

# Skip annotations
python scripts/analyze.py "error.png" --no-annotate

Requirements

  • GEMINI_API_KEY or GOOGLE_API_KEY in environment
  • Python packages: google-genai, Pillow, python-dotenv

Overview

スクリーンショットからエラー診断や操作チュートリアルを自動生成するスキルです。Gemini Vision APIでUI要素を認識し、エラーの原因分析・解決策提案、またはステップバイステップの操作ガイドを出力します。

Troubleshooting

| エラー | 解決方法 | |--------|---------| | API key not found | `GEMINI_API_KEY` または `GOOGLE_API_KEY` を環境変数に設定 | | Analysis returned empty results | スクリーンショットが不鮮明な可能性。より高解像度の画像を使用 |

Success Criteria

  • [ ] analyzeモード: エラー内容と解決策が出力されている
  • [ ] tutorialモード: ステップ番号付きの操作ガイドが出力されている
  • [ ] 出力HTMLファイルが正しく生成されている
Read more
Ships withai-agent-camp

AI Agent Training for Non-Engineers - Complete Guide to Claude Code / Cursor / Codex ### ⚠️ Before you clone Official repository (maintained by the authors): Running AI agents from this repo grants them shell, file-write, and external-API permissions on your

Get the whole plugin

Other skills on ai-agent-camp.