← 返回 Skills 市场
leshems

AI Demo Recorder

作者 leshems · GitHub ↗ · v1.0.0 · MIT-0
cross-platform ✓ 安全检测通过
114
总下载
0
收藏
0
当前安装
1
版本数
在 OpenClaw 中安装
/install ai-demo-recorder
功能描述
Record AI-driven browser demos with screencli. One command creates a polished screen recording with gradient backgrounds, auto-zoom, click highlights, and cu...
使用说明 (SKILL.md)

What It Does

screencli records an AI-driven browser session and produces a polished MP4 with gradient backgrounds, auto-zoom, click highlights, and cursor trails. The AI agent navigates the target URL following your prompt instructions, then the recording is composed with effects and auto-uploaded to screencli.sh with a shareable link. No video editing needed.

When to Use This Skill

Use this skill when the user asks to:

  • Record a demo or walkthrough of a web app, feature, or workflow
  • Create a screencast or video showing how something works in a browser
  • Generate a shareable link to a screen recording
  • Make a GIF or video for a README, PR, docs, or social media
  • Record a before/after to show a UI change or bug fix
  • Demo a deploy or staging environment visually

Do not use this skill for:

  • Screenshots (use a screenshot tool instead)
  • Non-browser tasks (terminal recordings, desktop apps)
  • Editing existing videos

Quick Start

Record a demo and get a shareable link:

npx screencli record https://example.com -p "Click the Sign Up button, fill in the form with test data, and submit"

On first run, the CLI opens a browser for GitHub login automatically. After that, it records the session, applies effects, uploads, and prints a shareable URL.

Recording

Command

npx screencli record [url] -p "\x3Cprompt>" [options]

The URL and prompt are required. If omitted, the CLI prompts interactively.

Key Options

Flag Default Description
-p, --prompt \x3Ctext> (required) Instructions for the AI agent
--background \x3Cname> auto Override gradient: midnight, ember, forest, nebula, slate, copper
--viewport \x3CWxH> 1920x1080 Browser viewport dimensions
--login off Open browser for manual login before AI takes over
--auth \x3Cname> Save/load auth state by name
--local off Skip cloud upload
--unlisted off Upload as unlisted (not on public profile)
--max-steps \x3Cn> 50 Maximum agent iterations
--padding \x3Cpercent> 8 Background padding (0-50%)
--corner-radius \x3Cpx> 12 Video corner radius
--no-shadow off Disable drop shadow
-m, --model \x3Cmodel> claude-sonnet-4-20250514 Claude model to use
--slow-mo \x3Cms> 0 Extra delay between actions
-o, --output \x3Cdir> ./recordings Output directory
-v, --verbose off Debug logging

Examples

Simple — record a public page:

npx screencli record https://myapp.com -p "Navigate to the pricing page and compare the Free and Pro plans"

With auth — login to a private app first:

# First run: human logs in, auth state saved
npx screencli record https://app.internal.com -p "Show the dashboard metrics" --login --auth myapp

# Next runs: reuses saved session
npx screencli record https://app.internal.com -p "Export the monthly report" --auth myapp

Exporting

Export a recording with platform-specific presets:

npx screencli export \x3Crecording-dir> --preset \x3Cname>

Presets

Preset Resolution Aspect Format Max Duration
youtube 1920x1080 16:9 mp4
twitter 1280x720 16:9 mp4 140s
instagram 1080x1920 9:16 mp4 90s
tiktok 1080x1920 9:16 mp4
linkedin 1080x1080 1:1 mp4
github-gif 800x450 16:9 gif 12s

Example

npx screencli export ./recordings/abc123 --preset twitter

Export also accepts --background, --padding, --corner-radius, --no-shadow, --no-zoom, --no-highlight, and --no-cursor.

Auth for Private Apps

To record behind a login wall, use --login and --auth together on the first run:

npx screencli record https://app.example.com -p "..." --login --auth myapp

The browser opens for you to log in manually. Once done, the AI agent takes over and auth state is saved to ~/.screencli/auth/myapp.json.

On subsequent runs, pass just --auth:

npx screencli record https://app.example.com -p "..." --auth myapp

If a session expires, re-run with --login --auth \x3Cname> to refresh it.

Cloud

Recordings auto-upload to screencli.sh by default. Skip with --local.

Commands

Command Description
npx screencli login Sign in to screencli cloud
npx screencli logout Sign out
npx screencli whoami Show current user, plan, and credits
npx screencli recordings List your recordings with links
npx screencli upload \x3Cdir> Upload a local recording to the cloud
npx screencli delete \x3Cid> Delete a cloud recording
npx screencli render \x3Cid> Re-render on the cloud with different background/preset

Credits

1 credit = 10 agent steps. Free tier includes 15 credits/month.

After a recording uploads, the CLI shows credits used and remaining.

Effects

All recordings get automatic post-processing:

  • Gradient background — automatically selected (override with --background \x3Cname>)
  • Auto-trim — removes idle time between actions
  • Auto-zoom — zooms into the active area during interactions
  • Click highlights — visual pulse on each click
  • Cursor trail — smooth cursor movement overlay

Toggle individual effects off with --no-zoom, --no-highlight, --no-cursor.

See references/effects.md for gradient colors and the full effects pipeline.

Troubleshooting

Problem Fix
Not logged in Run npx screencli record — login is triggered automatically
FFmpeg missing brew install ffmpeg (macOS) or see ffmpeg.org
Auth expired Re-run with --login --auth \x3Cname>
Agent stuck or looping Refine prompt, lower --max-steps
Recording too long Use --max-steps to limit, or be more specific in prompt
Upload failed Check npx screencli whoami for credits, retry with npx screencli upload \x3Cdir>

References

安全使用建议
This package is internally consistent with an AI-driven screen-recording CLI, but before using it consider: (1) npx screencli will fetch and run code from the npm registry at runtime — only run it if you trust the upstream package and publisher; (2) recordings (video + events.json) and browser auth state are saved locally under ~/.screencli and are uploaded to screencli.sh by default — use --local and/or --unlisted if the content is sensitive; (3) saved auth files contain session data (cookies/localStorage) and should be protected or removed when no longer needed (use npx screencli logout and delete ~/.screencli/auth/<name>.json); (4) review the screencli service's privacy/terms at https://screencli.sh before uploading private pages; (5) because this is instruction-only with no bundled code, there is no static inspectable runtime code in the skill package itself — runtime behavior depends on the external screencli CLI that npx will fetch, so inspect that project or its npm package if you need higher assurance.
能力评估
Purpose & Capability
The name/description match the SKILL.md: the skill instructs the agent to run the screencli CLI (npx screencli record) to capture browser demos, apply effects, and upload. Declared runtime requirements (Node.js, FFmpeg) and auth usage (browser login, saved auth state) are coherent with a remote-uploading screen-recording tool.
Instruction Scope
Instructions are focused on recording browser sessions and managing recordings/auth. They explicitly save auth state to ~/.screencli/auth/<name>.json and config to ~/.screencli/config.json and upload recordings to screencli.sh by default. This is expected, but it means private site content and browser session data (cookies/localStorage) can be captured and uploaded unless the user uses --local or unlisted options. The SKILL.md does not instruct reading unrelated system files or env vars.
Install Mechanism
No install spec is included in the skill package itself (instruction-only). The SKILL.md uses npx to run screencli, which causes a dynamic package fetch and execution from npm at runtime. That is normal for CLI usage but carries the usual runtime trust implications: code will be downloaded and executed on the user's machine when run.
Credentials
The skill does not request environment variables or external credentials in the registry metadata. Runtime behavior will create and use files under the user's home (~/.screencli/) to store auth tokens, browser session state, and config. Those are proportional to the described purpose but are sensitive artifacts — recordings and saved auth state may contain private information.
Persistence & Privilege
The skill does not request always:true and does not modify other skills. It will cause the screencli CLI to store its own config and auth in the user's home directory, which is normal for a CLI that supports persistent login sessions.
如何使用
  1. 确保已安装 OpenClaw(本地或 Docker 部署)
  2. 在对话框中输入安装命令:/install ai-demo-recorder
  3. 安装完成后,直接呼叫该 Skill 的名称或使用 /ai-demo-recorder 触发
  4. 根据 Skill 的参数说明提供必要输入,即可获得结构化输出
版本历史
v1.0.0
- Initial release of screencli-record skill. - Enables AI-driven browser demo recording with a single command. - Produces polished MP4 videos with gradient backgrounds, auto-zoom, click highlights, and cursor trails. - Supports authentication flows, cloud uploads, and generating shareable links. - Includes export presets for platforms like YouTube, Twitter, Instagram, and GitHub. - Requires Node.js 18+ and FFmpeg; works on macOS, Linux, and Windows.
元数据
Slug ai-demo-recorder
版本 1.0.0
许可证 MIT-0
累计安装 0
当前安装数 0
历史版本数 1
常见问题

AI Demo Recorder 是什么?

Record AI-driven browser demos with screencli. One command creates a polished screen recording with gradient backgrounds, auto-zoom, click highlights, and cu... 它是一个面向 Claude Code / OpenClaw 的 AI Agent Skill 插件,目前累计下载 114 次。

如何安装 AI Demo Recorder?

在 OpenClaw 或 Claude Code 对话框中运行命令「/install ai-demo-recorder」即可一键安装,无需额外配置。

AI Demo Recorder 是免费的吗?

是的,AI Demo Recorder 完全免费,采用 MIT-0 许可证,可自由下载、安装和使用。

AI Demo Recorder 支持哪些平台?

AI Demo Recorder 跨平台运行,可在任意部署了 OpenClaw / Claude Code 的环境中使用(cross-platform)。

谁开发了 AI Demo Recorder?

由 leshems(@leshems)开发并维护,当前版本 v1.0.0。

💬 留言讨论