Skip to content
cccskills
FreePublished on GitHub

tutorial-generator

スクリーンショットからGemini Vision APIで操作チュートリアルを自動生成する。「操作マニュアルを作って」「スクショから手順書を生成」「使い方ガイドを作成」等で発動。

The English summary is being prepared. Showing the original description.

Works withGemini
See how to install

Files included (5)

  • SKILL.md1.8 KB
  • agents/openai.yaml152 B
  • scripts/generate_tutorial.py6.5 KB
  • SKILL.en.md1.8 KB
  • SKILL.es.md2.0 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

Tutorial Generator

Analyze screenshots and generate step-by-step operation instructions.

Workflow

  1. Provide screenshot of the UI/screen
  2. Gemini Vision analyzes visible elements (buttons, forms, menus)
  3. Generates structured tutorial with actionable steps
  4. Outputs HTML tutorial with embedded image

Usage

python scripts/generate_tutorial.py "{screenshot_path}" --output "{output_path}"

Parameters

ParameterRequiredDefaultDescription
screenshot_pathYes-Path to screenshot
--outputNoautoOutput HTML path
--contextNo-Additional context about the screen

Output Format

Generated HTML includes:

  • Screen overview (what this screen is for)
  • Original screenshot
  • Numbered operation steps
  • Element locations and descriptions
  • Tips and warnings

Example

# Basic usage
python scripts/generate_tutorial.py "login_screen.png"

# With context
python scripts/generate_tutorial.py "settings.png" --context "User settings page for changing password"

# Specify output
python scripts/generate_tutorial.py "dashboard.png" --output "docs/tutorials/dashboard_guide.html"

Requirements

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

Reviews

No reviews yet. Tell others what you thought.

Comments

No login needed. Share how it worked for you, ask a question, or note where it did not run.

No comments yet. Be the first to write one.

Comments are published right away. Do not include personal information such as email addresses or phone numbers. Up to 2 URLs.

0 / 1,000 characters

This form is protected by reCAPTCHA, and the Google Privacy Policy and Terms of Service apply.

More skills from this repository

A/Bテストや実験の設計・実装を支援するスキル。 「A/Bテストを設計して」「スプリットテストしたい」「仮説を立ててテストしたい」「バリアントを比較」等のリクエストで発動。 トラッキング実装は analytics-tracking を参照。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

マルチエージェントシステムのアーキテクチャ設計ツールキット。 「エージェントを設計して」「マルチエージェント構成」「エージェントのアーキテクチャ」「オーケストレーション設計」等のリクエストで発動。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

ai-agent-campのローカル環境セットアップを確認するスキル。 「セットアップ確認」「環境チェック」「初期設定できてる?」「インストール確認」「依存関係チェック」等のリクエストで発動。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

ai-agent-campのスラッシュコマンドをCodexでルーティングするスキル。 「/start-0-1を実行」「スラッシュコマンドを使いたい」「コマンドルーティング」「Cursorのコマンドを使いたい」等のリクエストで発動。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

ai-agent-campの環境変数・認証情報を安全に管理するスキル。 「APIキーを設定」「.envを管理」「環境変数の設定」「credential managerを使いたい」「秘密情報の管理」等のリクエストで発動。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

ai-agent-campリポジトリの案内・オリエンテーションスキル。 「リポジトリ案内」「次のレッスンは?」「どこから始める」「ツールの違い」「aiagent概要」等のリクエストで発動。

The English summary is being prepared. Showing the original description.

minicoohei/ai-agent-camp346Updated Oct 7, 2026

See all skills by minicoohei

Report a problem with this skill