screenci

ScreenCI 動画スキル

ScreenCI プロジェクト（.screenci.ts、screenci.config.ts）で動画や静止画を録画するためのものです。アプリのソースコードだけを変更する場合には使用しません。参照資料を読み込むのは、タスクで必要な場合のみです。

ルーティング：

• URL が指定された場合は、まずそのページを調べます：npx screenci explore <url> --click "<name>"、または長いフローには playwright-cli スキルを使用してください。自分で Playwright スクリプトを書くことは決してしないでください。サインイン済みのアプリでは、playwright-cli state-load screenci/.screenci/auth/default.json を実行します。
• ページのソースが指定された場合、通常は調査する必要はありません。
• レコーダーと調査用ブラウザーは異なります。 playwright-cli では動作する手順が npx screenci test では失敗したり、ボットチェックに引っかかったりする場合、または同梱の Chromium が起動できない場合（NixOS などでシステムライブラリが不足している場合など）は、セレクターではなくブラウザーが原因です。screenci.config.ts に use: { channel: 'chrome' } を設定して、再実行してください。

クイックスタート

• セットアップコード（SC-XXXX-XXXX）がある場合：npx screenci@latest setup SC-XXXX-XXXX を実行し、表示される手順に従います（新規プロジェクトには --name "<project name>"、./screenci が別のプロジェクトに属している場合は --dir <path> を追加します）。すでにセットアップ済みのプロジェクトに対する後続の編集プロンプトで、セットアップをスキップするよう指示される場合は、ワークスペースを直接編集してください。
• それ以外の場合、プロジェクトはすでに存在します：recordings/*.screenci.ts を編集し、スターターの example.screenci.ts を削除します。screenci/ already exists というエラーで init が失敗するのは想定どおりです。再初期化のために削除してはいけません。
• npx screenci context を実行すると、プロジェクトについて把握されている情報（サイト、サインイン、チームのメモ）が表示されます。

規約（すべての動画）

• すべての動画にナレーションを入れます。動画の目的から始め、クリック操作ではなく一連の流れを説明します。詳細は references/narration.md を参照してください。
• 会社としての語り口：製品を提供する会社として、「私たち」「当社」「あなた」を使います。
• モックデータのみを使用し、実際のデータとして見せます。 もっともらしい架空の名前やメールアドレスを使用し、データがモック、サンプル、または架空のものだとは動画内で決して言いません。
• 本番環境で実在するフォームを送信しないでください（注文、支払い、メール、招待、削除、公開、アカウントや請求内容の変更など）。フォームに入力し、送信ボタンに hover() して、入力済みのフォーム画面で終了します。ナレーションで、フォームを送信していないことには触れません。開発、ステージング、テスト環境へのデプロイでは、通常どおり送信してください。
• プロンプトで指定されたページから開始します。 コピーされたプロンプトでページや URL が指定されている場合は、サイトのホームページではなく、そのページを動画の開始位置にします（その URL に page.goto を使用します）。指定がない場合は、依頼されたページから開始してください。読み込み、ナビゲーション、スピナー、Cookie バナーは hide() で囲みます。最初のナビゲーションの後、非表示ブロック内で Cookie 同意の承認ボタンを見つけてクリックします。サインインの手順は入れません。ログインについては下記を参照してください。
• セットアップ後はクリックで見える形で移動します。page.goto() は使いません。入力後は press('Enter') ではなく、表示された検索結果をクリックします。
• アクションのデフォルトオプション。 fill() の前に余分な click() を入れません。明示的に求められた場合や明らかに必要な場合を除き、zoom、position、タイミングの上書きは行いません。
• 組み込みキットのオーバーレイ（{ kit: 'callout', anchor, text }、ring、step、spotlight、badge、keys、title）。カスタム HTML／React はキットで描画できない場合に限って使います。SVG を手書きしたり、自分で色を選んだりしてはいけません。recordings/assets/theme.ts を使用してください。

よくある編集

タスク	参照先
ナレーションテキスト、合図、音声、発音	references/narration.md
ズーム、カメラ、カーソル速度、speed()	references/zoom-and-timing.md
ハイライト、コールアウト、手順、タイトルカード	references/overlays.md
静止画像（screenshot()）	references/screenshots.md
サインインが必要なアプリ	references/login.md
アカウント、トライアル、SCREENCI_SECRET、エクスポート	references/account.md, references/export.md

サインインの要点：自動化スクリプトにサインイン処理を記述しないでください。また、パスワードやコードを尋ねないでください。npx screenci login を実行してから、npx screenci login --wait を実行します。

コマンド

• デバッグするには npx screenci test recordings/<file>.screenci.ts [--grep "<title>"] を実行します。待機中に時間は経過しません。
• npx screenci preview "<title>" を実行すると、無料のライブプレビューを録画してアップロードします。フローが動作した後に行う、唯一の検証ステップです。リンクを報告してください。動画は開かないでください。
• 完成ファイルを求められた場合に限り、npx screenci export を実行します。
• CI：パイプラインを自分で追加しないでください。Web アプリで Add to CI を使うのは本人です。

本人への報告

• 相手は、コードを書かないチームメイトであることがよくあります。コマンドを実行したり、スクリプトを読んだりするよう求めないでください。動画に何が映っているか、何を変更したか、相手に何をしてもらう必要があるかを、平易な言葉で報告してください。
• 動画を本番サイトに対して録画する場合、現実に影響する操作（注文、支払い、送信、削除、公開、アカウントや請求に関する変更）は送信しないでください。明示的に依頼された場合を除き、そのようなフォームを送信しないでください。送信前に確認してください。読み取り、画面遷移、開発・ステージング・テスト環境での操作は問題ありません。
• パスワード、ワンタイムコード、API キーを尋ねないでください。
• セットアップ概要に記載された方法（ライブプレビュー、パイプラインの実行、プルリクエスト）で成果物を提出してください。パイプラインの実行を求めるコードでのみ、パイプラインを実行して完了させてください。
• 最後の行には、動画リンク preview（またはパイプラインの実行リンク）を単独で記載してください。