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:
CODEBLOCK0
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
CODEBLOCK1
The URL and prompt are required. If omitted, the CLI prompts interactively.
Key Options
| Flag | Default | Description |
|---|
| INLINECODE0 | (required) | Instructions for the AI agent |
| INLINECODE1 |
auto | Override gradient:
midnight,
ember,
forest,
nebula,
slate,
copper |
|
--viewport <WxH> |
1920x1080 | Browser viewport dimensions |
|
--login | off | Open browser for manual login before AI takes over |
|
--auth <name> | — | Save/load auth state by name |
|
--local | off | Skip cloud upload |
|
--unlisted | off | Upload as unlisted (not on public profile) |
|
--max-steps <n> |
50 | Maximum agent iterations |
|
--padding <percent> |
8 | Background padding (0-50%) |
|
--corner-radius <px> |
12 | Video corner radius |
|
--no-shadow | off | Disable drop shadow |
|
-m, --model <model> |
claude-sonnet-4-20250514 | Claude model to use |
|
--slow-mo <ms> |
0 | Extra delay between actions |
|
-o, --output <dir> |
./recordings | Output directory |
|
-v, --verbose | off | Debug logging |
Examples
Simple — record a public page:
CODEBLOCK2
With auth — login to a private app first:
CODEBLOCK3
Exporting
Export a recording with platform-specific presets:
CODEBLOCK4
Presets
| Preset | Resolution | Aspect | Format | Max Duration |
|---|
| INLINECODE28 | 1920x1080 | 16:9 | mp4 | — |
| INLINECODE29 |
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
CODEBLOCK5
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:
CODEBLOCK6
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:
CODEBLOCK7
If a session expires, re-run with --login --auth <name> to refresh it.
Cloud
Recordings auto-upload to screencli.sh by default. Skip with --local.
Commands
| Command | Description |
|---|
| INLINECODE47 | Sign in to screencli cloud |
| INLINECODE48 |
Sign out |
|
npx screencli whoami | Show current user, plan, and credits |
|
npx screencli recordings | List your recordings with links |
|
npx screencli upload <dir> | Upload a local recording to the cloud |
|
npx screencli delete <id> | Delete a cloud recording |
|
npx screencli render <id> | 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 <name>) - 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 <name> |
| 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 <dir> |
References
功能说明
screencli 可录制 AI 驱动的浏览器会话，并生成带有渐变背景、自动缩放、点击高亮和光标轨迹的精美 MP4 视频。AI 代理会根据你的提示指令导航目标 URL，随后录制内容会添加特效并自动上传至 screencli.sh，生成可分享的链接。无需视频编辑。
使用场景
当用户要求以下操作时使用此技能：
- - 录制演示或操作指南，展示网页应用、功能或工作流程
- 创建录屏或视频，演示浏览器中的操作过程
- 生成可分享的链接，用于屏幕录制
- 制作 GIF 或视频，用于 README、PR、文档或社交媒体
- 录制前后对比，展示 UI 变更或 bug 修复
- 可视化演示部署或预发布环境
不要将此技能用于：
- - 截图（请使用截图工具）
- 非浏览器任务（终端录制、桌面应用）
- 编辑现有视频
快速开始
录制演示并获取可分享链接：
npx screencli record https://example.com -p 点击注册按钮，用测试数据填写表单并提交
首次运行时，CLI 会自动打开浏览器进行 GitHub 登录。之后，它会录制会话、应用特效、上传并打印可分享的 URL。
录制
命令
npx screencli record [url] -p <提示> [选项]
URL 和提示为必填项。如果省略，CLI 会以交互方式提示输入。
关键选项
| 标志 | 默认值 | 描述 |
|---|
| -p, --prompt <文本> | (必填) | AI 代理的指令 |
| --background <名称> |
auto | 覆盖渐变：midnight、ember、forest、nebula、slate、copper |
| --viewport <宽x高> | 1920x1080 | 浏览器视口尺寸 |
| --login | 关闭 | 在 AI 接管前打开浏览器进行手动登录 |
| --auth <名称> | — | 按名称保存/加载认证状态 |
| --local | 关闭 | 跳过云端上传 |
| --unlisted | 关闭 | 以未公开方式上传（不在公开个人资料中显示） |
| --max-steps
| 50 | 最大代理迭代次数 |
| --padding <百分比> | 8 | 背景填充（0-50%） |
| --corner-radius <像素> | 12 | 视频圆角半径 |
| --no-shadow | 关闭 | 禁用投影 |
| -m, --model <模型> | claude-sonnet-4-20250514 | 使用的 Claude 模型 |
| --slow-mo <毫秒> | 0 | 操作之间的额外延迟 |
| -o, --output <目录> | ./recordings | 输出目录 |
| -v, --verbose | 关闭 | 调试日志 |
示例
简单录制——录制公开页面：
npx screencli record https://myapp.com -p 导航到定价页面，比较免费版和专业版方案
带认证——先登录私有应用：
首次运行：人工登录，认证状态保存
npx screencli record https://app.internal.com -p 展示仪表盘指标 --login --auth myapp
后续运行：复用已保存的会话
npx screencli record https://app.internal.com -p 导出月度报告 --auth myapp
导出
使用平台特定预设导出录制内容：
npx screencli export <录制目录> --preset <名称>
预设
| 预设 | 分辨率 | 宽高比 | 格式 | 最大时长 |
|---|
| youtube | 1920x1080 | 16:9 | mp4 | — |
| twitter |
1280x720 | 16:9 | mp4 | 140秒 |
| instagram | 1080x1920 | 9:16 | mp4 | 90秒 |
| tiktok | 1080x1920 | 9:16 | mp4 | — |
| linkedin | 1080x1080 | 1:1 | mp4 | — |
| github-gif | 800x450 | 16:9 | gif | 12秒 |
示例
npx screencli export ./recordings/abc123 --preset twitter
导出也支持 --background、--padding、--corner-radius、--no-shadow、--no-zoom、--no-highlight 和 --no-cursor。
私有应用认证
要录制需要登录的应用，首次运行时同时使用 --login 和 --auth：
npx screencli record https://app.example.com -p ... --login --auth myapp
浏览器会打开供你手动登录。完成后，AI 代理接管，认证状态保存到 ~/.screencli/auth/myapp.json。
后续运行时，只需传递 --auth：
npx screencli record https://app.example.com -p ... --auth myapp
如果会话过期，重新运行 --login --auth <名称> 刷新。
云端
录制内容默认自动上传至 screencli.sh。使用 --local 跳过上传。
命令
| 命令 | 描述 |
|---|
| npx screencli login | 登录 screencli 云端 |
| npx screencli logout |
退出登录 |
| npx screencli whoami | 显示当前用户、套餐和积分 |
| npx screencli recordings | 列出你的录制内容及链接 |
| npx screencli upload <目录> | 将本地录制内容上传到云端 |
| npx screencli delete | 删除云端录制内容 |
| npx screencli render | 使用不同的背景/预设重新渲染云端内容 |
积分
1 积分 = 10 个代理步骤。免费套餐包含每月 15 积分。
录制内容上传后，CLI 会显示已用积分和剩余积分。
特效
所有录制内容都会自动进行后期处理：
- - 渐变背景 — 自动选择（使用 --background <名称> 覆盖）
- 自动修剪 — 移除操作之间的空闲时间
- 自动缩放 — 在交互时放大活动区域
- 点击高亮 — 每次点击时显示视觉脉冲
- 光标轨迹 — 平滑光标移动叠加效果
使用 --no-zoom、--no-highlight、--no-cursor 单独关闭特效。
渐变颜色和完整特效流程请参见 references/effects.md。
故障排除
| 问题 | 解决方法 |
|---|
| 未登录 | 运行 npx screencli record — 登录会自动触发 |
| 缺少 FFmpeg |
brew install ffmpeg（macOS）或访问 ffmpeg.org |
| 认证过期 | 使用 --login --auth <名称> 重新运行 |
| 代理卡住或循环 | 优化提示，降低 --max-steps |
| 录制时间过长 | 使用 --max-steps 限制，或在提示中更具体 |
| 上传失败 | 使用 npx screencli whoami 检查积分，用 npx screencli upload <目录> 重试 |
参考
