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 not

, 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, [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
)
)
;
What to look for
Form fields
: Are they
<select>
,
<input>
, custom dropdowns, or comboboxes?
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"
.
Rich text
: Does the comment box support
@mentions
,
#tags
, markdown, or emoji? Check placeholder text.
Required fields
: Which fields block form submission? Check
required
,
*
in labels, and try submitting empty to see validation errors.
Dynamic content
: Do fields appear after other fields are filled?
Button labels
: Exact text such as
"Submit"
,
"Submit Request"
, or
"Send"
.
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.
Output
A field map for each page, used to write correct selectors in the script. Example:
/purchase-requests/new:
- Budget Code: <select> (first select on page, 4 options)
- Desired Delivery: <input type="date">
- Context: <textarea> (not input)
- BOM table: inline-editable cells with span.cursor-pointer -> input pattern
- Submit: <button> text="Submit"
/purchase-requests/N (detail):
- Comment: <input placeholder="Type a message..."> supports @user and #PR tags
- Send: <button> text="Send" (disabled until input has content)
Phase 2: Rehearse
Run through all steps without recording. Verify every selector resolves.
Why
Silent selector failures are the main reason demo recordings break. Rehearsal catches them before you waste a recording.
How
Use
ensureVisible
, a wrapper that logs and fails loudly:
async
function
ensureVisible
(
page
,
locator
,
label
)
{
const
el
=
typeof
locator
===
'string'
?
page
.
locator
(
locator
)
.
first
(
)
:
locator
;
const
visible
=
await
el
.
isVisible
(
)
.
catch
(
(
)
=>
false
)
;
if
(
!
visible
)
{
const
msg
=
`
REHEARSAL FAIL: "
${
label
}
" not found - selector:
${
typeof
locator
===
'string'
?
locator
:
'(locator object)'
}
`
;
console
.
error
(
msg
)
;
const
found
=
await
page
.
evaluate
(
(
)
=>
{
return
Array
.
from
(
document
.
querySelectorAll
(
'button, input, select, textarea, a'
)
)
.
filter
(
el
=>
el
.
offsetParent
!==
null
)
.
map
(
el
=>
`
${
el
.
tagName
}
[
${
el
.
type
||
''
}
] "
${
el
.
textContent
?.
trim
(
)
.
substring
(
0
,
30
)
}
"
`
)
.
join
(
'\n  '
)
;
}
)
;
console
.
error
(
'  Visible elements:\n  '
+
found
)
;
return
false
;
}
console
.
log
(
`
REHEARSAL OK: "
${
label
}
"
`
)
;
return
true
;
}
Rehearsal script structure
const
steps
=
[
{
label
:
'Login email field'
,
selector
:
'#email'
}
,
{
label
:
'Login submit'
,
selector
:
'button[type="submit"]'
}
,
{
label
:
'New Request button'
,
selector
:
'button:has-text("New Request")'
}
,
{
label
:
'Budget Code select'
,
selector
:
'select'
}
,
{
label
:
'Delivery date'
,
selector
:
'input[type="date"]:visible'
}
,
{
label
:
'Description field'
,
selector
:
'textarea:visible'
}
,
{
label
:
'Add Item button'
,
selector
:
'button:has-text("Add Item")'
}
,
{
label
:
'Submit button'
,
selector
:
'button:has-text("Submit")'
}
,
]
;
let
allOk
=
true
;
for
(
const
step
of
steps
)
{
if
(
!
await
ensureVisible
(
page
,
step
.
selector
,
step
.
label
)
)
{
allOk
=
false
;
}
}
if
(
!
allOk
)
{
console
.
error
(
'REHEARSAL FAILED - fix selectors before recording'
)
;
process
.
exit
(
1
)
;
}
console
.
log
(
'REHEARSAL PASSED - all selectors verified'
)
;
When rehearsal fails
Read the visible-element dump.
Find the correct selector.
Update the script.
Re-run rehearsal.
Only proceed when every selector passes.
Phase 3: Record
Only after discovery and rehearsal pass should you create the recording.
Recording Principles
1. Storytelling Flow
Plan the video as a story. Follow user-specified order, or use this default:
Entry
: Login or navigate to the starting point
Context
: Pan the surroundings so viewers orient themselves
Action
: Perform the main workflow steps
Variation
: Show a secondary feature such as settings, theme, or localization
Result
: Show the outcome, confirmation, or new state
2. Pacing
After login:
4s
After navigation:
3s
After clicking a button:
2s
Between major steps:
1.5-2s
After the final action:
3s
Typing delay:
25-40ms
per character
3. Cursor Overlay
Inject an SVG arrow cursor that follows mouse movements:
async
function
injectCursor
(
page
)
{
await
page
.
evaluate
(
(
)
=>
{
if
(
document
.
getElementById
(
'demo-cursor'
)
)
return
;
const
cursor
=
document
.
createElement
(
'div'
)
;
cursor
.
id
=
'demo-cursor'
;
cursor
.
innerHTML
=
`
<
svg
width
=
"
24
"
height
=
"
24
"
viewBox
=
"
0 0 24 24
"
fill
=
"
none
"
xmlns
=
"
http://www.w3.org/2000/svg
"
>
<
path
d
=
"
M5 3L19 12L12 13L9 20L5 3Z
"
fill
=
"
white
"
stroke
=
"
black
"
stroke-width
=
"
1.5
"
stroke-linejoin
=
"
round
"
/>
</
svg
>
`
;
cursor
.
style
.
cssText
=
`
position: fixed; z-index: 999999; pointer-events: none;
width: 24px; height: 24px;
transition: left 0.1s, top 0.1s;
filter: drop-shadow(1px 1px 2px rgba(0,0,0,0.3));
`
;
cursor
.
style
.
left
=
'0px'
;
cursor
.
style
.
top
=
'0px'
;
document
.
body
.
appendChild
(
cursor
)
;
document
.
addEventListener
(
'mousemove'
,
(
e
)
=>
{
cursor
.
style
.
left
=
e
.
clientX
+
'px'
;
cursor
.
style
.
top
=
e
.
clientY
+
'px'
;
}
)
;
}
)
;
}
Call
injectCursor(page)
after every page navigation because the overlay is destroyed on navigate.
4. Mouse Movement
Never teleport the cursor. Move to the target before clicking:
async
function
moveAndClick
(
page
,
locator
,
label
,
opts
=
{
}
)
{
const
{
postClickDelay
=
800
,
...
clickOpts
}
=
opts
;
const
el
=
typeof
locator
===
'string'
?
page
.
locator
(
locator
)
.
first
(
)
:
locator
;
const
visible
=
await
el
.
isVisible
(
)
.
catch
(
(
)
=>
false
)
;
if
(
!
visible
)
{
console
.
error
(
`
WARNING: moveAndClick skipped - "
${
label
}
" not visible
`
)
;
return
false
;
}
try
{
await
el
.
scrollIntoViewIfNeeded
(
)
;
await
page
.
waitForTimeout
(
300
)
;
const
box
=
await
el
.
boundingBox
(
)
;
if
(
box
)
{
await
page
.
mouse
.
move
(
box
.
x
+
box
.
width
/
2
,
box
.
y
+
box
.
height
/
2
,
{
steps
:
10
}
)
;
await
page
.
waitForTimeout
(
400
)
;
}
await
el
.
click
(
clickOpts
)
;
}
catch
(
e
)
{
console
.
error
(
`
WARNING: moveAndClick failed on "
${
label
}
":
${
e
.
message
}
`
)
;
return
false
;
}
await
page
.
waitForTimeout
(
postClickDelay
)
;
return
true
;
}
Every call should include a descriptive
label
for debugging.
5. Typing
Type visibly, not instant-fill:
async
function
typeSlowly
(
page
,
locator
,
text
,
label
,
charDelay
=
35
)
{
const
el
=
typeof
locator
===
'string'
?
page
.
locator
(
locator
)
.
first
(
)
:
locator
;
const
visible
=
await
el
.
isVisible
(
)
.
catch
(
(
)
=>
false
)
;
if
(
!
visible
)
{
console
.
error
(
`
WARNING: typeSlowly skipped - "
${
label
}
" not visible
`
)
;
return
false
;
}
await
moveAndClick
(
page
,
el
,
label
)
;
await
el
.
fill
(
''
)
;
await
el
.
pressSequentially
(
text
,
{
delay
:
charDelay
}
)
;
await
page
.
waitForTimeout
(
500
)
;
return
true
;
}
6. Scrolling
Use smooth scroll instead of jumps:
await
page
.
evaluate
(
(
)
=>
window
.
scrollTo
(
{
top
:
400
,
behavior
:
'smooth'
}
)
)
;
await
page
.
waitForTimeout
(
1500
)
;
7. Dashboard Panning
When showing a dashboard or overview page, move the cursor across key elements:
async
function
panElements
(
page
,
selector
,
maxCount
=
6
)
{
const
elements
=
await
page
.
locator
(
selector
)
.
all
(
)
;
for
(
let
i
=
0
;
i
<
Math
.
min
(
elements
.
length
,
maxCount
)
;
i
++
)
{
try
{
const
box
=
await
elements
[
i
]
.
boundingBox
(
)
;
if
(
box
&&
box
.
y
<
700
)
{
await
page
.
mouse
.
move
(
box
.
x
+
box
.
width
/
2
,
box
.
y
+
box
.
height
/
2
,
{
steps
:
8
}
)
;
await
page
.
waitForTimeout
(
600
)
;
}
}
catch
(
e
)
{
console
.
warn
(
`
WARNING: panElements skipped element
${
i
}
(selector: "
${
selector
}
"):
${
e
.
message
}
`
)
;
}
}
}
8. Subtitles
Inject a subtitle bar at the bottom of the viewport:
async
function
injectSubtitleBar
(
page
)
{
await
page
.
evaluate
(
(
)
=>
{
if
(
document
.
getElementById
(
'demo-subtitle'
)
)
return
;
const
bar
=
document
.
createElement
(
'div'
)
;
bar
.
id
=
'demo-subtitle'
;
bar
.
style
.
cssText
=
`
position: fixed; bottom: 0; left: 0; right: 0; z-index: 999998;
text-align: center; padding: 12px 24px;
background: rgba(0, 0, 0, 0.75);
color: white; font-family: -apple-system, "Segoe UI", sans-serif;
font-size: 16px; font-weight: 500; letter-spacing: 0.3px;
transition: opacity 0.3s;
pointer-events: none;
`
;
bar
.
textContent
=
''
;
bar
.
style
.
opacity
=
'0'
;
document
.
body
.
appendChild
(
bar
)
;
}
)
;
}
async
function
showSubtitle
(
page
,
text
)
{
await
page
.
evaluate
(
(
t
)
=>
{
const
bar
=
document
.
getElementById
(
'demo-subtitle'
)
;
if
(
!
bar
)
return
;
if
(
t
)
{
bar
.
textContent
=
t
;
bar
.
style
.
opacity
=
'1'
;
}
else
{
bar
.
style
.
opacity
=
'0'
;
}
}
,
text
)
;
if
(
text
)
await
page
.
waitForTimeout
(
800
)
;
}
Call
injectSubtitleBar(page)
alongside
injectCursor(page)
after every navigation.
Usage pattern:
await
showSubtitle
(
page
,
'Step 1 - Logging in'
)
;
await
showSubtitle
(
page
,
'Step 2 - Dashboard overview'
)
;
await
showSubtitle
(
page
,
''
)
;
Guidelines:
Keep subtitle text short, ideally under 60 characters.
Use
Step N - Action
format for consistency.
Clear the subtitle during long pauses where the UI can speak for itself.
Script Template
'use strict'
;
const
{
chromium
}
=
require
(
'playwright'
)
;
const
path
=
require
(
'path'
)
;
const
fs
=
require
(
'fs'
)
;
const
BASE_URL
=
process
.
env
.
QA_BASE_URL
||
'http://localhost:3000'
;
const
VIDEO_DIR
=
path
.
join
(
__dirname
,
'screenshots'
)
;
const
OUTPUT_NAME
=
'demo-FEATURE.webm'
;
const
REHEARSAL
=
process
.
argv
.
includes
(
'--rehearse'
)
;
// Paste injectCursor, injectSubtitleBar, showSubtitle, moveAndClick,
// typeSlowly, ensureVisible, and panElements here.
(
async
(
)
=>
{
const
browser
=
await
chromium
.
launch
(
{
headless
:
true
}
)
;
if
(
REHEARSAL
)
{
const
context
=
await
browser
.
newContext
(
{
viewport
:
{
width
:
1280
,
height
:
720
}
}
)
;
const
page
=
await
context
.
newPage
(
)
;
// Navigate through the flow and run ensureVisible for each selector.
await
browser
.
close
(
)
;
return
;
}
const
context
=
await
browser
.
newContext
(
{
recordVideo
:
{
dir
:
VIDEO_DIR
,
size
:
{
width
:
1280
,
height
:
720
}
}
,
viewport
:
{
width
:
1280
,
height
:
720
}
}
)
;
const
page
=
await
context
.
newPage
(
)
;
try
{
await
injectCursor
(
page
)
;
await
injectSubtitleBar
(
page
)
;
await
showSubtitle
(
page
,
'Step 1 - Logging in'
)
;
// login actions
await
page
.
goto
(
`
${
BASE_URL
}
/dashboard
`
)
;
await
injectCursor
(
page
)
;
await
injectSubtitleBar
(
page
)
;
await
showSubtitle
(
page
,
'Step 2 - Dashboard overview'
)
;
// pan dashboard
await
showSubtitle
(
page
,
'Step 3 - Main workflow'
)
;
// action sequence
await
showSubtitle
(
page
,
'Step 4 - Result'
)
;
// final reveal
await
showSubtitle
(
page
,
''
)
;
}
catch
(
err
)
{
console
.
error
(
'DEMO ERROR:'
,
err
.
message
)
;
}
finally
{
await
context
.
close
(
)
;
const
video
=
page
.
video
(
)
;
if
(
video
)
{
const
src
=
await
video
.
path
(
)
;
const
dest
=
path
.
join
(
VIDEO_DIR
,
OUTPUT_NAME
)
;
try
{
fs
.
copyFileSync
(
src
,
dest
)
;
console
.
log
(
'Video saved:'
,
dest
)
;
}
catch
(
e
)
{
console
.
error
(
'ERROR: Failed to copy video:'
,
e
.
message
)
;
console
.
error
(
'  Source:'
,
src
)
;
console
.
error
(
'  Destination:'
,
dest
)
;
}
}
await
browser
.
close
(
)
;
}
}
)
(
)
;
Usage:
# Phase 2: Rehearse
node
demo-script.cjs
--rehearse
# Phase 3: Record
node
demo-script.cjs
Checklist Before Recording
Discovery phase completed
Rehearsal passes with all selectors OK
Headless mode enabled
Resolution set to
1280x720
Cursor and subtitle overlays re-injected after every navigation
showSubtitle(page, 'Step N - ...')
used at major transitions
moveAndClick
used for all clicks with descriptive labels
typeSlowly
used for visible input
No silent catches; helpers log warnings
Smooth scrolling used for content reveal
Key pauses are visible to a human viewer
Flow matches the requested story order
Script reflects the actual UI discovered in phase 1
Common Pitfalls
Cursor disappears after navigation - re-inject it.
Video is too fast - add pauses.
Cursor is a dot instead of an arrow - use the SVG overlay.
Cursor teleports - move before clicking.
Select dropdowns look wrong - show the move, then pick the option.
Modals feel abrupt - add a read pause before confirming.
Video file path is random - copy it to a stable output name.
Selector failures are swallowed - never use silent catch blocks.
Field types were assumed - discover them first.
Features were assumed - inspect the actual UI before scripting.
Placeholder select values look real - watch for
"0"
and
"Select..."
.
Popups create separate videos - capture popup pages explicitly and merge later if needed.
                </article>

<a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a>
            </div>

<aside class="sidebar">
                <section class="related-skills" id="relatedSkillsSection">
                    <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2>
                    <div class="related-list" id="relatedSkillsList">
                        
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/security-review" class="related-card">
                                <div class="related-name">security-review</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">8.4K</span>
                                </div>
                                <div class="related-desc">Security Review Skill This skill ensures all code follows se...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/golang-patterns" class="related-card">
                                <div class="related-name">golang-patterns</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">8.1K</span>
                                </div>
                                <div class="related-desc">Go Development Patterns  Idiomatic Go patterns and best prac...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/coding-standards" class="related-card">
                                <div class="related-name">coding-standards</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">7.2K</span>
                                </div>
                                <div class="related-desc">Coding Standards & Best Practices Universal coding standards...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/frontend-patterns" class="related-card">
                                <div class="related-name">frontend-patterns</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">7.1K</span>
                                </div>
                                <div class="related-desc">Frontend Development Patterns Modern frontend patterns for R...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/backend-patterns" class="related-card">
                                <div class="related-name">backend-patterns</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">7.1K</span>
                                </div>
                                <div class="related-desc">Backend Development Patterns Backend architecture patterns a...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/affaan-m/everything-claude-code/golang-testing" class="related-card">
                                <div class="related-name">golang-testing</div>
                                <div class="related-meta">
                                    <span class="related-owner">affaan-m</span>
                                    <span class="related-installs">6.8K</span>
                                </div>
                                <div class="related-desc">Go Testing Patterns  Comprehensive Go testing patterns for w...</div>
                            </a>
                            
                        
                    </div>
                </section>

</aside>
        </div>
    </div>

// Load language files (only current + fallback for performance)
        async function loadLanguageResources() {
            const savedLang = localStorage.getItem('i18nextLng') || 'en';
            const langsToLoad = new Set([savedLang, 'en']); // current + fallback
            await Promise.all([...langsToLoad].map(async (lang) => {
                try {
                    const response = await fetch(`/locales/${lang}.json?v=20260403`);
                    if (response.ok) {
                        resources[lang] = { translation: await response.json() };
                    }
                } catch (error) {
                    console.warn(`Failed to load ${lang} language file:`, error);
                }
            }));
        }

// Load a single language on demand (for language switching)
        async function loadLanguage(lang) {
            if (resources[lang]) return;
            try {
                const response = await fetch(`/locales/${lang}.json?v=20260403`);
                if (response.ok) {
                    resources[lang] = { translation: await response.json() };
                    i18next.addResourceBundle(lang, 'translation', resources[lang].translation);
                }
            } catch (error) {
                console.warn(`Failed to load ${lang} language file:`, error);
            }
        }

// Initialize i18next
        async function initI18n() {
            try {
                await loadLanguageResources();
                
                // Filter out null values from resources
                const validResources = {};
                for (const [lang, data] of Object.entries(resources)) {
                    if (data !== null) {
                        validResources[lang] = data;
                    }
                }
                
                console.log('Loaded languages:', Object.keys(validResources));
                console.log('zh-CN resource:', validResources['zh-CN']);
                console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home);
                
                // 检查是否有保存的语言偏好
                const savedLang = localStorage.getItem('i18nextLng');
                // 如果没有保存的语言偏好，默认使用英文
                const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) 
                    ? savedLang 
                    : 'en';
                
                await i18next
                    .use(i18nextBrowserLanguageDetector)
                    .init({
                        lng: defaultLang,  // 强制设置初始语言
                        fallbackLng: 'en',
                        supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'],
                        resources: validResources,
                        detection: {
                            order: ['localStorage'],  // 只使用 localStorage，不检测浏览器语言
                            caches: ['localStorage'],
                            lookupLocalStorage: 'i18nextLng'
                        },
                        interpolation: {
                            escapeValue: false
                        }
                    });

console.log('i18next initialized, language:', i18next.language);
                console.log('Test translation:', i18next.t('detail.home'));

// Set initial language in selector
                const langSwitcher = document.getElementById('langSwitcher');
                langSwitcher.value = i18next.language;

// Update page language
                updatePageLanguage();

// Language switch event
                langSwitcher.addEventListener('change', async (e) => {
                    await loadLanguage(e.target.value); // load on demand
                    i18next.changeLanguage(e.target.value).then(() => {
                        updatePageLanguage();
                        localStorage.setItem('i18nextLng', e.target.value);
                    });
                });
            } catch (error) {
                console.error('i18next init failed:', error);
            }
        }

// Translation helper
        function t(key, options = {}) {
            return i18next.t(key, options);
        }

// Update all translatable elements
        function updatePageLanguage() {
            // Update HTML lang attribute
            document.documentElement.lang = i18next.language;

// Update elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                el.textContent = t(key);
            });
        }

// Copy command function
        function copyCommand() {
            const command = document.getElementById('installCommand').textContent;
            const btn = document.getElementById('copyBtn');
            
            navigator.clipboard.writeText(command).then(() => {
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            }).catch(() => {
                // Fallback for non-HTTPS
                const textArea = document.createElement('textarea');
                textArea.value = command;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

// Initialize
        document.getElementById('copyBtn').addEventListener('click', copyCommand);
        initI18n();

// 异步加载相关 Skills
        async function loadRelatedSkills() {
            const owner = 'affaan-m';
            const skillName = 'ui-demo';
            const currentLang = 'zh-CN';
            const listContainer = document.getElementById('relatedSkillsList');
            const section = document.getElementById('relatedSkillsSection');

try {
                const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`);
                
                if (!response.ok) {
                    throw new Error('Failed to load');
                }

const data = await response.json();
                const relatedSkills = data.related_skills || [];

if (relatedSkills.length === 0) {
                    // 没有相关推荐时隐藏整个区域
                    section.style.display = 'none';
                    return;
                }

// 渲染相关 Skills
                listContainer.innerHTML = relatedSkills.map(skill => {
                    const desc = skill.description || '';
                    const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
                    return `
                        <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in">
                            <div class="related-name">${escapeHtml(skill.skill_name)}</div>
                            <div class="related-meta">
                                <span class="related-owner">${escapeHtml(skill.owner)}</span>
                                <span class="related-installs">${skill.installs}</span>
                            </div>
                            <div class="related-desc">${escapeHtml(truncatedDesc)}</div>
                        </a>
                    `;
                }).join('');

} catch (error) {
                console.error('Failed to load related skills:', error);
                // 加载失败时显示提示或隐藏
                listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>';
            }
        }

// HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

// 页面加载完成后异步加载相关 Skills
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadRelatedSkills);
        } else {
            loadRelatedSkills();
        }

</script>

</body>
</html>

安装