Agent skill · design visual · affaan-m
ui-demo
Playwrightを使用して美しいUIデモ動画を録画する。ユーザーがWebアプリのデモ、ウォークスルー、スクリーン録画、またはチュートリアル動画の作成を求める場合に使用する。可視カーソル、自然なリズム、プロフェッショナルな仕上がりのWebM動画を生成する。
Why this skill is useful
Provides specific Playwright commands and structured processes for recording UI demo videos that the AI wouldn't reliably generate on its own.
What it needs
Requires playwright installed locally. About 5k tokens when loaded. Last updated 2026-08-06. 238,342 stars on the source repository.
What this skill does
UI デモ動画レコーダー Playwrightの動画録画機能を使用して、注入されたカーソルオーバーレイ、自然なリズム、ナラティブフローを備えた美しいWebアプリのデモ動画を録画する。 使用場面 ユーザーが「デモ動画」「スクリーン録画」「操作デモ」または「チュートリアル」を求める場合 ユーザーが機能またはワークフローを視覚的に見せたい場合 ユーザーがドキュメント、オンボーディング、ステークホルダーへのデモのために動画が必要な場合 3フェーズのプロセス すべてのデモは 探索 -> リハーサル -> 録画 の3つのフェーズを経る。録画フェーズに直接ジャンプしない。 フェーズ 1：探索 スクリプトを書く前に、ターゲットページを探索して実際の内容を把握する。 なぜか 見たことのない内容のスクリプトは書けない。フィールドが <textarea> ではなく <input> の場合、ドロップダウンが <select> ではなくカスタムコンポーネントの場合、コメントボックスが @mentions や #tags をサポートしている場合があある。仮定は録画を静かに壊す。 方法 フローの各ページに移動し、インタラクティブな要素をダンプする： 確認すべき内容 フォームフィールド：<select>、<input>、カスタムドロップダウン、コンボボックスのどれか？ 選択オプション：オプションの値とテキストをダンプする。プレースホルダーには value="0" または value="" が含まれることがあり、非空に見える。Array.from(el.options).map(o => ({ value: o.value, text: o.text })) を使用する。テキストに「選択」が含まれるオプションや値が "0" のオプションをスキップする。 リッチテキスト：コメントボックスは @mentions、#tags、Markdown、絵文字をサポートしているか？プレースホルダーテキストを確認する。 必須フィールド：どのフィールドがフォームの送信をブロックするか？ラベルの required、 を確認し、空のフォームを送信してバリデーションエラーを確認する。 動的コンテンツ：他のフィールドを入力した後にフィールドが表示されるか？ ボタンラベル：正確なテキスト（"Submit"、"Submit Request"、"Send" など）。 テーブル列ヘッダー：テーブル駆動のモーダルには、各 input[type="number"] をその列ヘッダーにマッピングする。すべての数値入力が同じ意味を持つと仮定しない。 出力 スクリプトに正しいセレクターを書くために使用する、ページごとのフィールドマッピング。例： フェーズ 2：リハーサル 録画せずにすべてのステップを実行する。各セレクターが解決されることを確認する。 なぜか セレクターの失敗は、デモ録画が壊れる最大の原因。リハーサルは録画を無駄にする前に問題を発見する。 方法 ensureVisible を使用する——ログを記録して大きくエラーを報告するラッパー： リハーサルスクリプトの構造 リハーサルが失敗した場合 1. 可視要素のダンプを読む。 2. 正しいセレクターを見つける。 3. スクリプトを更新する。 4. リハーサルを再実行する。 5. すべてのセレクターが通過した後のみ続行する。 フェーズ 3：録画 探索とリハーサルが通過した後にのみ、録画を作成する。 録画の原則 1. ナラティブフロー 動画をストーリーとして計画する。ユーザーが指定した順序に従うか、このデフォルト順序を使用する： エントリー：ログインまたは開始点へのナビゲーション コンテキスト：周囲を確認して、視聴者がどこにいるか理解できるようにする アクション：主要なワークフローステップを実行する バリアント：設定、テーマ、ローカライゼーションなどの補助機能を表示する 結果：結果、確認、または新しい状態を表示する 2. リズム ログイン後：4秒 ナビゲーション後：3秒 ボタンクリック後：2秒 主要なステップ間：1.5〜2秒 最終アクション後：3秒 入力の遅延：文字ごとに 25〜40ms 3. カーソルオーバーレイ マウスの動きを追うSVGの矢印カーソルを注入する： オーバーレイはナビゲーション時に破棄されるため、ページナビゲーションのたびに injectCursor(page) を呼び出す。 4. マウスの動き カーソルを瞬間移動させない。クリック前にターゲットに移動する： デバッグのために各呼び出しに説明的な label を含める。 5. 入力 瞬時に入力するのではなく、目に見えるように入力する： 6. …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills affaan-m/ui-demo