[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6JVFW9M6548QJS8T3CDH7F2":3,"skill-same:01M6JVFW9M6548QJS8T3CDH7F2":80},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":28,"publishedAt":50,"linkOnly":51,"markdownContent":52,"markdownBody":53,"frontMatter":54,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":61,"ownerHtmlUrl":62,"ownerBlogUrl":63,"ownerDescription":64,"updatedAt":65,"install":66,"resources":79},"01M6JVFW9M6548QJS8T3CDH7F2","ui-demo",null,"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.","hashgraph-online\u002Fawesome-codex-plugins","hashgraph-online","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F160371962?v=4","01M6CNB6NRJVNNGN14TR01Q6D3","HOL (Hashgraph Online)","01M6JT1HSKKG9V68KQAQGBA7XP",1554,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FColin4k1024\u002Ftsp\u002Fskills\u002Fui-demo\u002FSKILL.md",[18,23],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",{"categoryNo":24,"categoryName":25,"taxonomyType":26,"taxonomyTypeDesc":27},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[29,30,31,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49],"ui","demo","ui demo","tutorial","when","videos","recording","with","professional","screen","application","record","use","playwright","cursor","user","walkthrough","Video","screen recording","create","web","2026-11-10 10:12:30",false,"---\nname: ui-demo\ndescription: 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.\norigin: ECC\n---\n\n# UI Demo Video Recorder\n\nRecord polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.\n\n## When to Use\n\n- User asks for a \"demo video\", \"screen recording\", \"walkthrough\", or \"tutorial\"\n- User wants to showcase a feature or workflow visually\n- User needs a video for documentation, onboarding, or stakeholder presentation\n\n## Three-Phase Process\n\nEvery demo goes through three phases: **Discover -> Rehearse -> Record**. Never skip straight to recording.\n\n---\n\n## Phase 1: Discover\n\nBefore writing any script, explore the target pages to understand what is actually there.\n\n### Why\n\nYou cannot script what you have not seen. Fields may be `\u003Cinput>` not `\u003Ctextarea>`, dropdowns may be custom components not `\u003Cselect>`, and comment boxes may support `@mentions` or `#tags`. Assumptions break recordings silently.\n\n### How\n\nNavigate to each page in the flow and dump its interactive elements:\n\n```javascript\n\u002F\u002F Run this for each page in the flow BEFORE writing the demo script\nconst fields = await page.evaluate(() => {\n  const els = [];\n  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {\n    if (el.offsetParent !== null) {\n      els.push({\n        tag: el.tagName,\n        type: el.type || '',\n        name: el.name || '',\n        placeholder: el.placeholder || '',\n        text: el.textContent?.trim().substring(0, 40) || '',\n        contentEditable: el.contentEditable === 'true',\n        role: el.getAttribute('role') || '',\n      });\n    }\n  });\n  return els;\n});\nconsole.log(JSON.stringify(fields, null, 2));\n```\n\n### What to look for\n\n- **Form fields**: Are they `\u003Cselect>`, `\u003Cinput>`, custom dropdowns, or comboboxes?\n- **Select options**: Dump option values AND text. Placeholders often have `value=\"0\"` or `value=\"\"` which looks non-empty. Use `Array.from(el.options).map(o => ({ value: o.value, text: o.text }))`. Skip options where text includes \"Select\" or value is `\"0\"`.\n- **Rich text**: Does the comment box support `@mentions`, `#tags`, markdown, or emoji? Check placeholder text.\n- **Required fields**: Which fields block form submission? Check `required`, `*` in labels, and try submitting empty to see validation errors.\n- **Dynamic content**: Do fields appear after other fields are filled?\n- **Button labels**: Exact text such as `\"Submit\"`, `\"Submit Request\"`, or `\"Send\"`.\n- **Table column headers**: For table-driven modals, map each `input[type=\"number\"]` to its column header instead of assuming all numeric inputs mean the same thing.\n\n### Output\n\nA field map for each page, used to write correct selectors in the script. Example:\n\n```text\n\u002Fpurchase-requests\u002Fnew:\n  - Budget Code: \u003Cselect> (first select on page, 4 options)\n  - Desired Delivery: \u003Cinput type=\"date\">\n  - Context: \u003Ctextarea> (not input)\n  - BOM table: inline-editable cells with span.cursor-pointer -> input pattern\n  - Submit: \u003Cbutton> text=\"Submit\"\n\n\u002Fpurchase-requests\u002FN (detail):\n  - Comment: \u003Cinput placeholder=\"Type a message...\"> supports @user and #PR tags\n  - Send: \u003Cbutton> text=\"Send\" (disabled until input has content)\n```\n\n---\n\n## Phase 2: Rehearse\n\nRun through all steps without recording. Verify every selector resolves.\n\n### Why\n\nSilent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.\n\n### How\n\nUse `ensureVisible`, a wrapper that logs and fails loudly:\n\n```javascript\nasync function ensureVisible(page, locator, label) {\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    const msg = `REHEARSAL FAIL: \"${label}\" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}`;\n    console.error(msg);\n    const found = await page.evaluate(() => {\n      return Array.from(document.querySelectorAll('button, input, select, textarea, a'))\n        .filter(el => el.offsetParent !== null)\n        .map(el => `${el.tagName}[${el.type || ''}] \"${el.textContent?.trim().substring(0, 30)}\"`)\n        .join('\\n  ');\n    });\n    console.error('  Visible elements:\\n  ' + found);\n    return false;\n  }\n  console.log(`REHEARSAL OK: \"${label}\"`);\n  return true;\n}\n```\n\n### Rehearsal script structure\n\n```javascript\nconst steps = [\n  { label: 'Login email field', selector: '#email' },\n  { label: 'Login submit', selector: 'button[type=\"submit\"]' },\n  { label: 'New Request button', selector: 'button:has-text(\"New Request\")' },\n  { label: 'Budget Code select', selector: 'select' },\n  { label: 'Delivery date', selector: 'input[type=\"date\"]:visible' },\n  { label: 'Description field', selector: 'textarea:visible' },\n  { label: 'Add Item button', selector: 'button:has-text(\"Add Item\")' },\n  { label: 'Submit button', selector: 'button:has-text(\"Submit\")' },\n];\n\nlet allOk = true;\nfor (const step of steps) {\n  if (!await ensureVisible(page, step.selector, step.label)) {\n    allOk = false;\n  }\n}\nif (!allOk) {\n  console.error('REHEARSAL FAILED - fix selectors before recording');\n  process.exit(1);\n}\nconsole.log('REHEARSAL PASSED - all selectors verified');\n```\n\n### When rehearsal fails\n\n1. Read the visible-element dump.\n2. Find the correct selector.\n3. Update the script.\n4. Re-run rehearsal.\n5. Only proceed when every selector passes.\n\n---\n\n## Phase 3: Record\n\nOnly after discovery and rehearsal pass should you create the recording.\n\n### Recording Principles\n\n#### 1. Storytelling Flow\n\nPlan the video as a story. Follow user-specified order, or use this default:\n\n- **Entry**: Login or navigate to the starting point\n- **Context**: Pan the surroundings so viewers orient themselves\n- **Action**: Perform the main workflow steps\n- **Variation**: Show a secondary feature such as settings, theme, or localization\n- **Result**: Show the outcome, confirmation, or new state\n\n#### 2. Pacing\n\n- After login: `4s`\n- After navigation: `3s`\n- After clicking a button: `2s`\n- Between major steps: `1.5-2s`\n- After the final action: `3s`\n- Typing delay: `25-40ms` per character\n\n#### 3. Cursor Overlay\n\nInject an SVG arrow cursor that follows mouse movements:\n\n```javascript\nasync function injectCursor(page) {\n  await page.evaluate(() => {\n    if (document.getElementById('demo-cursor')) return;\n    const cursor = document.createElement('div');\n    cursor.id = 'demo-cursor';\n    cursor.innerHTML = `\u003Csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Cpath d=\"M5 3L19 12L12 13L9 20L5 3Z\" fill=\"white\" stroke=\"black\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fsvg>`;\n    cursor.style.cssText = `\n      position: fixed; z-index: 999999; pointer-events: none;\n      width: 24px; height: 24px;\n      transition: left 0.1s, top 0.1s;\n      filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));\n    `;\n    cursor.style.left = '0px';\n    cursor.style.top = '0px';\n    document.body.appendChild(cursor);\n    document.addEventListener('mousemove', (e) => {\n      cursor.style.left = e.clientX + 'px';\n      cursor.style.top = e.clientY + 'px';\n    });\n  });\n}\n```\n\nCall `injectCursor(page)` after every page navigation because the overlay is destroyed on navigate.\n\n#### 4. Mouse Movement\n\nNever teleport the cursor. Move to the target before clicking:\n\n```javascript\nasync function moveAndClick(page, locator, label, opts = {}) {\n  const { postClickDelay = 800, ...clickOpts } = opts;\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    console.error(`WARNING: moveAndClick skipped - \"${label}\" not visible`);\n    return false;\n  }\n  try {\n    await el.scrollIntoViewIfNeeded();\n    await page.waitForTimeout(300);\n    const box = await el.boundingBox();\n    if (box) {\n      await page.mouse.move(box.x + box.width \u002F 2, box.y + box.height \u002F 2, { steps: 10 });\n      await page.waitForTimeout(400);\n    }\n    await el.click(clickOpts);\n  } catch (e) {\n    console.error(`WARNING: moveAndClick failed on \"${label}\": ${e.message}`);\n    return false;\n  }\n  await page.waitForTimeout(postClickDelay);\n  return true;\n}\n```\n\nEvery call should include a descriptive `label` for debugging.\n\n#### 5. Typing\n\nType visibly, not instant-fill:\n\n```javascript\nasync function typeSlowly(page, locator, text, label, charDelay = 35) {\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    console.error(`WARNING: typeSlowly skipped - \"${label}\" not visible`);\n    return false;\n  }\n  await moveAndClick(page, el, label);\n  await el.fill('');\n  await el.pressSequentially(text, { delay: charDelay });\n  await page.waitForTimeout(500);\n  return true;\n}\n```\n\n#### 6. Scrolling\n\nUse smooth scroll instead of jumps:\n\n```javascript\nawait page.evaluate(() => window.scrollTo({ top: 400, behavior: 'smooth' }));\nawait page.waitForTimeout(1500);\n```\n\n#### 7. Dashboard Panning\n\nWhen showing a dashboard or overview page, move the cursor across key elements:\n\n```javascript\nasync function panElements(page, selector, maxCount = 6) {\n  const elements = await page.locator(selector).all();\n  for (let i = 0; i \u003C Math.min(elements.length, maxCount); i++) {\n    try {\n      const box = await elements[i].boundingBox();\n      if (box && box.y \u003C 700) {\n        await page.mouse.move(box.x + box.width \u002F 2, box.y + box.height \u002F 2, { steps: 8 });\n        await page.waitForTimeout(600);\n      }\n    } catch (e) {\n      console.warn(`WARNING: panElements skipped element ${i} (selector: \"${selector}\"): ${e.message}`);\n    }\n  }\n}\n```\n\n#### 8. Subtitles\n\nInject a subtitle bar at the bottom of the viewport:\n\n```javascript\nasync function injectSubtitleBar(page) {\n  await page.evaluate(() => {\n    if (document.getElementById('demo-subtitle')) return;\n    const bar = document.createElement('div');\n    bar.id = 'demo-subtitle';\n    bar.style.cssText = `\n      position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998;\n      text-align: center; padding: 12px 24px;\n      background: rgba(0, 0, 0, 0.75);\n      color: white; font-family: -apple-system, \"Segoe UI\", sans-serif;\n      font-size: 16px; font-weight: 500; letter-spacing: 0.3px;\n      transition: opacity 0.3s;\n      pointer-events: none;\n    `;\n    bar.textContent = '';\n    bar.style.opacity = '0';\n    document.body.appendChild(bar);\n  });\n}\n\nasync function showSubtitle(page, text) {\n  await page.evaluate((t) => {\n    const bar = document.getElementById('demo-subtitle');\n    if (!bar) return;\n    if (t) {\n      bar.textContent = t;\n      bar.style.opacity = '1';\n    } else {\n      bar.style.opacity = '0';\n    }\n  }, text);\n  if (text) await page.waitForTimeout(800);\n}\n```\n\nCall `injectSubtitleBar(page)` alongside `injectCursor(page)` after every navigation.\n\nUsage pattern:\n\n```javascript\nawait showSubtitle(page, 'Step 1 - Logging in');\nawait showSubtitle(page, 'Step 2 - Dashboard overview');\nawait showSubtitle(page, '');\n```\n\nGuidelines:\n\n- Keep subtitle text short, ideally under 60 characters.\n- Use `Step N - Action` format for consistency.\n- Clear the subtitle during long pauses where the UI can speak for itself.\n\n## Script Template\n\n```javascript\n'use strict';\nconst { chromium } = require('playwright');\nconst path = require('path');\nconst fs = require('fs');\n\nconst BASE_URL = process.env.QA_BASE_URL || 'http:\u002F\u002Flocalhost:3000';\nconst VIDEO_DIR = path.join(__dirname, 'screenshots');\nconst OUTPUT_NAME = 'demo-FEATURE.webm';\nconst REHEARSAL = process.argv.includes('--rehearse');\n\n\u002F\u002F Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick,\n\u002F\u002F typeSlowly, ensureVisible, and panElements here.\n\n(async () => {\n  const browser = await chromium.launch({ headless: true });\n\n  if (REHEARSAL) {\n    const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });\n    const page = await context.newPage();\n    \u002F\u002F Navigate through the flow and run ensureVisible for each selector.\n    await browser.close();\n    return;\n  }\n\n  const context = await browser.newContext({\n    recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } },\n    viewport: { width: 1280, height: 720 }\n  });\n  const page = await context.newPage();\n\n  try {\n    await injectCursor(page);\n    await injectSubtitleBar(page);\n\n    await showSubtitle(page, 'Step 1 - Logging in');\n    \u002F\u002F login actions\n\n    await page.goto(`${BASE_URL}\u002Fdashboard`);\n    await injectCursor(page);\n    await injectSubtitleBar(page);\n    await showSubtitle(page, 'Step 2 - Dashboard overview');\n    \u002F\u002F pan dashboard\n\n    await showSubtitle(page, 'Step 3 - Main workflow');\n    \u002F\u002F action sequence\n\n    await showSubtitle(page, 'Step 4 - Result');\n    \u002F\u002F final reveal\n    await showSubtitle(page, '');\n  } catch (err) {\n    console.error('DEMO ERROR:', err.message);\n  } finally {\n    await context.close();\n    const video = page.video();\n    if (video) {\n      const src = await video.path();\n      const dest = path.join(VIDEO_DIR, OUTPUT_NAME);\n      try {\n        fs.copyFileSync(src, dest);\n        console.log('Video saved:', dest);\n      } catch (e) {\n        console.error('ERROR: Failed to copy video:', e.message);\n        console.error('  Source:', src);\n        console.error('  Destination:', dest);\n      }\n    }\n    await browser.close();\n  }\n})();\n```\n\nUsage:\n\n```bash\n# Phase 2: Rehearse\nnode demo-script.cjs --rehearse\n\n# Phase 3: Record\nnode demo-script.cjs\n```\n\n## Checklist Before Recording\n\n- [ ] Discovery phase completed\n- [ ] Rehearsal passes with all selectors OK\n- [ ] Headless mode enabled\n- [ ] Resolution set to `1280x720`\n- [ ] Cursor and subtitle overlays re-injected after every navigation\n- [ ] `showSubtitle(page, 'Step N - ...')` used at major transitions\n- [ ] `moveAndClick` used for all clicks with descriptive labels\n- [ ] `typeSlowly` used for visible input\n- [ ] No silent catches; helpers log warnings\n- [ ] Smooth scrolling used for content reveal\n- [ ] Key pauses are visible to a human viewer\n- [ ] Flow matches the requested story order\n- [ ] Script reflects the actual UI discovered in phase 1\n\n## Common Pitfalls\n\n1. Cursor disappears after navigation - re-inject it.\n2. Video is too fast - add pauses.\n3. Cursor is a dot instead of an arrow - use the SVG overlay.\n4. Cursor teleports - move before clicking.\n5. Select dropdowns look wrong - show the move, then pick the option.\n6. Modals feel abrupt - add a read pause before confirming.\n7. Video file path is random - copy it to a stable output name.\n8. Selector failures are swallowed - never use silent catch blocks.\n9. Field types were assumed - discover them first.\n10. Features were assumed - inspect the actual UI before scripting.\n11. Placeholder select values look real - watch for `\"0\"` and `\"Select...\"`.\n12. Popups create separate videos - capture popup pages explicitly and merge later if needed.\n","# UI Demo Video Recorder\n\nRecord polished demo videos of web applications using Playwright's video recording with an injected cursor overlay, natural pacing, and storytelling flow.\n\n## When to Use\n\n- User asks for a \"demo video\", \"screen recording\", \"walkthrough\", or \"tutorial\"\n- User wants to showcase a feature or workflow visually\n- User needs a video for documentation, onboarding, or stakeholder presentation\n\n## Three-Phase Process\n\nEvery demo goes through three phases: **Discover -> Rehearse -> Record**. Never skip straight to recording.\n\n---\n\n## Phase 1: Discover\n\nBefore writing any script, explore the target pages to understand what is actually there.\n\n### Why\n\nYou cannot script what you have not seen. Fields may be `\u003Cinput>` not `\u003Ctextarea>`, dropdowns may be custom components not `\u003Cselect>`, and comment boxes may support `@mentions` or `#tags`. Assumptions break recordings silently.\n\n### How\n\nNavigate to each page in the flow and dump its interactive elements:\n\n```javascript\n\u002F\u002F Run this for each page in the flow BEFORE writing the demo script\nconst fields = await page.evaluate(() => {\n  const els = [];\n  document.querySelectorAll('input, select, textarea, button, [contenteditable]').forEach(el => {\n    if (el.offsetParent !== null) {\n      els.push({\n        tag: el.tagName,\n        type: el.type || '',\n        name: el.name || '',\n        placeholder: el.placeholder || '',\n        text: el.textContent?.trim().substring(0, 40) || '',\n        contentEditable: el.contentEditable === 'true',\n        role: el.getAttribute('role') || '',\n      });\n    }\n  });\n  return els;\n});\nconsole.log(JSON.stringify(fields, null, 2));\n```\n\n### What to look for\n\n- **Form fields**: Are they `\u003Cselect>`, `\u003Cinput>`, custom dropdowns, or comboboxes?\n- **Select options**: Dump option values AND text. Placeholders often have `value=\"0\"` or `value=\"\"` which looks non-empty. Use `Array.from(el.options).map(o => ({ value: o.value, text: o.text }))`. Skip options where text includes \"Select\" or value is `\"0\"`.\n- **Rich text**: Does the comment box support `@mentions`, `#tags`, markdown, or emoji? Check placeholder text.\n- **Required fields**: Which fields block form submission? Check `required`, `*` in labels, and try submitting empty to see validation errors.\n- **Dynamic content**: Do fields appear after other fields are filled?\n- **Button labels**: Exact text such as `\"Submit\"`, `\"Submit Request\"`, or `\"Send\"`.\n- **Table column headers**: For table-driven modals, map each `input[type=\"number\"]` to its column header instead of assuming all numeric inputs mean the same thing.\n\n### Output\n\nA field map for each page, used to write correct selectors in the script. Example:\n\n```text\n\u002Fpurchase-requests\u002Fnew:\n  - Budget Code: \u003Cselect> (first select on page, 4 options)\n  - Desired Delivery: \u003Cinput type=\"date\">\n  - Context: \u003Ctextarea> (not input)\n  - BOM table: inline-editable cells with span.cursor-pointer -> input pattern\n  - Submit: \u003Cbutton> text=\"Submit\"\n\n\u002Fpurchase-requests\u002FN (detail):\n  - Comment: \u003Cinput placeholder=\"Type a message...\"> supports @user and #PR tags\n  - Send: \u003Cbutton> text=\"Send\" (disabled until input has content)\n```\n\n---\n\n## Phase 2: Rehearse\n\nRun through all steps without recording. Verify every selector resolves.\n\n### Why\n\nSilent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.\n\n### How\n\nUse `ensureVisible`, a wrapper that logs and fails loudly:\n\n```javascript\nasync function ensureVisible(page, locator, label) {\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    const msg = `REHEARSAL FAIL: \"${label}\" not found - selector: ${typeof locator === 'string' ? locator : '(locator object)'}`;\n    console.error(msg);\n    const found = await page.evaluate(() => {\n      return Array.from(document.querySelectorAll('button, input, select, textarea, a'))\n        .filter(el => el.offsetParent !== null)\n        .map(el => `${el.tagName}[${el.type || ''}] \"${el.textContent?.trim().substring(0, 30)}\"`)\n        .join('\\n  ');\n    });\n    console.error('  Visible elements:\\n  ' + found);\n    return false;\n  }\n  console.log(`REHEARSAL OK: \"${label}\"`);\n  return true;\n}\n```\n\n### Rehearsal script structure\n\n```javascript\nconst steps = [\n  { label: 'Login email field', selector: '#email' },\n  { label: 'Login submit', selector: 'button[type=\"submit\"]' },\n  { label: 'New Request button', selector: 'button:has-text(\"New Request\")' },\n  { label: 'Budget Code select', selector: 'select' },\n  { label: 'Delivery date', selector: 'input[type=\"date\"]:visible' },\n  { label: 'Description field', selector: 'textarea:visible' },\n  { label: 'Add Item button', selector: 'button:has-text(\"Add Item\")' },\n  { label: 'Submit button', selector: 'button:has-text(\"Submit\")' },\n];\n\nlet allOk = true;\nfor (const step of steps) {\n  if (!await ensureVisible(page, step.selector, step.label)) {\n    allOk = false;\n  }\n}\nif (!allOk) {\n  console.error('REHEARSAL FAILED - fix selectors before recording');\n  process.exit(1);\n}\nconsole.log('REHEARSAL PASSED - all selectors verified');\n```\n\n### When rehearsal fails\n\n1. Read the visible-element dump.\n2. Find the correct selector.\n3. Update the script.\n4. Re-run rehearsal.\n5. Only proceed when every selector passes.\n\n---\n\n## Phase 3: Record\n\nOnly after discovery and rehearsal pass should you create the recording.\n\n### Recording Principles\n\n#### 1. Storytelling Flow\n\nPlan the video as a story. Follow user-specified order, or use this default:\n\n- **Entry**: Login or navigate to the starting point\n- **Context**: Pan the surroundings so viewers orient themselves\n- **Action**: Perform the main workflow steps\n- **Variation**: Show a secondary feature such as settings, theme, or localization\n- **Result**: Show the outcome, confirmation, or new state\n\n#### 2. Pacing\n\n- After login: `4s`\n- After navigation: `3s`\n- After clicking a button: `2s`\n- Between major steps: `1.5-2s`\n- After the final action: `3s`\n- Typing delay: `25-40ms` per character\n\n#### 3. Cursor Overlay\n\nInject an SVG arrow cursor that follows mouse movements:\n\n```javascript\nasync function injectCursor(page) {\n  await page.evaluate(() => {\n    if (document.getElementById('demo-cursor')) return;\n    const cursor = document.createElement('div');\n    cursor.id = 'demo-cursor';\n    cursor.innerHTML = `\u003Csvg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\u002F\u002Fwww.w3.org\u002F2000\u002Fsvg\">\n      \u003Cpath d=\"M5 3L19 12L12 13L9 20L5 3Z\" fill=\"white\" stroke=\"black\" stroke-width=\"1.5\" stroke-linejoin=\"round\"\u002F>\n    \u003C\u002Fsvg>`;\n    cursor.style.cssText = `\n      position: fixed; z-index: 999999; pointer-events: none;\n      width: 24px; height: 24px;\n      transition: left 0.1s, top 0.1s;\n      filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));\n    `;\n    cursor.style.left = '0px';\n    cursor.style.top = '0px';\n    document.body.appendChild(cursor);\n    document.addEventListener('mousemove', (e) => {\n      cursor.style.left = e.clientX + 'px';\n      cursor.style.top = e.clientY + 'px';\n    });\n  });\n}\n```\n\nCall `injectCursor(page)` after every page navigation because the overlay is destroyed on navigate.\n\n#### 4. Mouse Movement\n\nNever teleport the cursor. Move to the target before clicking:\n\n```javascript\nasync function moveAndClick(page, locator, label, opts = {}) {\n  const { postClickDelay = 800, ...clickOpts } = opts;\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    console.error(`WARNING: moveAndClick skipped - \"${label}\" not visible`);\n    return false;\n  }\n  try {\n    await el.scrollIntoViewIfNeeded();\n    await page.waitForTimeout(300);\n    const box = await el.boundingBox();\n    if (box) {\n      await page.mouse.move(box.x + box.width \u002F 2, box.y + box.height \u002F 2, { steps: 10 });\n      await page.waitForTimeout(400);\n    }\n    await el.click(clickOpts);\n  } catch (e) {\n    console.error(`WARNING: moveAndClick failed on \"${label}\": ${e.message}`);\n    return false;\n  }\n  await page.waitForTimeout(postClickDelay);\n  return true;\n}\n```\n\nEvery call should include a descriptive `label` for debugging.\n\n#### 5. Typing\n\nType visibly, not instant-fill:\n\n```javascript\nasync function typeSlowly(page, locator, text, label, charDelay = 35) {\n  const el = typeof locator === 'string' ? page.locator(locator).first() : locator;\n  const visible = await el.isVisible().catch(() => false);\n  if (!visible) {\n    console.error(`WARNING: typeSlowly skipped - \"${label}\" not visible`);\n    return false;\n  }\n  await moveAndClick(page, el, label);\n  await el.fill('');\n  await el.pressSequentially(text, { delay: charDelay });\n  await page.waitForTimeout(500);\n  return true;\n}\n```\n\n#### 6. Scrolling\n\nUse smooth scroll instead of jumps:\n\n```javascript\nawait page.evaluate(() => window.scrollTo({ top: 400, behavior: 'smooth' }));\nawait page.waitForTimeout(1500);\n```\n\n#### 7. Dashboard Panning\n\nWhen showing a dashboard or overview page, move the cursor across key elements:\n\n```javascript\nasync function panElements(page, selector, maxCount = 6) {\n  const elements = await page.locator(selector).all();\n  for (let i = 0; i \u003C Math.min(elements.length, maxCount); i++) {\n    try {\n      const box = await elements[i].boundingBox();\n      if (box && box.y \u003C 700) {\n        await page.mouse.move(box.x + box.width \u002F 2, box.y + box.height \u002F 2, { steps: 8 });\n        await page.waitForTimeout(600);\n      }\n    } catch (e) {\n      console.warn(`WARNING: panElements skipped element ${i} (selector: \"${selector}\"): ${e.message}`);\n    }\n  }\n}\n```\n\n#### 8. Subtitles\n\nInject a subtitle bar at the bottom of the viewport:\n\n```javascript\nasync function injectSubtitleBar(page) {\n  await page.evaluate(() => {\n    if (document.getElementById('demo-subtitle')) return;\n    const bar = document.createElement('div');\n    bar.id = 'demo-subtitle';\n    bar.style.cssText = `\n      position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998;\n      text-align: center; padding: 12px 24px;\n      background: rgba(0, 0, 0, 0.75);\n      color: white; font-family: -apple-system, \"Segoe UI\", sans-serif;\n      font-size: 16px; font-weight: 500; letter-spacing: 0.3px;\n      transition: opacity 0.3s;\n      pointer-events: none;\n    `;\n    bar.textContent = '';\n    bar.style.opacity = '0';\n    document.body.appendChild(bar);\n  });\n}\n\nasync function showSubtitle(page, text) {\n  await page.evaluate((t) => {\n    const bar = document.getElementById('demo-subtitle');\n    if (!bar) return;\n    if (t) {\n      bar.textContent = t;\n      bar.style.opacity = '1';\n    } else {\n      bar.style.opacity = '0';\n    }\n  }, text);\n  if (text) await page.waitForTimeout(800);\n}\n```\n\nCall `injectSubtitleBar(page)` alongside `injectCursor(page)` after every navigation.\n\nUsage pattern:\n\n```javascript\nawait showSubtitle(page, 'Step 1 - Logging in');\nawait showSubtitle(page, 'Step 2 - Dashboard overview');\nawait showSubtitle(page, '');\n```\n\nGuidelines:\n\n- Keep subtitle text short, ideally under 60 characters.\n- Use `Step N - Action` format for consistency.\n- Clear the subtitle during long pauses where the UI can speak for itself.\n\n## Script Template\n\n```javascript\n'use strict';\nconst { chromium } = require('playwright');\nconst path = require('path');\nconst fs = require('fs');\n\nconst BASE_URL = process.env.QA_BASE_URL || 'http:\u002F\u002Flocalhost:3000';\nconst VIDEO_DIR = path.join(__dirname, 'screenshots');\nconst OUTPUT_NAME = 'demo-FEATURE.webm';\nconst REHEARSAL = process.argv.includes('--rehearse');\n\n\u002F\u002F Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick,\n\u002F\u002F typeSlowly, ensureVisible, and panElements here.\n\n(async () => {\n  const browser = await chromium.launch({ headless: true });\n\n  if (REHEARSAL) {\n    const context = await browser.newContext({ viewport: { width: 1280, height: 720 } });\n    const page = await context.newPage();\n    \u002F\u002F Navigate through the flow and run ensureVisible for each selector.\n    await browser.close();\n    return;\n  }\n\n  const context = await browser.newContext({\n    recordVideo: { dir: VIDEO_DIR, size: { width: 1280, height: 720 } },\n    viewport: { width: 1280, height: 720 }\n  });\n  const page = await context.newPage();\n\n  try {\n    await injectCursor(page);\n    await injectSubtitleBar(page);\n\n    await showSubtitle(page, 'Step 1 - Logging in');\n    \u002F\u002F login actions\n\n    await page.goto(`${BASE_URL}\u002Fdashboard`);\n    await injectCursor(page);\n    await injectSubtitleBar(page);\n    await showSubtitle(page, 'Step 2 - Dashboard overview');\n    \u002F\u002F pan dashboard\n\n    await showSubtitle(page, 'Step 3 - Main workflow');\n    \u002F\u002F action sequence\n\n    await showSubtitle(page, 'Step 4 - Result');\n    \u002F\u002F final reveal\n    await showSubtitle(page, '');\n  } catch (err) {\n    console.error('DEMO ERROR:', err.message);\n  } finally {\n    await context.close();\n    const video = page.video();\n    if (video) {\n      const src = await video.path();\n      const dest = path.join(VIDEO_DIR, OUTPUT_NAME);\n      try {\n        fs.copyFileSync(src, dest);\n        console.log('Video saved:', dest);\n      } catch (e) {\n        console.error('ERROR: Failed to copy video:', e.message);\n        console.error('  Source:', src);\n        console.error('  Destination:', dest);\n      }\n    }\n    await browser.close();\n  }\n})();\n```\n\nUsage:\n\n```bash\n# Phase 2: Rehearse\nnode demo-script.cjs --rehearse\n\n# Phase 3: Record\nnode demo-script.cjs\n```\n\n## Checklist Before Recording\n\n- [ ] Discovery phase completed\n- [ ] Rehearsal passes with all selectors OK\n- [ ] Headless mode enabled\n- [ ] Resolution set to `1280x720`\n- [ ] Cursor and subtitle overlays re-injected after every navigation\n- [ ] `showSubtitle(page, 'Step N - ...')` used at major transitions\n- [ ] `moveAndClick` used for all clicks with descriptive labels\n- [ ] `typeSlowly` used for visible input\n- [ ] No silent catches; helpers log warnings\n- [ ] Smooth scrolling used for content reveal\n- [ ] Key pauses are visible to a human viewer\n- [ ] Flow matches the requested story order\n- [ ] Script reflects the actual UI discovered in phase 1\n\n## Common Pitfalls\n\n1. Cursor disappears after navigation - re-inject it.\n2. Video is too fast - add pauses.\n3. Cursor is a dot instead of an arrow - use the SVG overlay.\n4. Cursor teleports - move before clicking.\n5. Select dropdowns look wrong - show the move, then pick the option.\n6. Modals feel abrupt - add a read pause before confirming.\n7. Video file path is random - copy it to a stable output name.\n8. Selector failures are swallowed - never use silent catch blocks.\n9. Field types were assumed - discover them first.\n10. Features were assumed - inspect the actual UI before scripting.\n11. Placeholder select values look real - watch for `\"0\"` and `\"Select...\"`.\n12. Popups create separate videos - capture popup pages explicitly and merge later if needed.\n",{"name":5,"origin":55,"description":7},"ECC","main","b0f0a87593c578a7898eccaf1b363f7f87c1f99b","plugins\u002FColin4k1024\u002Ftsp\u002Fskills\u002Fui-demo",468,"https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins","https:\u002F\u002Fhol.org\u002Fplugins\u002Fbest-codex-plugins","https:\u002F\u002Fgithub.com\u002Fhashgraph-online","https:\u002F\u002Fhol.org","Open-source standards and developer tools for interoperable AI agents: discovery, identity, communication, payments, privacy and security.","2026-11-11 02:22:54",{"source":8,"skillName":5,"commands":67,"prompt":77,"zipAvailable":78},[68,71,74],{"tool":69,"command":70},"npx","npx skills add hashgraph-online\u002Fawesome-codex-plugins --skill ui-demo",{"tool":72,"command":73},"bunx","bunx skills add hashgraph-online\u002Fawesome-codex-plugins --skill ui-demo",{"tool":75,"command":76},"pnpm","pnpm dlx skills add hashgraph-online\u002Fawesome-codex-plugins --skill ui-demo","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002FColin4k1024\u002Ftsp\u002Fskills\u002Fui-demo\u002FSKILL.md",true,[],[81,107,130,159,179,193],{"skillNo":82,"name":83,"nameZh":6,"description":84,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":85,"categories":86,"keywords":87,"publishedAt":50},"01M716A6ETNB9B1SQ3GXZC75VR","deja-search","deja-vu memory — search the user's past AI coding sessions with the deja CLI. Holds what they already settled and never wrote into the repo (naming rules, banned or already-tried tools, required checks before merge, preferred values, who owns what). Use before your first edit in a task, before you call a change done or ready to merge, before you recommend a tool, library, design or reviewer, before re-debugging an error that may already be solved, when they say 'didn't we fix this before', 'what did we decide about X' or 'I already have that', and before telling them something on this machine does not exist.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-search\u002FSKILL.md",[],[88,89,90,91,92,93,94,95,96,97,98,33,99,100,101,102,103,104,105,106],"search","deja search","error","ready","never","memory","re","decide","fix","design","debugging","you","done","reviewer","io","change","cli","merge","past",{"skillNo":108,"name":109,"nameZh":6,"description":110,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":111,"categories":112,"keywords":113,"publishedAt":50},"01M716A3J2W5SENSE9VGMXB375","deja-reflect","End-of-session reflection and memory curation with deja-vu. Review what was decided, what commands broke and what repaired them, and record durable project rules or decisions with deja remember so the next session starts with them.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fvshulcz\u002Fdeja-vu\u002Fskills\u002Fdeja-reflect\u002FSKILL.md",[],[114,115,116,117,93,118,119,120,121,122,123,124,125,102,36,40,126,127,128,129],"reflect","deja reflect","brew","remember","project rules","project","session","end","reflection","Rules","decisions","review","github","next","https","node",{"skillNo":131,"name":132,"nameZh":6,"description":133,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":134,"categories":135,"keywords":143,"publishedAt":50},"01M715T3RR4BAYSR57HPPTJ0PF","revid","Make, edit, export and post AI videos with Revid (revid.ai) through the Revid MCP server. Use whenever the user wants a short-form or long-form video made (from an idea, a script, a URL, an article, a PDF, a tweet, a product page, their own clips, or a song), wants to find what is going viral on TikTok, YouTube, Instagram or X before making something, wants to edit or re-export an existing Revid project, generate a standalone AI image or clip, make a series episode, or publish and schedule a finished video to connected social accounts. Covers setup (hosted MCP with OAuth, or an API key), the 36 tools, credits, polling and the rules for publishing. Routes to the more specific revid-* skills when one fits.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Ftmakersas\u002Frevid-skills\u002Fskills\u002Frevid\u002FSKILL.md",[136,139,140],{"categoryNo":137,"categoryName":138,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":141,"categoryName":142,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[132,46,144,145,146,147,119,148,94,149,150,151,152,33,153,154,155,156,157,158],"short-form","standalone","PDF","viral","tiktok","short","social","MCP","song","URL","image","mcp server","schedule","api","publish",{"skillNo":160,"name":161,"nameZh":6,"description":162,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":163,"categories":164,"keywords":165,"publishedAt":50},"01M71569ZM2X3H5RBFK8PVKMK2","review-study","Review a QuestionPunk survey before launch for wording, answer choices, branching, and missing settings. Use for check my survey or review this draft before publishing.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Freview-study\u002FSKILL.md",[],[166,167,125,168,169,170,171,172,41,173,174,175,176,177,178],"study","review study","for","answer","missing","survey","publishing","check","draft","settings","launch","my","branching",{"skillNo":180,"name":181,"nameZh":6,"description":182,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":183,"categories":184,"keywords":185,"publishedAt":50},"01M71567GV0C35YQBY0DPGR86B","manage-study","Find QuestionPunk studies, check status, publish an explicitly requested draft, or retrieve its participant link. Use for find my survey, publish this study, or how many people responded.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Fmanage-study\u002FSKILL.md",[],[186,166,187,168,171,41,188,173,174,158,189,190,191,192,177],"manage study","manage","people","how","find","link","status",{"skillNo":194,"name":195,"nameZh":6,"description":196,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":197,"categories":198,"keywords":199,"publishedAt":50},"01M71565A8TCA01AZQZRGRYMFZ","create-study","Create a saved QuestionPunk survey draft from a research brief or edit specified questions. Use for requests such as make a customer feedback survey or shorten my onboarding study.","https:\u002F\u002Fgithub.com\u002Fhashgraph-online\u002Fawesome-codex-plugins\u002Fblob\u002Fmain\u002Fplugins\u002Fquestionpunk\u002Fcodex-plugin\u002Fskills\u002Fcreate-study\u002FSKILL.md",[],[200,166,48,201,202,203,168,204,171,205,41,206,207,174,208,209,210,211,212,177],"create study","brief","as","feedback","customer feedback","research brief","shorten","saved","research","requests","customer","questions","edit"]