ui-demo

ui-demo スキルの概要

ui-demo でできること

ui-demo スキルは、Playwright を使って洗練された Web アプリのデモ動画を収録するためのスキルです。カーソルの動きが見えること、操作の間合いが整っていること、単なる画面録画よりも自然な手順で見せられることが特徴です。プロダクトデモ、オンボーディング動画、機能紹介、チュートリアル系の動画など、動く UI をわかりやすく見せたい場面に最適です。

どんな人に向いているか

ui-demo スキルは、荒いプロダクトフローをそのまま見せるのではなく、配信・提案・共有に耐える録画へ整えたいときに使います。ブラウザを起動してページを確認し、スクリプト化した操作を実行できる開発者、プロダクトチーム、エージェントに向いており、本格的な動画編集ワークフローまでは必要ありません。

何が役に立つのか

このスキルの大きな価値は、作業手順をきちんと踏ませる点にあります。まず実際の UI を確認し、次にフローをリハーサルし、そのうえで録画する、という流れを促します。これにより、セレクタの誤り、隠れたコントロール、非現実的なテンポが原因のデモ崩れを減らせます。ui-demo for Prototypes のように、変化の早いプロトタイプ UI を録画前に素早く検証したい場合は特に有効です。

ui-demo スキルの使い方

インストールして作業範囲を絞る

ui-demo install では、まずリポジトリからスキルを追加し、そのうえでアプリ全体ではなく 1 つのフローに適用します。典型的なインストールコマンドは次のとおりです。
npx skills add affaan-m/everything-claude-code --skill ui-demo

開始前に、録画のゴールを具体的に決めてください。どのページを見せるのか、どのユーザージャーニーを追うのか、視聴者に何を理解してほしいのか、そしてこの動画がドキュメント用なのか、営業用なのか、社内レビュー用なのかを明確にします。

録画より先に、まず探索する

ui-demo usage のワークフローは、ライブの UI を先に理解していることが前提です。対象ページを開き、表示されている入力欄、ボタン、メニュー、モーダルを確認し、標準的な HTML 要素のようには動かない独自コントロールがないかも見ておきます。リポジトリのガイダンスは明確で、探索して、リハーサルして、それから録画する、という順番です。

良い入力例:

• 「新規プロジェクトの作成、タスク 1 件の追加、共有までを 60 秒で見せるウォークスルーを録画して」
• 「staging 環境で設定フローを見せて。テーマ切り替えと招待リンクを中心に」

弱い入力例:

• 「このアプリのデモ動画を作って」

まずは適切なファイルを読む

ui-demo guide では、まず SKILL.md を読み、ブラウザ設定や録画制約に影響するリポジトリ内の関連手順があればそれも確認します。このリポジトリでは SKILL.md が主要な情報源で、頼るべき追加のサポートフォルダはありません。そのため、重要なのは手順セクションを丁寧に読み、自分のアプリに合わせて適用することです。

リハーサル済みの台本を使う

デモは、クリックの羅列ではなく、ユーザーの意図を軸にした一連のステップとして書き出します。開始時点の状態、操作の流れ、期待する終了状態を含めてください。ファイルアップロード、非同期保存、モーダル表示のように失敗しやすい場面がある場合は、録画前にそこを重点的にリハーサルしておくと、本番の収録を滑らかに保てます。

ui-demo スキルの FAQ

ui-demo は通常のプロンプトより優れているか

はい。目的が「機能を説明すること」ではなく、「それらしく見える録画を作ること」の場合は特にそうです。一般的なプロンプトでも簡単なチェックリストは作れますが、ui-demo skill なら、セレクタのミス、テンポの崩れ、不自然な操作を減らすためのワークフローまで含めて進められます。

ui-demo は完成済みプロダクト専用か

いいえ。プロトタイプ、staging ビルド、社内ツールにも使えます。ui-demo for Prototypes が実用的なユースケースになるのはそのためです。重要なのは、UI が十分に対話的で、探索と録画を安定して行えることです。

何が良い結果を妨げるか

最大の阻害要因は、インターフェースの不安定さ、対象フローの不明確さ、ページ構造に対する思い込みです。アプリが頻繁に変わるなら、現在のルート、安定したテストデータ、正確な UI パスを必ず渡してください。そうしないと、録画内容が途中でずれてしまいます。

初心者でも使いやすいか

はい、ユーザージャーニーを明確に説明できるなら使いやすいです。動画編集の知識は必要ありませんが、そのデモで何を証明したいのか、何を省くべきかを言える程度のプロダクト理解は必要です。

ui-demo スキルを改善するには

スキルへの指示をより具体的にする

良い ui-demo usage の入力は、対象ユーザー、長さ、成功条件を明確にしています。たとえば「管理者がレポートを確認して CSV をエクスポートする流れを、エラー状態やセットアップ画面なしで 45 秒のステークホルダーデモとして作成して」のように書くと、一般的なウォークスルーを頼むよりずっと強い指示になります。これは、テンポと範囲をはっきり定義できるからです。

安定した UI コンテキストを渡す

インターフェースに動的データ、認証、ロール別表示があるなら、開始条件を正確に伝えてください。アカウント種別、ルート、テストレコード名、事前に読み込んだ状態などを含めます。ui-demo skill は、ブラウザの状態が予測可能なときに最も効果を発揮するからです。

1 回目の録画後に改善する

最初の収録は、テンポ、カーソルの見やすさ、ナレーションなしでも物語が伝わるかを確認するために見直します。そのうえで、余分なクリックを削り、待ち時間を短くし、あいまいな遷移を明確な UI ステップに置き換えて、台本を詰めていきます。ui-demo install を成果につなげるには、最初の実行を完成品ではなくリハーサル素材として扱うのが大切です。

よくある失敗パターンに注意する

よくあるミスは、長すぎるフロー、未検証のセレクタ、複数の機能を一度に詰め込みすぎるデモ台本です。動画が忙しなく感じるなら、1 つの成果に絞り、すべてのステップがその成果を支えるようにしてください。