Skip to content
cccskills
FreePublished on GitHub

dev:video-ref

動画ファイルからアプリの画面遷移リファレンスドキュメントを生成する。video-analyzerスキルのキーフレーム抽出スクリプトでフレームを抽出し、Haikuサブエージェントで並列分析、遷移シーン画像と構造化マークダウン(README.md)を指定ディレクトリに出力する。

使用タイミング:動画からアプリのUIフロー・ユーザーストーリーをステップごとにまとめたリファレンスを作成したい場合。

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

See how to install

Files included (1)

  • SKILL.md4.1 KB

SKILL.md (original)

Review the instructions the agent will receive before you install.

dev:video-ref

動画 → キーフレーム抽出(video-analyzer)→ Haiku並列分析 → スクリーンショット + README.md 生成。

入力確認

ユーザーから以下を確認する(不明な場合のみ質問):

  • VIDEO_PATH — 動画ファイルの絶対パス(必須)
  • OUTPUT_DIR — 出力先(デフォルト: docs/REFERENCE/inspire/{動画名}/)
  • APP_NAME — ドキュメントのタイトル用アプリ名(動画ファイル名から推定可)

Step 1: 依存関係&キーフレーム抽出

Bash call 1 — venv セットアップ(初回のみ)

test -d /tmp/video-env || uv venv /tmp/video-env
source /tmp/video-env/bin/activate && uv pip install opencv-python numpy Pillow

Bash call 2 — キーフレーム抽出(video-analyzerスキルのスクリプトを使用)

source /tmp/video-env/bin/activate && python3 ~/.claude/skills/video-analyzer/scripts/extract_keyframes.py \
  {VIDEO_PATH} \
  --output /tmp/keyframes/{slug}/ \
  --threshold 0.80 \
  --quality 80 \
  --scale 0.5

{slug} は OUTPUT_DIR の末尾ディレクトリ名。抽出後にフレーム総数を確認:

find /tmp/keyframes/{slug}/ -name "*.jpg" | sort | wc -l

Step 2: Haiku 並列分析

バッチ分割

フレーム総数バッチ構成
~20枚1バッチ
21~40枚2バッチ(前半/後半)
41枚以上20枚ずつ分割

単一メッセージで全バッチを並列 Task 呼び出しする(model: haiku)。

Haiku サブエージェントへのプロンプト:

{APP_NAME} アプリのキーフレームを分析してください。

以下のファイルパスを Read ツールで直接読み込む(ディレクトリ列挙は不要):
- /tmp/keyframes/{slug}/frame_XXX.jpg
...(バッチ内の全パスを列挙)

各フレームを分析し、以下の JSON で返す:
{
  "batch": "{バッチ番号}",
  "frames": [
    {
      "frame": "frame_XXX.jpg",
      "screen_type": "画面タイプ",
      "ui_elements": ["要素1", "要素2"],
      "user_action": "推定操作",
      "description": "画面の説明(日本語2-3文)",
      "change_from_previous": "前フレームからの変化(最初はnull)",
      "is_transition_point": true または false
    }
  ]
}

注意: Haiku は ls でディレクトリを列挙できないことがある。プロンプトに全ファイルパスを明示的に列挙すること。

Step 3: 出力ディレクトリ準備&画像コピー

mkdir -p {OUTPUT_DIR}/screenshots

is_transition_point: true のフレーム + frame_001.jpg(開始画面)を screenshots/ にコピー。

Step 4: README.md 生成

{OUTPUT_DIR}/README.md を以下の構造で作成:

# {APP_NAME} アプリ画面分析

概要(動画長・分析日・抽出フレーム数)

---

## ユーザーフロー全体像

(テキストのフロー図)

---

## Step N: {画面タイプ名}

**画面タイプ**: ...

- UI要素・操作の説明

[![Step N](./screenshots/frame_XXX.jpg)](./screenshots/frame_XXX.jpg)

---

末尾に UIデザイン特性まとめ(テーブル)と 参照画像一覧(テーブル)を追加。
画像リンクは [![...](./screenshots/frame_XXX.jpg)](./screenshots/frame_XXX.jpg) 形式(クリックで拡大)。

完了チェック

  • {OUTPUT_DIR}/README.md が存在する
  • {OUTPUT_DIR}/screenshots/ に画像が1枚以上ある
  • README.md 内の全画像リンクが screenshots/ の実ファイルを指している

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

Rebuild a degraded AI image to remove crunchy textures and repeated-edit artifacts while preserving identity, style, and composition. Use for clean remakes, not ordinary retouching or upscaling.

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

セミナー・講義・ウェビナー・研修・実演動画をローカルで文字起こしし、内容を分析して、必要なスライド画像や動画クリップ付きのHTML/Markdown資料を作る。動画から学習資料・実践ガイドを作りたい場合に使う。映像作品の再現設計やCanvas生成は対象外。

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

責務・依存方向・状態や副作用の境界を監査し、既存挙動を保って段階的にリファクタリングする。read-only監査にも対応する。

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

AGENTS.mdや既存スキルをGPT-6 Astra向けに監査・整理するときに使う。契約と意図的な他モデル委譲を保ち、重複、過剰な手順、曖昧な停止条件を修正する。

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

人物の参照写真から、同一性を保った複数アングルのキャラクターシートを生成・修正する。指定された身だしなみや撮影表現も整える。

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

既存キャラクター画像を、承認制でピクセルアートの正準画像へ変換し、3状態パイロット、クロマ前処理、状態間ジオメトリ検証、9状態生成、遷移QA、仮配置、アプリ内確認、ロールバック可能な正式配置まで行う。キャラクターからCodexペットを作る依頼に加え、ジャンプで小さくなる、状態ごとに身長が変わる、足元が跳ねる、クロマ縁が出る、アニメーションを修復したい依頼で使用する。

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

ryryo/dot-claude-dev3Updated Oct 19, 2026

See all skills by ryryo

Report a problem with this skill