html-video is a local tool that turns HTML, CSS, and data into animated MP4 videos using configurable rendering engines and templates. Coding agents use it to create and export videos on a user's machine, with optional AI-generated soundtracks. The catalogue skills operate the tool and its video-generation workflow.
Getting it into your agent
One page per mod, every tool's command on it. A separate URL per tool would split the same page into five that compete with each other.
npx skills add nexu-io/html-video --skill frame-data-rollupgit clone --depth 1 https://github.com/nexu-io/html-videoWrote this? Show the measurements
A badge with what this costs and how it scanned, read live from this page, so it follows the numbers instead of freezing them. Markdown for a README, HTML for a documentation site or a project page.
[](https://agentmods.dev/skills/nexu-io/html-video/frame-data-rollup)<a href="https://agentmods.dev/skills/nexu-io/html-video/frame-data-rollup"><img src="https://agentmods.dev/badge/skills/nexu-io/html-video/frame-data-rollup/github.svg" alt="Measured on agentmods" height="20"></a>Or the 80×15 button, for a site that already has a row of RSS and ATOM ones. Only the verdict fits; the numbers stay here.
<a href="https://agentmods.dev/skills/nexu-io/html-video/frame-data-rollup"><img src="https://agentmods.dev/badge/skills/nexu-io/html-video/frame-data-rollup.svg" alt="Reviewed on agentmods" width="80" height="20"></a>- NVIDIA SkillSpector pass
What it costs to keep this loaded
Counted locally with the o200k_base tokenizer, which is exact for GPT models; Claude uses its own tokenizer and its counts differ. Treat this as one consistent yardstick across the catalogue rather than a bill. Prices are per million input tokens.
| Model | Per session | Once invoked |
|---|---|---|
| Fable 5.1 | $0.00046 | $0.01152 |
| Opus 5 | $0.00023 | $0.00576 |
| Sonnet 5 | $0.00009 | $0.00230 |
| Haiku 4.5 | $0.00005 | $0.00115 |
Grade A, and why
frame-data-rollup scanned grade A with 0 findings against 26 rules in 11 categories — prompt injection, anti-refusal, data exfiltration, privilege escalation, supply chain, agent snooping, system-prompt leakage, SSRF and excessive agency — measured 9d ago.
A static scan of the body, not an audit. Every finding is printed with the line that produced it so you can judge whether it matters here. A mod is markdown that instructs an agent; that is exactly why what it instructs is worth reading.
Nothing flagged
None of the 26 patterns this scan looks for appear in this file: no shell pipes, no recursive deletes, no credential paths, no hidden text, no instruction-override or anti-refusal phrasing, no agent-config snooping. That is not a guarantee, it is the absence of the things that are checkable.
What it actually says
【模板: 数据滚动帧 (Data Rollup)】
【类型】原生 Remotion 模板 (RFC-08 Phase 2) — 不是 HTML+GSAP,而是 React-tsx 直接吃 Remotion 的帧时钟 (useCurrentFrame + interpolate + spring)。这是让用户主动给数据帧挂上的动效增强:hyperframes 出静态/CSS 图表,本模板让柱子真的按数据长出来、数字真的滚动,一眼可辨。
【意图】数据展示帧 — 每周指标 / 增长柱 / KPI,数值应该动起来而不是干放着。适合塞进一条以 hyperframes 为主的视频里的某一个数据段。
【画布】默认 1920×1080,布局全部基于真实画布尺寸 (useVideoConfig) 计算,9:16 / 1:1 也不会压扁。
【数据契约 (inputProps)】
data.items[]— 每项{label, value},就是要画的柱子;最多约 7 根,多了会挤。data.title?— 左上标题。data.unit?— 数字后缀,如K/%。accent?/background?/foreground?— 配色,默认番橙#FF5A2C/ 近黑#0E0E10/ 纸白#F5F5F2。
【动效结构】
- 每根柱子按
spring()从 0 长到value/maxValue高度,逐根错峰 (0.12s 一根) 级联进场。 - 数字用与柱子同一条 growth 曲线从 0 滚到
value,柱子和数字同时落定。 - 标题 spring 淡入 + 上移;label 在柱子长到 40% 时淡入。
【内容纪律】
- 喂真实数据,别用占位数字。
value必须是数;非数会被当 0(enhanceFrameNative应在绑定前归一/校验)。- 柱子数控制在 7 根内。
【离线确定性】纯系统字体栈、内联样式,无外部字体 / 资源 / 网络 — 保证 headless 渲染确定、不黑屏 (对齐桥接的 neutralizeBlockingResources 教训)。
【原创】原创 React-tsx,标准动画柱状图词汇 (count-up + spring 生长) 从零实现,无特定上游来源 (provenance origin = none)。
What ships with it
7 files beside SKILL.md in the same directory: the scripts, references and assets a skill reads on demand. Not counted in the per-session cost; read them before you install if any of them is executable.
What this file has done since we first saw it
Hashed on every crawl. A supply-chain change to an agent config is a question of when, not whether, so the history is kept rather than the latest state alone.
- 9d ago First seen · 63 lines · 46 tokens per session scan A 07dc63fd1f94
frame-data-rollup is a skill published in the GitHub repository nexu-io/html-video (4,548 stars, last pushed 2mo ago), licensed Apache-2.0. It adds 46 tokens to every session and 1,152 once invoked, about $0.0002 per session on Opus 5. A static security scan graded it A with 0 findings. No closer match exists in the catalogue, so it is treated as the original; first seen 2026-08-30.
Other skills, from other repositories
frame-data-chart-nyt
NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).
frame-data-chart-nyt
A design template for turning CSV data, JSON, or a written finding into a New York Times-style chart frame for video or social media.
remocn
Build Remotion videos with remocn — copy-paste animation components and timeline-driven UI primitives from a shadcn registry. Use when composing a video or scene in a Remotion project, adding a single animation, transition, background, or UI-block sim, or reaching for a video-ready UI primitive (button, dialog…
stitch-remotion
Create Remotion walkthrough videos from Stitch screen exports with ordered assets, transitions, captions, and render checks.
remotion-agent-video
Remotion v4.0.4xx with agent skill support for AI-driven video creation. Covers programmatic video generation with React, the new effects ecosystem, and first-party agent skills.
remotion-video
Create programmatic videos with React using Remotion - generate animations, compositions, text effects, transitions, captions, and render MP4 videos from code.