Token导航 LogoToken导航

Agent Skill · 前端设计

capture(capture 命令行)

capture 用于处理 GitHub 仓库、Issue、Pull Request 和代码协作信息,适合在 Codex、Claude、Cursor、Gemini CLI 中需要围绕仓库状态、代码变更或协作事项进行整理时使用。可结合来源仓库、安装命令和原始 README 继续核验具体用法。安装前建议确认权限范围、维护状态,以及是否会触发联网、命令执行或文件读写。

capture 是前端设计类 Agent Skill,可用宿主为 Codex、Claude、Cursor、Gemini CLI,通过GitHub 仓库获取,权限为操作浏览器;许可证信息还不明确,第三方扫描已通过,按安装量在前端设计类的 10,216 个 Skill 里排第 4,544。

总安装 857周安装 35GitHub Stars 64下载 274核验 2026-05-01

安装说明

本站只整理中文说明,不托管安装包,也不代用户安装。
GitHub
许可证
unknown

安装方式

通过对话安装

复制提示词发给支持本地命令或 Skills 的 AI 助手,先确认命令和权限,再让它执行。

请帮我安装这个 Agent Skill:capture(capture 命令行)
来源仓库:https://github.com/factory-ai/factory-plugins
仓库路径:skills/capture
安装命令:
npx skills add https://github.com/factory-ai/factory-plugins --skill capture
安装前请先检查当前环境是否支持对应 CLI,并向我确认将要执行的命令、安装目录、联网范围和文件读写权限;确认后再执行。

命令行安装

复制命令到本机终端执行。该命令会通过 npx skills 从第三方来源获取 Skill;本站只展示命令,不托管安装包,也不自动执行。

skills.shnpx skills
npx skills add https://github.com/factory-ai/factory-plugins --skill capture

这个 Skill 是做什么的

前端设计类 Skill 关注页面结构、视觉规范和组件写法,输出通常是可运行的界面代码。

capture 负责录制交互过程并收集截图、文本快照与字节序列等多模态输出。需配合 driver atom(tuistory/true-input/agent-browser)与可选 droid-cli target。支持 keystroke logging 与剪贴板监控,适用于复杂操作流程回放验证。

录制敏感操作时应启用隐私模式,避免键盘输入或屏幕内容外泄风险。capture 属于前端设计类 Skill,可作为该场景下的辅助能力补充。

来源仓库内路径:skills/capture

上手步骤

4 步
  1. 1

    确认自己的宿主工具

    公开资料标注支持 Codex、Claude、Cursor、Gemini CLI;先确认自己用的是其中之一,再按对应工具的 Skills 目录放置。

  2. 2

    拿到安装命令

    可以直接复制的命令是 npx skills add https://github.com/factory-ai/factory-plugins --skill capture;命令里的占位符换成自己的路径或密钥再执行。

  3. 3

    安装后重启宿主

    命令执行完要完全退出宿主工具再打开,让新装的 Skill 被重新扫描到,否则列表里可能看不到。

  4. 4

    按最小权限试用

    它需要操作浏览器,先在测试目录或测试账号里跑,确认没问题再放到正式项目。

常见问题

6 条

capture 怎么安装?

在终端执行 npx skills add https://github.com/factory-ai/factory-plugins --skill capture。装完完全退出宿主工具再打开,让它重新扫描本地 Skill。

capture 支持哪些 AI 工具?

公开资料标注支持 Codex、Claude、Cursor、Gemini CLI。其他工具只要能读取本地 Skill 目录,一般也能手动放进去,但要自己确认触发方式是否一致。

capture 需要什么权限?

权限级别是操作浏览器。该 Skill 可能涉及浏览器控制能力,使用时可能读取或操作网页内容,需要在受控环境中确认权限边界。

capture 是免费的吗?

公开资料没有标注明确许可证,收费和商用限制都无法确认。正式使用前请到来源仓库核对授权说明。

capture 用的人多吗?

公开数据是累计安装 857 次,近一周安装 35 次,下载 274 次,GitHub 64 星。这些数字来自第三方目录统计,只能当作热度参考,不代表质量或安全性。

capture 安全吗?

第三方扫描结果为通过,但这只覆盖已知的静态检查项,不能替代自己读一遍源码和安装命令。

值得选的地方和要先想清楚的地方

值得选的地方

  • 同时适配 4 种工具,换客户端不用重新找替代品。
  • 第三方扫描已通过,常见的高风险行为没有命中。

先想清楚的地方

  • 许可证没有明确标注,能不能商用、能不能再分发都不确定。
  • 第三方目录整理,版本更新和行为细节以来源仓库为准。

适不适合你

更适合

  • 已经在用 Codex,想直接扩展它能力的人。
  • 需要处理前端设计类任务、又不想每次都手写提示词的人。

不太适合

  • 需要明确授权才能用到公司项目里的场景。
  • 需要厂商级技术支持和 SLA 的生产系统。

前端设计类 Skill 对比

6 个同类
Skill总安装GitHub 星权限许可证扫描
frontend-design

前端设计 · Codex、Claude

8,823,360126,072只读MIT通过
vercel-composition-patterns

Vercel 组合模式 · Codex、Claude

3,858,81625,893需要联网MIT通过
vercel-react-native-skills

Vercel React native skills 前端 · Codex、Claude

2,468,66425,878只读MIT通过
adapt

adapt 搜索 · Codex、Claude

2,027,04023,125操作浏览器未明确通过
bolder

bolder 分析 · Codex、Claude

2,004,28823,130只读未明确通过
capture

capture 命令行 · 本页

85764操作浏览器未明确通过

按安装量取同分类前几名;数字来自第三方目录统计,只作热度参考,不代表质量结论。

SKILL.md 原文

Capture

The orchestrator routed you here. This atom owns the full recording lifecycle: launch a target, execute an interaction script, collect raw outputs.

You should already have a driver atom loaded (tuistory, true-input, or agent-browser) and optionally a target atom (droid-cli). This atom layers the recording discipline on top.

Inputs

The command that invoked you should have provided:

  • Target: what to launch and on which branch(es)
  • Interaction script: the sequence of actions to perform
  • What to capture: recordings (.cast/.mp4), screenshots, text snapshots, byte sequences
  • Keystroke logging: whether to emit a keystroke TSV for later overlay

Recording lifecycle

1. Pre-flight

Before recording anything:

  • Terminal size is consistent across all sessions (--cols 120 --rows 36)
  • Browser viewport size matches the composition layout (see "Browser viewport sizing" below) — mismatched aspects letterbox in the final video
  • Branch/worktree paths and env vars are correct
  • Recording format matches the driver: .cast for tuistory, .mp4 for true-input, screenshots for agent-browser
  • If comparing branches, both sessions use identical terminal / viewport dimensions and launch parameters
  • For droid-dev captures, --repo-root is mandatory — tctl will refuse to launch without it
  • Color env vars are set (see below)

Browser viewport sizing

Panel aspect ratio in the final composition is layout-dependent. At the default 1920×1080 output with factory preset margins, the window-chrome panels that clips render into come out roughly:

LayoutPanel aspectRecommended browser viewport
single~1760×920 (≈16:9 landscape)1280×720 or 1440×810
side-by-side~872×920 per panel (≈8:9, near-square / slight portrait)960×1000, 900×1000, or 1024×1080

Feeding a 16:9 landscape recording into a near-square side-by-side panel triggers objectFit: "contain" letterboxing — you get a thin strip of content with giant black bars above and below. Two ways to avoid it:

  1. Match aspects at capture time (preferred) — pick the viewport from the table above based on the committed layout.
  2. Opt into cropping at compose time — pass "objectFit": "cover" in showcase props. Crops the edges of the clip instead of letterboxing. Use when the relevant UI is centered and the clip's edges are expendable.

If you're unsure of the layout when capturing, default to 960×1000 — it is workable in both layouts (slight horizontal letterbox in single, no letterbox in side-by-side).

TCTL=${DROID_PLUGIN_ROOT}/bin/tctl
# RUN_ID and RUN_DIR should already be set by the parent (see droid-control ground rule 5)

2. Launch and record

CRITICAL: tuistory's virtual PTY does not advertise color support by default. Node.js apps (Ink/chalk) detect this and suppress ALL color escape codes, producing a monochrome recording. You must pass FORCE_COLOR=3 and COLORTERM=truecolor to force full 24-bit color output. Without these, agg has nothing to theme and the video will look grey/desaturated regardless of the agg theme chosen.

Single branch:

$TCTL launch "droid-dev" -s ${RUN_ID}-demo --backend tuistory \
  --repo-root /path/to/worktree \
  --cols 120 --rows 36 --record ${RUN_DIR}/demo.cast \
  --env FORCE_COLOR=3 --env COLORTERM=truecolor

Comparison (before/after):

$TCTL launch "droid-dev" -s ${RUN_ID}-before --backend tuistory \
  --repo-root /path/to/baseline-worktree \
  --cols 120 --rows 36 --record ${RUN_DIR}/before.cast \
  --env FORCE_COLOR=3 --env COLORTERM=truecolor

$TCTL launch "droid-dev" -s ${RUN_ID}-after --backend tuistory \
  --repo-root /path/to/candidate-worktree \
  --cols 120 --rows 36 --record ${RUN_DIR}/after.cast \
  --env FORCE_COLOR=3 --env COLORTERM=truecolor

Browser: size the viewport to match the composition layout (see table above).

# side-by-side layout → near-square panel
agent-browser open <url> --viewport 960x1000
agent-browser record start ${RUN_DIR}/demo.webm

# single layout → 16:9 panel
agent-browser open <url> --viewport 1280x720
agent-browser record start ${RUN_DIR}/demo.webm

3. Execute the interaction script

Film for a viewer with no context. You are a director, not an operator.

  • Record before setup -- the baseline state is act 1.
  • Hold after state changes -- 2-3 seconds so text is readable. Use snapshot --trim as natural verification beats.
  • Verify between steps -- wait or snapshot to confirm state before proceeding. Don't blindly fire the next key.
  • Verification IS evidence. A snapshot that shows nothing changed after pressing ESC proves the session is frozen. A snapshot that shows an error message proves the command was blocked. Always snapshot after actions where the *absence* of a response is the point -- the viewer needs to see it too.

For comparison recordings, both branches run identical interactions -- only the behavior differs.

4. Keystroke logging

If the workflow requires keystroke overlay, emit a TSV file during recording. Since every interaction is scripted, the timing data is already known.

Write each keystroke's timestamp (seconds from recording start) and a human-readable label:

0.5	droid --fork
1.2	Enter
2.8	Ctrl+C
4.0	Esc

Use readable key names (Ctrl+C, not \x03). Save alongside the recording (e.g., /tmp/keys.tsv).

5. Close and verify raw outputs

$TCTL -s demo close    # finalizes the .cast / stops recording

Before handing off, confirm every expected output file exists and is non-empty:

  • Recording files (.cast,.mp4,.webm)
  • Screenshot files (.png)
  • Keystroke TSV (if committed)
  • Text snapshot logs (if needed for the report)

Evidence capture patterns

Proof typeHow to capture
Functional behaviorText snapshots: $TCTL -s <name> snapshot --trim
Visual renderingScreenshots: $TCTL -s <name> screenshot -o /tmp/proof-N.png
Keyboard encodingPTY bytes: ${DROID_PLUGIN_ROOT}/scripts/capture-terminal-bytes.py --backend <terminal> --combo <keys>
Web/ElectronScreenshots: agent-browser screenshot --annotate /tmp/proof-N.png
Before/afterRun the same sequence on both branches at the same capture points

Outputs

Hand these to the compose stage:

## Capture outputs
- clips: [/tmp/before.cast, /tmp/after.cast]
- screenshots: [/tmp/proof-1.png, /tmp/proof-2.png]
- keys: /tmp/keys.tsv (if keystroke logging was requested)
- driver: tuistory | true-input | agent-browser
- terminal_size: 120x36          # for tuistory / true-input
- viewport: 960x1000             # for agent-browser; report so compose knows the clip aspect

Recovery

If a session gets stuck mid-recording:

$TCTL -s <name> press esc         # bail out of stuck dialog
$TCTL -s <name> snapshot --trim   # check visible state
$TCTL -s <name> close             # hard reset

For browser: agent-browser close.

Then re-launch and re-record. Partial recordings are not usable.

平台分布

Codex

39.16%
按下载量换算107

Claude

29.37%
按下载量换算80

Cursor

19.13%
按下载量换算52

Gemini CLI

9.07%
按下载量换算25

安全审计

Gen Agent Trust Hub

通过

Socket

通过

Snyk

通过

权限和风险

操作浏览器

该 Skill 可能涉及浏览器控制能力,使用时可能读取或操作网页内容,需要在受控环境中确认权限边界。

安装前确认

本站仅展示第三方公开信息,不托管安装包,不提供自动安装或运行环境。安装前应自行审查源码、依赖和命令行为。目前只有一个公开来源,建议同时核对源仓库。

继续浏览同类 Skills