UI Demo

Playwrightを使用して美しいUIデモ動画を録画する。ユーザーがWebアプリのデモ、ウォークスルー、スクリーン録画、またはチュートリアル動画の作成を求める場合に使用する。可視カーソル、自然なリズム、プロフェッショナルな仕上がりのWebM動画を生成する。

293,665 stars 43,456 forksFrontend & Design Plugin marketplace

Install

Claude Code plugin
/plugin marketplace add affaan-m/ECC

The repo is a Claude Code plugin marketplace. Run /plugin afterwards to pick the plugin that includes this skill.

skills CLI (Claude Code, Cursor, Codex and more)
npx skills add affaan-m/ECC --skill ui-demo
Manual install
git clone --depth 1 https://github.com/affaan-m/ECC.git /tmp/ECC
mkdir -p ~/.claude/skills
cp -r /tmp/ECC/docs/ja-JP/skills/ui-demo ~/.claude/skills/ui-demo

Personal skills live in ~/.claude/skills. Use .claude/skills in a project folder to share a skill with your team.

From the SKILL.md

# UI デモ動画レコーダー

Playwrightの動画録画機能を使用して、注入されたカーソルオーバーレイ、自然なリズム、ナラティブフローを備えた美しいWebアプリのデモ動画を録画する。

## 使用場面

* ユーザーが「デモ動画」「スクリーン録画」「操作デモ」または「チュートリアル」を求める場合
* ユーザーが機能またはワークフローを視覚的に見せたい場合
* ユーザーがドキュメント、オンボーディング、ステークホルダーへのデモのために動画が必要な場合

## 3フェーズのプロセス

すべてのデモは **探索 -> リハーサル -> 録画** の3つのフェーズを経る。録画フェーズに直接ジャンプしない。

***

## フェーズ 1：探索

スクリプトを書く前に、ターゲットページを探索して実際の内容を把握する。

### なぜか

見たことのない内容のスクリプトは書けない。フィールドが `<textarea>` ではなく `<input>` の場合、ドロップダウンが `<select>` ではなくカスタムコンポーネントの場合、コメントボックスが `@mentions` や `#tags` をサポートしている場合があある。仮定は録画を静かに壊す。

### 方法

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

```javascript
// Run this for each page in the flow BEFORE writing the demo script
const fields = await page.evaluate(() => {
  const els = [];
  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {
    if (el.offsetParent !== null) {
      els.push({
        tag: el.tagName,
        type: el.type || '',
        name: el.name || '',
        placeholder: el.placeholder || '',
        text: el.textContent?.trim().substring(0, 40) || '',
        contentEditable: el.contentEditable === 'true',
        role: el.getAttribute('role') || '',
      });
    }
  });
  return els;
});
console.log(JSON.stringify(fields, null, 2));
```

### 確認すべき内容

* **フォームフィールド**：`<select>`、`<input>`、カスタムドロップダウン、コンボボックスのどれか？
Read the full skill on GitHub

Details

Skill name
ui-demo
Repository
affaan-m/ECC
Path
docs/ja-JP/skills/ui-demo/SKILL.md
License
MIT
Repo updated
30 October 2026
Listed in
hesreallyhim/awesome-claude-code

FAQ

What does the UI Demo skill do?

Playwrightを使用して美しいUIデモ動画を録画する。ユーザーがWebアプリのデモ、ウォークスルー、スクリーン録画、またはチュートリアル動画の作成を求める場合に使用する。可視カーソル、自然なリズム、プロフェッショナルな仕上がりのWebM動画を生成する。

How do I install the UI Demo skill?

Claude Code plugin: /plugin marketplace add affaan-m/ECC. Skills go in ~/.claude/skills (personal) or .claude/skills (project), and Claude loads them automatically when a task matches the description.

Is UI Demo popular?

It lives in affaan-m/ECC, which has 293,665 GitHub stars and 43,456 forks, and is included in 1 curated skill list.

Related skills

Accessibility

294k

affaan-m/ECC

WCAG 2.2 レベル AA 標準を用いてインクルーシブなデジタルプロダクトを設計・実装・監査します。Web 用のセマンティック ARIA および Web・ネイティブプラットフォーム（iOS/Android）のアクセシビリティトレイトを生成するために使用します。

Frontend & DesignIn 1 list43k

Agent Architecture Audit

294k

affaan-m/ECC

エージェントおよび LLM アプリケーション向けのフルスタック診断。12 層のエージェントスタックにおけるラッパーリグレッション、メモリ汚染、ツール規律の失敗、隠れた修復ループ、レンダリング破損を監査します。重要度順の発見事項とコードファーストの修正を生成します。エージェントアプリケーション、自律ループ、または LLM を活用した機能を構築する開発者に必須です。

AI, LLMs & AgentsIn 1 list43k

Agent Eval

294k

affaan-m/ECC

カスタムタスクでコーディングエージェント（Claude Code、Aider、Codex など）をヘッドツーヘッドで比較し、合格率、コスト、時間、一貫性のメトリクスを測定します

AI, LLMs & AgentsIn 1 list43k

UI to Vue

294k

affaan-m/ECC

UIスクリーンショットやデザインエクスポートをVue 3コンポーネントに一括変換する際に使用。Vant、Element Plus、Ant Design Vueに対応。

Frontend & DesignIn 1 list43k

React Patterns

294k

affaan-m/ECC

React 18/19 patterns including hooks discipline, server/client component boundaries, Suspense + error boundaries, form actions, data fetching, state management decision trees, and accessibility-first composition. Use when writing or reviewing React components.

Frontend & DesignIn 1 list43k

Cro

58k

coreyhaines31/marketingskills

When the user wants to optimize, improve, or increase conversions on any marketing page or form — including homepage, landing pages, pricing pages, feature pages, lead capture forms, or contact forms. Also use when the user says 'CRO,' 'conversion rate optimization,' 'this page isn't converting,' 'improve conversions,' 'why isn't this page working,' 'my landing page sucks,' 'form abandonment,' 'nobody's converting,' 'low conversion rate,' or 'this page needs work.' Use this even if the user just shares a URL and asks for feedback. For signup/registration flows, see signup. For post-signup acti

Frontend & DesignIn 4 lists8.5k

Browse the most popular Claude skills, all frontend & design skills, or write your own with the skills generator.