app-demo-giflisted

# app-demo-gif ブラウザ UI の README デモ GIF を作る。位置づけはスクリーンショットの1つ上（静止画で伝わらない「操作→結果」の因果を見せる）。ターミナルは VHS、ブラウザは本スキル、と使い分ける。 ## 0. 撮る前に決める（必須・録画より先） 対象リポの README（コアメッセージ）と主要フローを読み、以下を user に提示して���定させる。**指示なしに録り始めない。** 1. **示したいこと1文**: この GIF を見た人に何が伝わればよいか（例: 「フォーム入力が PDF になり、検索で見つかる」）。これが絵コンテの背骨。 2. **絵コンテ**: 場面列挙（例: ログイン → モーダルで入力 → 生成 → 自動プレビュー → 検索ヒット）。「示したいこと」に寄与しない場面は削る。 3. **上限秒数**: 既定 20 秒以下（30 秒を超える案は分割か削減）。 4. **出力仕様**: 既定 960px 幅・10fps・2MB 以下目標（実績: 18.8秒・1.4MB は README 掲載で体感上問題なし）。README のどこに挿すか（通常はコアメッセージ直下）。 ## 1. 録画スクリプトを書く Playwright（sync API）で `docs/record-app-demo.py` を書き、**リポに同梱する**（VHS の .tape 相当。再生成手順をヘッダの docstring に書く）。**`--dry-run` モードを必ず実装する**: 録画せず、場面の切れ目でスクリーンショットだ���撮る（演出用 sleep はスキップ）。実装型は `reference/record-app-demo.py` を参照。 playwright とブラウザが常設済みの環境（home-manager で `PLAYWRIGHT_BROWSERS_PATH` を設定済み等）では直接実行する: ```bash python3 docs/record-app-demo.py ``` 未整備の環境向けフォールバック（スクリプトの docstring にはこちらも書く）: ```bash nix-shell -p python3Packages.playwright playwright-driver.browsers --run \ 'export PLAYWRIGHT_BROWSERS_PATH=$(nix-build "<nixpkgs>" -A playwright-driver.browsers --no-out-link); \ python3 docs/record-app-demo.py' ``` 型（要点のみ。完動する全体は `reference/record-app-demo.py` を参照 — ログイン → モーダル入力 → 生成 → 自動プレビュー → 検索の実例）: ```python browser = p.chromium.launch(headless=False) # 後述の理由でヘッド付き ctx = browser.new_context( viewport={"width": 1280, "height": 800}, record_video_dir="docs/video", record_video_size={"width": 1280, "height": 800}, ) ``` ###