Design & Motion · nexu-io/html-anything

video-hyperframes

Name: video-hyperframes
Author: nexu-io/html-anything

Hyperframes / Remotion compatible continuous frame animation with autoplay support

L1 Basic · Source registration onlyV1 Commit-PinnedDual-pass Audit

Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0（仓库根 LICENSE 文件；GitHub API license.spdx_id = Apache-2.0）Commit 553ed98c28

Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.

1How It Works & Mechanism

This skill is not an executable program, but rather a "template" for html-anything: a directory (SKILL.md + example.html[/example.md]) scanned and read from disk at runtime by loader.ts—adding a new template simply means adding a directory, without modifying any TypeScript code.

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIR is fixed at src/lib/templates/skills relative to the application's cwd; listSkills() iterates through first-level subdirectories, filters them via isValidBundledId, reads SKILL.md directory by directory, and parses frontmatter, ensuring that "picker metadata" and the "generation prompt body" originate from the very same file.

The frontmatter provides metadata for the selector/API (zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags), mapped into SkillMeta via fmToMeta(); the body following the frontmatter constitutes the actual specification delivered to the model.

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

id is derived from the directory name; example metadata (example_id/name/format/tagline/desc/source_url) only produces a SkillExampleMeta if the directory contains example.md/html, and the body is deliberately excluded from the listing API (code comment: "Body is excluded so we can return the entire registry in one cheap fetch").

During generation, this template body acts as the prompt body: /api/convert uses assemblePrompt() to concatenate "global design directives + this template body + user content" into a single prompt, which is fed to the host's local agent CLI, streaming HTML back via stdout.

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

The same route includes minimal-diff editing branches such as editFromHtml/editFromContent; throughout this pipeline, the template body remains purely a string without any evaluation or execution.

Above the template body lies a block of global prepended instructions (SHARED_DESIGN_DIRECTIVES), uniformly enforcing technical and content rules across all templates—the CDN and Google Fonts external links commonly seen in example HTML files originate here (injected by the host shell, not requested by the template itself).

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

The template body only dictates styling, layout, and components without repeating these hard rules; security grading strictly audits the template directory itself, and this host-shell behavior is documented under security.reason for auditability.

Artifacts are returned as text via stdout: global directives explicitly prohibit the agent from accessing the file system, leaving disk writing to the frontend—meaning the template directory possesses neither scripts nor disk-writing capabilities.

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

The original instructions state: "Do not write HTML to any .html files... the frontend directly captures your stdout text, and disk writes are handled by the frontend"; artifacts are ultimately saved to task logs and export flows by the frontend.

example.html serves as a pre-rendered bundle example: /api/templates/<id>/preview returns it verbatim as text/html to an iframe (for inline selector preview), while /api/templates/<id>/example returns both example.md and example.html together.

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

Examples serve solely for preview and documentation purposes and are not included in the generation prompt (which relies exclusively on the body of SKILL.md); hence, external links within them do not expand the template's functional security boundary.

The body defines "frames" as machine-readable continuous <section class="frame"> elements (1920×1080), with frame count determined by content density rather than a fixed number—starting from 6–10 frames for short scripts, with each frame hosting only a single shot/concept.

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 输出 N 个连续 `<section class="frame">`, 每个 `w-[1920px] h-[1080px]`; N 由【用户内容】信息密度决定

As specified in the text: "(Short scripts start at 6-10 frames, longer scripts should have more; each frame conveys only one shot/concept)"—echoing the global directive of "content-driven quantity."

Each frame embeds a hidden comment marker at the bottom: ``, followed by a `` JSON block (duration/transition/sceneSummary) at the end of the file for subsequent Remotion rendering scripts to consume.

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 每帧底部隐藏标记 `` 供后续 Remotion / Hyperframes 渲染脚本读取。

These two convention layers are functional: next/src/lib/hyperframes.ts in the host application parses them across three sources: <section class="frame">, data-duration, and HYPERFRAMES_META (code comment: "No-op + isHyperframes:false when the doc has no `<section class="frame">`").

Autoplay is a strict requirement of the template body: a JavaScript block at the top switches frames every 3 seconds, supports click and arrow key navigation, and displays a progress bar in the corner.

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 顶部加一段 JavaScript 自动播放: 每 3 秒切换到下一帧, 也支持点击 / 方向键控制; 角落显示进度条。

The example uses data-duration to drive setTimeout for automated frame transitions, implementing prev/next controls, play/pause toggles, and a requestAnimationFrame-driven progress bar.

Narrative structure is codified into the template: Frame 1 is the hook (a metric, counter-intuitive insight, or provocative question), Frames 2 through N provide arguments, and the final frame delivers the conclusion + CTA, rendered in massive typography in a single concise sentence.

next/src/lib/templates/skills/video-hyperframes/SKILL.md

- 第 1 帧是 hook (一个数据 / 一个反常识 / 一个问题), 第 2-N 是论证, 最后是结论 + CTA。

This structure imparts an inherent persuasive arc to the frame sequence, rather than simply flattening long text into arbitrary chunks.

The application host actively consumes this convention: upon detecting the frame structure, export-menu.tsx provides an additional Remotion zip export option (parseHyperframes → exportRemotionZip).

next/src/components/export-menu.tsx

await exportRemotionZip(hyperframes, hyperframes.title, {

Thus, artifacts generated by this template enjoy a dedicated pipeline within the host for "exporting as a renderable video project," standing alongside PDF/PPTX export options for deck templates.

On the CLI side, there is a direct keyword matching channel: skills-matcher.ts directly maps keywords in user content to this template id; a match grants confidence = matches × 2 + 3, and hitting a threshold of 3 triggers the local rule directly without relying on model-based template selection.

cli/src/skills-matcher.ts

[["视频", "video", "帧动画", "hyperframes", "remotion", "mp4", "片头"], "video-hyperframes"],

Keywords like video, frame animation, hyperframes, and remotion map directly to this template; this is also the only template in the CLI associated with remotion/mp4 keywords.

Threshold constants for CLI fallback matching: content length must exceed 60 characters before enabling AI summary matching, and the strong signal threshold is set to 3.

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

Additionally, SCENARIO_SIGNALS weights keywords based on template scenario, and fallbackMatch scores using tags/zhName/description; agent-based summary matching is invoked only when both layers fail.

The host shell renders examples and artifacts using an iframe configured with sandbox="allow-scripts allow-same-origin" (allowing scripts and same-origin)—this is an architectural tradeoff of the product shell noted under risks, and does not affect the safety grading of this skill.

next/src/components/template-picker.tsx

sandbox="allow-scripts allow-same-origin"

Identical implementation in preview-pane.tsx and deck-viewer.tsx; inline JS in the example HTML executes strictly during in-browser preview, while the skill itself executes no scripts.

2Core Capabilities

01Continuous frame output (<section class="frame">, 1920×1080, count scales with content)

02Per-frame hidden duration/transition markers (for rendering scripts)

03HYPERFRAMES_META JSON metadata (for Remotion conversion)

04Autoplay + click/arrow key navigation + progress bar

05hook → argument → conclusion + CTA narrative framework

06Host-side Remotion zip export

3External Dependencies

Kind	Dependency / Endpoint
network	Tailwind CDN（示例 HTML 引用）
network	Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）
network	上游项目（frontmatter 元数据，非运行依赖）

4Recommended Governance & Evidence

Suggested Controls for Safe Operation

For Agent Runtime

Can be auto-loaded

For Administrators

Evidence & Triggers (File Paths & Excerpts)

SKILL.md: Pure prompt directives and rule text, devoid of script execution or external impact

Audit Notes: Grading target = this skill directory (next/src/lib/templates/skills/video-hyperframes/). Verified across all files: zero scripts, zero credential access, and zero disk writes. The only external endpoints appearing in the directory are the Tailwind CDN (referenced in the example HTML), Google Fonts (Inter Tight / Noto Sans SC / JetBrains Mono), and upstream project references (frontmatter metadata, not runtime dependencies)—all of which reside exclusively within the artifact sample example.html. The body of SKILL.md only prescribes layout, style, and font family names without referencing any runtime external APIs, qualifying it as a pure directive template = green. Host-side note (not factored into grading): the html-anything product shell stitches the body into prompts via assemblePrompt(), spawns a local agent CLI, injects cdn.tailwindcss.com and Google Fonts requirements (next/src/lib/templates/shared.ts), and renders previews inside an iframe with sandbox="allow-scripts allow-same-origin" (next/src/components/template-picker.tsx).

5Second-Pass Verification

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html + example.md，无 scripts/references。
[ok] 外部端点只出现在示例/元数据 — SKILL.md 正文无 URL；URL 分别位于 frontmatter example_source_url 与示例的 Tailwind CDN / Google Fonts。
[ok] HYPERFRAMES_META 是否真实存在 — example.html 含  共 8 条（i/duration/transition/scene），与示例 8 个 section.frame 一一对应。
[discrepancy] 行内 frame 标记是否在示例中 — grep 'frame:' example.html = 0 命中；SKILL.md 要求的 `` 在示例中未出现，时长改由 data-duration 承载。宿主解析器 parseInlineMarker + 兜底注释表明两条路径都被支持，故为约定演示缺口而非能力缺口。
[ok] 宿主是否真消费该约定 — next/src/lib/hyperframes.ts 存在 FRAME_RE/META_RE/parseInlineMarker 实现（注释「Pull duration / transition out of the inline …marker the skill plants at the bottom of each section」）；export-menu.tsx 提供 hyperframes-remotion-zip 动作；e2e/ui/export-menu.test.ts 以 templateId "video-hyperframes" 造样本。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["视频", "video", "帧动画", "hyperframes", "remotion", "mp4", "片头"], "video-hyperframes"] 行。
[ok] 判级 green 自证 — 目录零脚本文件（示例内联 JS 属产物示例）、零凭证、零写盘；正文只规定 HTML 结构与注释标记，未点名运行时接口 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文「Hyperframes / Remotion 兼容的连续帧动画, 可自动播放」。

6Verdict & Scenarios

Convention as contract: frame markers and META JSON are actively consumed by host parsers and export pipelines, allowing outputs to convert directly into video projects

Dynamic frame scaling governed by content density within the prompt, preventing long scripts from being constrained to a fixed 6 frames

Built-in narrative architecture (hook → argument → CTA) that naturally imbues outputs with a persuasive arc

Dual-use single source: supports in-browser autoplay preview and can be consumed by Remotion

Best for: Ideal for product launch intros, explanatory video script visualizations, breaking long copy into "one concept per frame" video storyboards, and serving as a scaffolding draft for Remotion/hyperframes projects.

Not for: Not suitable for final video production requiring intricate timelines or complex transitions (the template only supplies fade-level transitions and duration metadata); unsuitable for information-dense document-style pages (design rules require one sentence per frame); unsuitable for SEO or readable long-form text scenarios.

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload video-hyperframes.tar.gz

sha256: f8c23c688123a19b…

Option B · Copy Guide for Agent

install.json

Agents automatically download and verify mirrors from this JSON guide.

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.