ui-demo

name	ui-demo
description	Record polished UI demo videos using Playwright. Use when the user asks to create a demo, walkthrough, screen recording, or tutorial video of a web application. Produces WebM videos with visible cursor, natural pacing, and professional feel.
origin	ECC

UI Demo Video Recorder

Playwright のビデオ録画機能を使用して、注入されたカーソルオーバーレイ、自然なペーシング、ストーリーテリングフローを備えた洗練されたデモビデオを Web アプリケーションから録画します。

使用タイミング

• ユーザーが「demo video」「screen recording」「walkthrough」「tutorial」を求めた場合
• ユーザーが機能やワークフローを視覚的にショーケースしたい場合
• ユーザーがドキュメント、オンボーディング、またはステークホルダープレゼンテーション用のビデオが必要な場合

3フェーズプロセス

すべてのデモは3つのフェーズを経ます: Discover -> Rehearse -> Record。録画に直接進まないでください。

---

フェーズ 1: Discover

スクリプトを書く前に、ターゲットページを探索して実際に何があるかを理解します。

なぜ

見ていないものをスクリプト化することはできません。フィールドが <textarea> ではなく <input> かもしれませんし、ドロップダウンが <select> ではなくカスタムコンポーネントかもしれませんし、コメントボックスが @mentions や #tags をサポートしているかもしれません。仮定は録画をサイレントに壊します。

方法

フロー内の各ページに移動し、インタラクティブ要素をダンプします:

// デモスクリプトを書く前に、フロー内の各ページでこれを実行
const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').( {
     (el. !== ) {
      els.({
        : el.,
        : el. || ,
        : el. || ,
        : el. || ,
        : el.?.().(, ) || ,
        : el. === ,
        : el.() || ,
      });
    }
  });
   els;
});
.(.(fields, , ));