affaan-m/ui-demo

使用 Playwright 录制精美的 UI 演示视频。用于在用户请求创建演示、引导操作、屏幕录制或 Web 应用教程视频时使用。可生成带有可见光标、自然节奏和专业观感的 WebM 视频。

编程协作开发 Agent Agent 技能调研自动化 skill agent-skill ui demo affaan-m ECC ai-agent

技术栈: cursor24万+许可证: MIT开发者: affaan-m

Skill 介绍Skill 文件

重要提示：本站仅作 Skill 资源导航与收录，正文以 GitHub 原仓库为准，版权归原项目所有。

在 GitHub 查看 ↗

原文译文

以下为摘要预览，完整内容请查看 GitHub 原文。

UI Demo Video Recorder

Record polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.

When to Use

User asks for a "demo video", "screen recording", "walkthrough", or "tutorial"
User wants to showcase a feature or workflow visually
User needs a video for documentation, onboarding, or stakeholder presentation

Three-Phase Process

Every demo goes through three phases: Discover -> Rehearse -> Record. Never skip straight to recording.

Phase 1: Discover

Before writing any script, explore the target pages to understand what is actually there.

Why

You cannot script what you have not seen. Fields may be <input> not <textarea>, dropdowns may be custom components not <select>, and comment boxes may support @mentions or #tags. Assumptions break recordings silently.

How

Navigate to each page in the flow and dump its interactive elements:

// 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, [contented…

以下为摘要预览，完整内容请查看 GitHub 原文。

UI 演示视频录制器

使用 Playwright 的视频录制功能，注入光标叠加层、采用自然节奏与叙事流程，录制精美的 Web 应用演示视频。

使用场景

用户请求生成"演示视频"、"屏幕录制"、"操作引导"或"教程"
用户希望以可视化方式展示某个功能或工作流程
用户需要用于文档、新手引导或利益相关者汇报的视频

三阶段流程

每次演示都需经过三个阶段：发现 -> 演练 -> 录制。切勿跳过前置阶段直接录制。

阶段 1：发现

在编写任何脚本之前，先探索目标页面，了解其实际内容。

原因

未亲眼所见，就无法编写脚本。字段可能是 <input> 而非 <textarea>，下拉框可能是自定义组件而非 <select>，评论框可能支持 @mentions 或 #tags。错误的假设会让录制悄然失败。

方法

访问流程中的每个页面，并转储其交互元素：

// 在编写演示脚本之前，对流程中的每个页面运行此代码
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));