#284 by GitHub stars

nexu-io/html-video

Programmatic video for coding agents — HTML to video on your laptop. Turn HTML, CSS & data into real MP4s with pluggable render engines, 21 templates, AI soundtrack. Apache-2.0, no per-render fees. An official project by the Open Design team.

Claude Code Engineering Design Data

History

Review weekly changes to SKILL.md before updating. Dates mark the weeks in which we observed each version; checks apply to the recorded commits.

View weekly changes

`templates/frame-bold-poster/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-bold-signal/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-build-minimal/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-creative-voltage/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-data-chart-nyt/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-data-rollup/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-electric-studio/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-glitch-title/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-light-leak-cinema/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-liquid-bg-hero/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-logo-outro/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-pentagram-stat/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/frame-takram-organic/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

`templates/vfx-text-cursor/SKILL.md`

Week of Nov 2, 2026 · +0 / −0 lines

Before Local scripts → After Local scripts

c414ecc07f79 → c414ecc07f79

Compare on GitHub

Week of Oct 26, 2026 · Line counts unavailable

Before Not checked yet → After Local scripts

First observation → c414ecc07f79

No earlier version was observed for comparison.

Compare on GitHub

View on GitHub Add to my skills

Verified commit c414ecc07f795add03807d5d9ce4baefd807cea2

Version-pinned installation · Claude Code

git clone --filter=blob:none --no-checkout https://github.com/nexu-io/html-video.git .hotskills/nexu-io-html-video && git -C .hotskills/nexu-io-html-video checkout --detach c414ecc07f795add03807d5d9ce4baefd807cea2
# Copy each selected skill directory from .hotskills/nexu-io-html-video into .claude/skills/<skill-name>/

4.8kGitHub stars

27stars in 7 days

14skills in this repository

0commits in 30 days

Heat

4.9

Star growth, last 7 daysAhead of 74% of tracked repositories
Star growth, last 24 hoursAhead of 69% of tracked repositories
Rank movement, last 7 daysAhead of 43% of tracked repositories
Commits, last 30 daysAhead of 0% of tracked repositories
Accounts asking about it through MCP, last 7 daysNot available
Hot votes this weekAhead of 0% of tracked repositories

Heat never changes the order by stars, and sponsorship never touches it. How heat works

Stars over time

Individual skills in this repository

frame-bold-poster templates/frame-bold-poster
frame-bold-signal templates/frame-bold-signal
frame-build-minimal templates/frame-build-minimal
frame-creative-voltage templates/frame-creative-voltage
frame-data-chart-nyt templates/frame-data-chart-nyt
frame-data-rollup templates/frame-data-rollup
frame-electric-studio templates/frame-electric-studio
frame-glitch-title templates/frame-glitch-title
frame-light-leak-cinema templates/frame-light-leak-cinema
frame-liquid-bg-hero templates/frame-liquid-bg-hero
frame-logo-outro templates/frame-logo-outro
frame-pentagram-stat templates/frame-pentagram-stat
frame-takram-organic templates/frame-takram-organic
vfx-text-cursor templates/vfx-text-cursor

How it works

Choose a skill

frame-bold-poster

When your agent uses it

A 1970s European editorial poster in motion — a red rule draws across, a giant tilted figure drops in, a three-line headline rises line-by-line, an italic serif standfirst fades.

What it loads into context

Frontmatter

596 tokens

Always available to the agent

SKILL.md

1,190 tokens

When the skill is activated

Reference documents

158 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,955 bytes
example.mddoc523 bytes
package.jsonruns358 bytes
preview.pngasset151,269 bytes
source/index.htmlasset6,138 bytes
template.html-video.yamlasset4,346 bytes

Read SKILL.md


【模板: 大胆海报帧 (Bold Poster)】
【意图】品牌宣言 / 愿景陈述 / 社论或文化类开场 — 让几个词像杂志封面一样落地。视觉提炼自 frontend-slides 的 Bold Poster 模板 (MIT, © Zara Zhang),其上游灵感为 1970s 欧洲社论海报 / 意大利体育杂志 / 中世纪品牌年报。

【画布】1920×1080, 暖白纸底 `#F5F2EF`。

【字体】display + 数字 `Shrikhand` (海报级斜体大字); body `Libre Baskerville` (衬线, 斜体副题); mono 标签 / chrome `Space Grotesk`。

【配色纪律】纸白 `#F5F2EF` / 墨黑 `#1C1410` / **唯一强调色番红 `#D8000F`**。红色只用在: 一条 kicker rule、巨型 figure、标题中间行、footer 右侧 metadata。其余皆墨黑。全片**只此一个**强调色。

【主结构 (时间轴, 默认 5s)】
- **0.35s** 纸底淡入 (印刷感的"落纸"而非"打光")。
- **0.5s 起** 顶部 kicker: 左 mono 标签淡入 → 番红 rule 从左 scaleX 划过 → 右 mono 日期淡入。
- **0.7s** 右上巨型番红 figure (`Shrikhand` 320px) 带旋转 (-14° → -6°) 从上落入。
- **1.15s 起** 三行标题逐行升起, 每行各自 tilt: 行1 墨黑 -2°、行2 番红 -4°、行3 墨黑 +2°。

View the complete source on GitHub

frame-bold-signal

When your agent uses it

Bold colored card on a dark gradient — big section number, nav breadcrumb, orange card sliding in, title rising.

What it loads into context

Frontmatter

510 tokens

Always available to the agent

SKILL.md

1,030 tokens

When the skill is activated

Reference documents

81 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,336 bytes
example.mddoc237 bytes
package.jsonruns358 bytes
preview.pngasset159,926 bytes
source/index.htmlasset4,160 bytes
template.html-video.yamlasset3,147 bytes

Read SKILL.md


【模板: 大胆信号卡帧 (Bold Signal)】
【意图】章节/段落分隔 / 大胆 launch 陈述 / 高冲击标题卡。视觉提炼自 frontend-slides 的 Bold Signal 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 暗底 `#1a1a1a` + 135° 渐变 (`#1a1a1a → #2d2d2d → #1a1a1a`)。

【字体】display `Archivo Black` (900); body `Space Grotesk` 400/500/700。

【主结构 (时间轴, 默认 4s)】
- **0.2s** 左上巨大 section number (`Archivo Black` 96px, 如 `01/04`, 斜杠后半 opacity 0.3) 从上方 rollIn。
- **0.4s 起** 右上 nav breadcrumb 错峰淡入: active 项 `#FF5722` 橙 opacity 1, 其余白 opacity 0.35。
- **0.6s** 橙色焦点卡 (`#FF5722`, 圆角 36px 仅左侧, 占右 ~1180px) 从 translateX(110%) 滑入, 带橙色柔影。
- **1.15s** 卡内 label (uppercase, letter-spacing 4px) fadeUp。
- **1.3s** 卡内大标题 (`Archivo Black` 130px, 深色 `#1a1a1a` on 橙) fadeUp。
- **1.6s** 左下 footer (橙色 tick 短条 + system 标签) 淡入。

View the complete source on GitHub

frame-build-minimal

When your agent uses it

Luxury-minimal whitespace hero — single word reveals letter by letter, warm-gold hairline, breathing indicators.

What it loads into context

Frontmatter

520 tokens

Always available to the agent

SKILL.md

1,122 tokens

When the skill is activated

Reference documents

73 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,466 bytes
example.mddoc225 bytes
package.jsonruns363 bytes
preview.pngasset394,250 bytes
source/index.htmlasset6,121 bytes
template.html-video.yamlasset3,015 bytes

Read SKILL.md


【模板: 奢华极简留白帧 (Build Minimal)】
【意图】高端品牌 hero / 单词陈述 / 优雅标题卡。视觉提炼自 huashu-design 的 Build Studio 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 暖白底 `#FAFAF8`; 左上叠暖金径向 wash (`rgba(212,165,116,0.07)`)。**70%+ 留白是这套风格的灵魂**, 不要填满。

【字体】西文 `Inter` weight 200/300 (超细); 中文 `Noto Sans SC` Light。字距收紧 (-4 ~ -7px)。

【主结构 (时间轴, 默认 5s)】
- **0.2s** 四角 corner marks (暖金 0.5px 描边 L 形) + 暖金 wash 淡入。
- **0.5s** eyebrow (uppercase, letter-spacing 9px, `#B0ACA4`) fadeUp。
- **0.6s 起** hero 单词逐字符浮现 (每字 .ch span, 错峰 80ms, translateY 30→0, expo-out)。font-size ~220px, weight 200。
- **1.9s** 暖金细线 (`#D4A574`, 高 1px) 从宽 0 → 88px 居中生长。
- **2.2s** 两行 desc (weight 300, `#A8A4A0`, line-height 2) fadeUp。
- **1.8s** 侧边竖排小标签 (左右各一, rotate ±90°) 淡入。

View the complete source on GitHub

frame-creative-voltage

When your agent uses it

Electric split with hand-drawn script — offset panels slide in, display title rises with an outlined word, script strokes itself in.

What it loads into context

Frontmatter

535 tokens

Always available to the agent

SKILL.md

1,071 tokens

When the skill is activated

Reference documents

85 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,575 bytes
example.mddoc276 bytes
package.jsonruns378 bytes
preview.pngasset176,311 bytes
source/index.htmlasset4,706 bytes
template.html-video.yamlasset3,434 bytes

Read SKILL.md


【模板: 创意电压分屏帧 (Creative Voltage)】
【意图】能量感品牌/活动标题 / 带手写人味的创意揭示 / 复古现代 hero。视觉提炼自 frontend-slides 的 Creative Voltage 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 左电光蓝屏 (`#2f4bff`, 47%) + 右暗屏 (`#0d0d14`, 53%), 错位分割。

【字体】display `Syne` 800; mono `Space Mono`; 手写 `Caveat`。

【主结构 (时间轴, 默认 4s)】
- **0.1s** 左蓝屏从 translateX(-100%) 滑入; **0.25s** 右暗屏从 translateX(100%) 滑入 (错峰, expo-out)。
- **0.9s** 蓝屏左上电光高光 wash 淡入。
- **1.0s** 蓝屏左上 mono meta 行 (`// CREATIVE_MODE · ON`) 淡入。
- **1.0s 起** 右屏 display 标题逐行升起 (每行 .ln, 错峰 180ms); 一行用 `.volt` 描边电光词 (`-webkit-text-stroke` + 蓝色填充)。font-size 132px, 右对齐。
- **1.4s** 蓝屏手写 script (`Caveat`, rotate -7°) 弹入。
- **1.9s** script 下方手绘 underline (SVG path, stroke-dashoffset 描出)。

View the complete source on GitHub

frame-data-chart-nyt

When your agent uses it

NYT-newsroom typography, staggered reveal animation, and editorial-grade charts (line, bar, or range band).

What it loads into context

Frontmatter

472 tokens

Always available to the agent

SKILL.md

1,207 tokens

When the skill is activated

Reference documents

146 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,907 bytes
SKILL.mdcore3,907 bytes
example.mddoc388 bytes
package.jsonruns321 bytes
source/index.htmlasset5,203 bytes
template.html-video.yamlasset2,156 bytes

Read SKILL.md


【模板: NYT 风数据图表帧】
【意图】把一段数据 (CSV / JSON / 一句结论) 做成《纽约时报》专栏感的单帧/动画图表, 适合视频片段或推特卡。Inspired by hyperframes data-chart。

【画布】1920×1080, 暖白底 `#f7f5ee` 或墨黑底 `#0e0e0e` 二选一; 文字色和背景相反。

【布局】
- **顶部 kicker** (11px uppercase letterspace 0.14em, 颜色 = accent 红 `#a91d1d` 或 mint `#5fb38a`): 数据来源 + 类目, 如 "GLOBAL · WEEKLY ACTIVE USERS · 2018–2026"。
- **大字标题** (Cheltenham / Playfair / Source Serif Pro, 5.6vw, italic 副标可选): 一句结论。**结论必须从用户数据中提炼**, 不是描述图。
- **图表区** (占画布 55-65%):
  - 折线: 1-2 条线, 主线 ink 实心 2.5px, 次线 dashed 1.5px; 数据点用 6px 实心圆; 关键点旁标注 `2024 · 412M` 黑色 mono 小字。
  - 柱状: 全部 ink 单色或加 1 道 accent 高亮柱; 柱顶大数字; 柱底类目斜体 (Cheltenham italic)。
  - 范围带 (range band): 浅灰填充 `#e6e2d2` 包络 + 中线 ink。
- **底部 source + footnote** (10px mono, opacity 0.6): "Source: 用户数据 · Chart by html-anything"。
- **错峰揭示动画**: 标题 fade-in (0s), kicker (200ms), 折线 stroke-dashoffset 1.2s ease-out (400ms), 数据标签依次 100ms 间隔。可被 `prefers-reduced-motion` 关闭。

View the complete source on GitHub

frame-data-rollup

When your agent uses it

A native Remotion data frame — bars grow from zero by real data via spring physics while the figures roll 0→target in sync. The numbers come alive in a way a static HTML chart can't.

What it loads into context

Frontmatter

555 tokens

Always available to the agent

SKILL.md

1,152 tokens

When the skill is activated

Reference documents

368 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json
source/DataRollup.tsx
source/Root.tsx
source/entry.ts

Files

SKILL.mdcore3,873 bytes
example.mddoc1,259 bytes
package.jsonruns367 bytes
preview.pngasset152,199 bytes
source/DataRollup.tsxruns7,355 bytes
source/Root.tsxruns1,248 bytes
source/entry.tsruns302 bytes
template.html-video.yamlasset4,706 bytes

Read SKILL.md


【模板: 数据滚动帧 (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`。

【动效结构】

View the complete source on GitHub

frame-electric-studio

When your agent uses it

Two-panel split with quote as hero — white/blue panels open from center, accent bar grows, quote reveals line by line.

What it loads into context

Frontmatter

525 tokens

Always available to the agent

SKILL.md

1,002 tokens

When the skill is activated

Reference documents

86 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,338 bytes
example.mddoc257 bytes
package.jsonruns366 bytes
preview.pngasset50,036 bytes
source/index.htmlasset4,030 bytes
template.html-video.yamlasset3,324 bytes

Read SKILL.md


【模板: 电光工作室分屏帧 (Electric Studio)】
【意图】pull-quote / 推荐语 / 使命陈述 / 高对比标题。视觉提炼自 frontend-slides 的 Electric Studio 预设 (MIT, © Zara Zhang)。

【画布】1920×1080, 白色上屏 (540px) + 电光蓝下屏 (`#4361ee`, 540px), 中线分割。

【字体】display + body 都用 `Manrope` 800/700/500/400。

【主结构 (时间轴, 默认 4s)】
- **0.1s** 上屏从 translateY(-100%) 下落、下屏从 translateY(100%) 上升, 同时从中心"开合"到位 (expo-out)。
- **0.9s** 接缝处黑色 accent 条 (高 8px) 从宽 0 → 320px 生长。
- **1.0s 起** 引言逐行浮现 (每行 .ln, 错峰 150ms, translateY 26→0); 跨入蓝屏的行用白色 (`.on-blue`)。font-size 96px, weight 800。
- **2.2s** 下屏 attribution (name 28px 700 + role uppercase 0.7 opacity, 白色) 淡入。
- **2.5s** 右上品牌 mark (深色) + 右下品牌 mark (白 0.6) 淡入。

View the complete source on GitHub

frame-glitch-title

When your agent uses it

Digital glitch, chromatic offset, and data-corruption title frame for video transitions or cyberpunk heroes.

What it loads into context

Frontmatter

476 tokens

Always available to the agent

SKILL.md

1,161 tokens

When the skill is activated

Reference documents

85 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,733 bytes
example.mddoc221 bytes
package.jsonruns317 bytes
source/index.htmlasset4,939 bytes
template.html-video.yamlasset1,751 bytes

Read SKILL.md


【模板: 故障艺术标题帧 (Glitch Title)】
【意图】单帧 hero / 视频转场 / cyberpunk 风格标题。Inspired by hyperframes glitch。

【画布】1920×1080, 背景 `#070708` 近黑或 CRT 暗灰 `#0d0e10`; 加 56px 网格 (透明 5%) + scanlines 横线 (透明 8%, 2px 间隔)。

【主标题】
- 居中, 6-9vw, weight 800/900, 字体 `Space Grotesk Bold` / `Inter Tight Black` / `JetBrains Mono Bold`。
- 颜色: 主层 `#f5f5f7`; 后面套 2 层伪影:
  - cyan `#00f0ff` translate(`-3px`, `1px`)。
  - magenta `#ff2bd6` translate(`3px`, `-1px`)。
- 整层加 clip-path 切片 5-8 段, 每段 `@keyframes` 随机 translateX -10px → 10px, 持续 80-160ms, 错峰播放, 营造 "data corruption" 像散。
- 每隔 1.5s 触发一次"重故障" — 整个标题被 horizontal smear 1 frame, 用 `filter: url(#displacementFilter)` 或简单 CSS 平移。

【附加层】

View the complete source on GitHub

frame-light-leak-cinema

When your agent uses it

Film light leaks, grain, 16:9 letterbox, and large serif type for cinematic openings or chapter cards.

What it loads into context

Frontmatter

516 tokens

Always available to the agent

SKILL.md

1,282 tokens

When the skill is activated

Reference documents

86 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore4,021 bytes
example.mddoc224 bytes
package.jsonruns327 bytes
source/index.htmlasset3,803 bytes
template.html-video.yamlasset1,810 bytes

Read SKILL.md


【模板: 胶片漏光电影帧】
【意图】纪录片 / 个人短片 / 视频章节卡的开场单帧 —— 暖橙漏光 + 35mm 颗粒 + 衬线大字, 古典胶片质感。Inspired by hyperframes light-leak。

【画布】
- **2.39:1 letterbox** (推荐): 1920×800, 上下黑边各 140px (`#000`)。
- 或 16:9: 1920×1080, 无 letterbox。

【背景】
- 底层: 深暖色 (深红棕 `#1a0d08` / 墨绿 `#0a1410` / 蓝紫 `#0d0e1a`) 或场景描绘 (CSS gradient 模拟天空 / 室内 / 室外)。
- **胶片漏光 (Light Leak)**: 2-3 个大 `radial-gradient(ellipse at top right, #ffb547 0%, transparent 50%)` + 1 个底部 `linear-gradient(to top, #d97757 0%, transparent 30%)`; 颜色取暖橙 / 桃 / 玫红 / 暗黄, **不要冷蓝**。
- **35mm Grain**: 全屏覆盖 SVG turbulence noise 图层, opacity 14%, `mix-blend-mode: overlay`; 也可用 `background-image: url("data:image/svg+xml,...feTurbulence...")`。
- 可选: 1 道 `feDisplacementMap` 模拟胶片摆动 (慎用)。

【文字】

View the complete source on GitHub

frame-liquid-bg-hero

When your agent uses it

WebGL-style fluid displacement background with a quote overlay, suited to video intros, landing heroes, or posters.

What it loads into context

Frontmatter

472 tokens

Always available to the agent

SKILL.md

1,260 tokens

When the skill is activated

Reference documents

65 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore4,111 bytes
example.mddoc205 bytes
package.jsonruns321 bytes
source/index.htmlasset3,644 bytes
template.html-video.yamlasset1,932 bytes

Read SKILL.md


【模板: 流体背景 Hero】
【意图】可作为视频片头帧、SaaS landing 顶部 hero、海报底图。WebGL 流体感, 但用 CSS / canvas 退化绘制, 确保单文件可双击打开。Inspired by hyperframes vfx-liquid-background。

【画布】1920×1080 (横) 或 1080×1920 (竖), 二选一。背景占满。

【流体背景 — 3 种实现, 按用户偏好选】
1. **CSS 多层 radial-gradient 错位呼吸** (最稳, 默认推荐):
   - 3-5 个大椭圆 `radial-gradient(...)`, 颜色取自调色板。
   - 每个椭圆套 `@keyframes` 平移 + scale + hue-rotate, 周期 8-14s, 错峰; 整个画面叠 `mix-blend-mode: screen` 或 `overlay`。
   - 顶层加 1 层 `backdrop-filter: blur(80px)` 让边缘更糊。
2. **Canvas + simple perlin noise** (中阶):
   - 80 行 inline JS, 用 `requestAnimationFrame` 画 metaballs 或 simplex noise field。
   - 性能允许时启用, `prefers-reduced-motion` 时降回静态截图。
3. **WebGL fragment shader** (高阶, 慎用):

View the complete source on GitHub

frame-logo-outro

When your agent uses it

Segmented logo assembly, glow bloom, and tagline reveal for video outros or brand closing frames.

What it loads into context

Frontmatter

455 tokens

Always available to the agent

SKILL.md

1,176 tokens

When the skill is activated

Reference documents

53 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,887 bytes
example.mddoc194 bytes
package.jsonruns313 bytes
source/index.htmlasset3,729 bytes
template.html-video.yamlasset1,934 bytes

Read SKILL.md


【模板: Logo 收尾帧 (Logo Outro)】
【意图】视频结尾的品牌 reveal 帧 —— logo 分块拼装 + glow bloom + tagline 上浮 + CTA。Inspired by hyperframes logo-outro。

【画布】1920×1080, 黑色 `#08090c` 或品牌深色背景; 加微妙 vignette `radial-gradient(...)` 让中心更亮。

【布局】
- **中心 Logo**: 用 CSS / 内联 SVG 绘制; 由 4-8 个几何块 (圆 / 方 / 三角 / hairline) 组成。
  - 入场动画: 每个块从屏幕外滑入 (±100px 不同方向) + scale 1.4→1.0 + opacity 0→1, 错峰 80ms; 总时长 1.2s。
  - 入场完成后, 整个 logo 加 glow bloom: `filter: drop-shadow(0 0 24px <accent>40)`; 同时一道 shimmer `mask-image` 横扫 logo (500ms)。
- **品牌名**: logo 下方 6-8% 位置, 大字 (Inter Tight / SF Pro Display, 48-72px, weight 700, letter-spacing -0.02em), 入场: typewriter or fade-up after logo bloom (1.4s 开始)。
- **Tagline**: 品牌名下方一行 (24-28px, weight 400, opacity 0.7), fade in (1.8s)。
- **底部 CTA + 元数据**: 双行底部 row, 例如 `htmlanything.dev · @htmlanything · 2026`, 11px uppercase letter-spacing 0.16em, 颜色 opacity 0.4, hairline 分隔。

【调色 — 4 选 1, 不混用】

View the complete source on GitHub

frame-pentagram-stat

When your agent uses it

Swiss-grid statistic anchor — giant number, red accent, growing bars, black data bar. Rational and editorial.

What it loads into context

Frontmatter

510 tokens

Always available to the agent

SKILL.md

1,172 tokens

When the skill is activated

Reference documents

121 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,745 bytes
example.mddoc339 bytes
package.jsonruns361 bytes
preview.pngasset58,255 bytes
source/index.htmlasset6,257 bytes
template.html-video.yamlasset3,224 bytes

Read SKILL.md


【模板: 瑞士网格数据帧 (Pentagram Stat)】
【意图】单一关键指标 / benchmark 揭示 / 编辑风数据页。视觉提炼自 huashu-design 的 Pentagram 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 纯白底 `#ffffff`; 叠瑞士网格 — 水平/垂直细线 (黑, opacity 0.04-0.06), 开场 0.7s 内 scaleX/scaleY 从 0 扫入。

【字体】西文 `Archivo` (900/700/500) 或 `Helvetica Neue`; 中文 `Noto Sans SC` Bold。理性、紧凑、负字距。

【主结构 (时间轴, 默认 4s)】
- **0.0-0.7s** 网格线扫入 (scaleX/scaleY 0→1, cubic-bezier(0.16,1,0.3,1))。
- **0.5-1.6s** 右侧巨大数字锚点 (font-size ~1020px, weight 900, 黑, opacity 0.07) 从下方 8% 升入并淡现, bleed off 右边缘。
- **0.7s** 红色 eyebrow label (uppercase, letter-spacing 6px, `#E63946`) fadeUp。
- **0.85s** 主数字 headline (~200px, weight 900) fadeUp; 句点/单位用 `#E63946` 红强调。
- **1.15s** 副标 (24px, `#999`) fadeUp。
- **1.3s** 红色 center rule (高 5px) 从宽 0 → 400px 生长。

View the complete source on GitHub

frame-takram-organic

When your agent uses it

Soft-tech radial node graph as art — frosted rounded card, curved links drawing in, nodes popping outward, gentle float.

What it loads into context

Frontmatter

531 tokens

Always available to the agent

SKILL.md

1,178 tokens

When the skill is activated

Reference documents

94 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,674 bytes
SKILL.mdcore3,674 bytes
SKILL.mdcore3,674 bytes
SKILL.mdcore3,674 bytes
example.mddoc320 bytes
package.jsonruns363 bytes
preview.pngasset398,298 bytes
source/index.htmlasset5,364 bytes
template.html-video.yamlasset3,335 bytes

Read SKILL.md


【模板: 东方柔和有机帧 (Takram Organic)】
【意图】系统/架构概念揭示 / 温暖产品叙事 / 网络/记忆图解。视觉提炼自 huashu-design 的 Takram 流派 (MIT, © alchaincyf)。

【画布】1920×1080, 米色底 `#EFEAE0`; 右侧叠 sage 绿径向 wash (`rgba(122,158,127,0.10)`)。整体柔和、自然、有呼吸感。

【字体】西文 `Manrope` 700/600/400; 中文 `Noto Sans SC`。圆润, 不要太硬。

【主结构 (时间轴, 默认 5s)】
- **0.2s** 左侧毛玻璃圆角卡 (`rgba(255,253,248,0.66)` + blur 8px + border-radius 40px + 柔影) 从下方 26px + scale 0.985 升入。
- **0.7s** 绿色 eyebrow (`#7A9E7F`, uppercase, letter-spacing 4px) fadeUp。
- **0.9s** 卡标题 (92px, weight 700) fadeUp; 一个 accent 词用陶土橙 `#C98A5E`。
- **1.2s** caption (22px, `#8A867C`, line-height 1.8) fadeUp。
- **1.3s** 右侧放射图中心节点 (陶土橙, r=40) 弹出 (overshoot)。
- **1.4s 起** 8 条曲线 link (sage `#B8C9BA`, stroke-dasharray draw) 从中心错峰描出。

View the complete source on GitHub

vfx-text-cursor

When your agent uses it

Cursor light trail, chromatic rays, and directional flares for word-by-word quote reveals in video intros.

What it loads into context

Frontmatter

483 tokens

Always available to the agent

SKILL.md

1,166 tokens

When the skill is activated

Reference documents

78 tokens

Loaded on request

Token counts are estimates. Scripts run separately; they are not counted as reference context.

The playbook

Scripts executed separately

package.json

Files

SKILL.mdcore3,696 bytes
example.mddoc225 bytes
package.jsonruns311 bytes
source/index.htmlasset3,549 bytes
template.html-video.yamlasset1,800 bytes

Read SKILL.md


【模板: VFX 文字光标 (Text Cursor)】
【意图】视频开场/Hero 帧 —— 光标在画布上"打字", 文字逐字浮现, 后面拖着彩色像散尾迹 + 定向光斑。Inspired by hyperframes vfx-text-cursor。

【画布】1920×1080, 背景 `#06070a` 暗哑黑 或 `#0a0d12` (有暖偏蓝); 加微妙 vignette。

【内容】
- 一句金句 (中英不限), 居中, 字号 6-8vw, weight 700, 字体 `Inter Tight` / `Source Sans 3` / `Noto Sans SC`。
- 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor `▍` (或细 vertical bar)。
- 已揭示文字默认白色 `#f5f5f7`, opacity 1; 即将揭示位置加 chromatic ghost: 一份 `text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff` 在 reveal 瞬间, 200ms 内收敛回正常。
- 光标本身: 16px 宽矩形, 颜色 = accent (取 1: hot pink `#ff3b6f` / cyan `#00d4ff` / amber `#ffb547`), 闪烁 `@keyframes` 1.0s 周期; 后面拖一条 60-120px 的 motion blur trail (径向渐变到透明)。

【光斑 / 射线】
- 在打字位置附近随机生成 3-5 道**定向光斑** (light leak): 用 `linear-gradient(45deg, transparent, accent20, transparent)` 的细长矩形 + `mix-blend-mode: screen`, 不规则角度。
- 当文字打完, 整段文字加 0.5s shimmer sweep (光带横扫)。

View the complete source on GitHub

Skills included

frame-bold-poster
frame-bold-signal
frame-build-minimal
frame-creative-voltage
frame-data-chart-nyt
frame-data-rollup
frame-electric-studio
frame-glitch-title
frame-light-leak-cinema
frame-liquid-bg-hero
frame-logo-outro
frame-pentagram-stat
frame-takram-organic
vfx-text-cursor

Repository facts

License: Apache-2.0
Created: May 27, 2026
Last pushed: Jun 21, 2026
Forks: 580
Open issues: 31
Project activity: Slowing

Rank over the last 12 weeks

Now #284 · best #224 · down 34 in 30 days

#276 on Oct 30
#277 from Oct 31 to Nov 1
#278 on Nov 2
#281 on Nov 3
#282 on Nov 4
#284 since Nov 5

64 earlier periods

#216 on Aug 2
#219 from Aug 7 to Aug 9
#226 on Aug 10
#225 on Aug 11
#223 on Aug 12
#226 from Aug 13 to Aug 14
#225 on Aug 15
#224 from Aug 16 to Aug 17
#227 from Aug 18 to Aug 19
#224 on Aug 20
#226 on Aug 21
#224 on Aug 22
#229 from Aug 23 to Aug 25
#230 on Aug 26
#232 from Aug 27 to Aug 29
#230 from Aug 30 to Aug 31
#235 on Sep 1
#229 on Sep 2
#236 on Sep 3
#232 on Sep 4
#235 on Sep 5
#232 on Sep 6
#234 from Sep 7 to Sep 8
#235 on Sep 9
#234 on Sep 10
#235 on Sep 11
#236 on Sep 12
#240 from Sep 13 to Sep 14
#241 on Sep 15
#240 on Sep 16
#239 on Sep 17
#243 on Sep 18
#239 on Sep 19
#244 from Sep 20 to Sep 21
#243 from Sep 22 to Sep 23
#245 on Sep 24
#245 on Sep 26
#244 on Sep 27
#247 from Sep 28 to Sep 29
#245 on Sep 30
#247 on Oct 1
#248 on Oct 2
#246 on Oct 3
#243 on Oct 4
#246 on Oct 5
#247 on Oct 6
#250 on Oct 7
#252 on Oct 8
#255 on Oct 9
#251 on Oct 10
#253 on Oct 11
#257 on Oct 12
#258 on Oct 13
#257 on Oct 14
#258 on Oct 15
#256 on Oct 16
#259 from Oct 17 to Oct 20
#263 on Oct 21
#264 on Oct 22
#263 on Oct 23
#264 on Oct 24
#266 on Oct 25
#270 on Oct 28
#274 on Oct 29

Before you install

Local scripts

Automated signals, not a guarantee

Checked Nov 2, 2026

Not fully analyzed: some files were too long, unreadable or missing. This never lowers the level.

Show 4 notes

templates/frame-data-chart-nyt/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
templates/frame-takram-organic/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
templates/frame-takram-organic/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed
templates/frame-takram-organic/SKILL.md:1 Analysis incomplete: Referenced executable target unavailable; not analyzed

No broad tool permissions
No dangerous shell commands
201 network referencesin 41 files: frame-glitch-title/source/index.html:4 frame-light-leak-cinema/source/index.html:4 vfx-text-cursor/source/index.html:4 and 38 more
No hidden or obfuscated text
No instruction overrides
17 executable scriptsin 17 files: frame-bold-poster/package.json:1 frame-bold-signal/package.json:1 frame-build-minimal/package.json:1 and 14 more
No access to secrets
No requests to vote in Hot

Show all 218 signals by file

`templates/frame-bold-poster/SKILL.md`

Network accessline 18

example_tagline: "番红 + 墨黑 + 巨型倾斜大字" example_desc: "品牌宣言 / 社论开场 — 红线划入 + 大字旋转落入 + 三行标题逐行升起" example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 19

example_desc: "品牌宣言 / 社论开场 — 红线划入 + 大字旋转落入 + 三行标题逐行升起" example_source_url: "https://github.com/zarazhangrui/frontend-slides" example_source_label: "frontend-slides · Bold Poster (MIT)"

Network accessline 20

example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 26

featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"   preview:

Network accessline 27

upstream: "https://github.com/zarazhangrui/frontend-slides"

`templates/frame-bold-poster/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-bold-poster/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Bold Poster · Editorial Statement Frame</title> <link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap" rel="styles

Network accessline 5

<title>Bold Poster · Editorial Statement Frame</title> <link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Shrikhand&family=Libre+Baskerville:ital@0;1&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />

`templates/frame-bold-poster/template.html-video.yaml`

Network accessline 101

name: frontend-slides     author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides

Network accessline 102

author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides     license: MIT

Network accessline 103

url: https://github.com/zarazhangrui/frontend-slides

Network accessline 115

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 116

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 117
```
url: https://github.com/nexu-io
```

`templates/frame-bold-signal/SKILL.md`

Network accessline 18

example_tagline: "暗渐变底 + 橙色焦点卡 + 大编号" example_desc: "章节分隔 / 大胆陈述 — 橙卡从右滑入 + 标题升起" example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 19

example_desc: "章节分隔 / 大胆陈述 — 橙卡从右滑入 + 标题升起" example_source_url: "https://github.com/zarazhangrui/frontend-slides" example_source_label: "frontend-slides · Bold Signal (MIT)"

Network accessline 20

example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 26

featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"   preview:

Network accessline 27

upstream: "https://github.com/zarazhangrui/frontend-slides"

`templates/frame-bold-signal/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-bold-signal/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Bold Signal · Colored Card on Dark</title> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />

Network accessline 5

<title>Bold Signal · Colored Card on Dark</title> <link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Archivo+Black&family=Space+Grotesk:wght@400;500;700&display=swap" rel="stylesheet" />

`templates/frame-bold-signal/template.html-video.yaml`

Network accessline 83

name: frontend-slides     author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides

Network accessline 84

author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides     license: MIT

Network accessline 85

url: https://github.com/zarazhangrui/frontend-slides

Network accessline 94

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 95

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 96
```
url: https://github.com/nexu-io
```

`templates/frame-build-minimal/SKILL.md`

Network accessline 18

example_tagline: "超细 Inter 单词逐字浮现 + 暖金细线" example_desc: "70% 留白 + 角标 + 侧边竖排标签 + 8 条呼吸细线" example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 19

example_desc: "70% 留白 + 角标 + 侧边竖排标签 + 8 条呼吸细线" example_source_url: "https://github.com/alchaincyf/huashu-design" example_source_label: "huashu-design · Build (MIT)"

Network accessline 20

example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"

Network accessline 26

featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"   preview:

Network accessline 27

upstream: "https://github.com/alchaincyf/huashu-design"

`templates/frame-build-minimal/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-build-minimal/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Build Minimal · Luxury Whitespace</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet" />

Network accessline 5

<title>Build Minimal · Luxury Whitespace</title> <link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Inter:wght@200;300;400;500&display=swap" rel="stylesheet" />

`templates/frame-build-minimal/template.html-video.yaml`

Network accessline 79

name: huashu-design     author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design

Network accessline 80

author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design     license: MIT

Network accessline 81

url: https://github.com/alchaincyf/huashu-design

Network accessline 91

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 92

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 93
```
url: https://github.com/nexu-io
```

`templates/frame-creative-voltage/SKILL.md`

Network accessline 18

example_tagline: "电光蓝/暗错位分屏 + 手写 script 自描" example_desc: "能量感品牌标题 — 描边电光词 + 手写体描入 + 扫入下划线" example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 19

example_desc: "能量感品牌标题 — 描边电光词 + 手写体描入 + 扫入下划线" example_source_url: "https://github.com/zarazhangrui/frontend-slides" example_source_label: "frontend-slides · Creative Voltage (MIT)"

Network accessline 20

example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 26

featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"   preview:

Network accessline 27

upstream: "https://github.com/zarazhangrui/frontend-slides"

`templates/frame-creative-voltage/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-creative-voltage/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Creative Voltage · Electric Split + Script</title> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:wght@400;700&family=Caveat:wght@600&display=swap" rel="stylesheet" /

Network accessline 5

<title>Creative Voltage · Electric Split + Script</title> <link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:wght@400;700&family=Caveat:wght@600&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Syne:wght@700;800&family=Space+Mono:wght@400;700&family=Caveat:wght@600&display=swap" rel="stylesheet" />

`templates/frame-creative-voltage/template.html-video.yaml`

Network accessline 85

name: frontend-slides     author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides

Network accessline 86

author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides     license: MIT

Network accessline 87

url: https://github.com/zarazhangrui/frontend-slides

Network accessline 97

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 98

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 99
```
url: https://github.com/nexu-io
```

`templates/frame-data-chart-nyt/SKILL.md`

Network accessline 17

example_tagline: "编辑级图表 + 错峰揭示" example_desc: "8 年周活跃用户折线 + NYT red accent + 注释 mono" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 18

example_desc: "8 年周活跃用户折线 + NYT red accent + 注释 mono" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · data-chart"

Network accessline 19

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 23

surface: video   scenario: video   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 24

scenario: video   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 25

upstream: "https://github.com/nexu-io/html-anything"

`templates/frame-data-chart-nyt/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-data-chart-nyt/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>NYT Chart · AI Agent MAU 2018–2026</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>NYT Chart · AI Agent MAU 2018–2026</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&fa

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Source+Serif+Pro:ital,wght@0,400;0,600;1,400&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&family=Noto+Sans+SC:wght@400;500;600&display=swap" rel="stylesheet" />

`templates/frame-data-chart-nyt/template.html-video.yaml`

Network accessline 75

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 76

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 77
```
url: https://github.com/nexu-io
```

`templates/frame-data-rollup/SKILL.md`

Network accessline 23

scenario: video   featured: 0   upstream: "https://github.com/nexu-io/html-video"

Network accessline 24

featured: 0   upstream: "https://github.com/nexu-io/html-video"   preview:

Network accessline 25

upstream: "https://github.com/nexu-io/html-video"

`templates/frame-data-rollup/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-data-rollup/source/DataRollup.tsx`

Executable scriptline 1
```
Executable file
```

`templates/frame-data-rollup/source/Root.tsx`

Executable scriptline 1
```
Executable file
```

`templates/frame-data-rollup/source/entry.ts`

Executable scriptline 1
```
Executable file
```

`templates/frame-data-rollup/template.html-video.yaml`

Network accessline 107

name: "none"     author: "nexu-io"     url: https://github.com/nexu-io/html-video

Network accessline 108

author: "nexu-io"     url: https://github.com/nexu-io/html-video     license: Apache-2.0

Network accessline 109

url: https://github.com/nexu-io/html-video

Network accessline 121

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 122

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 123
```
url: https://github.com/nexu-io
```

`templates/frame-electric-studio/SKILL.md`

Network accessline 18

example_tagline: "白/蓝双屏开合 + 引言逐行浮现" example_desc: "pull-quote / 使命陈述 — 黑色 accent 条 + 跨屏引言" example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 19

example_desc: "pull-quote / 使命陈述 — 黑色 accent 条 + 跨屏引言" example_source_url: "https://github.com/zarazhangrui/frontend-slides" example_source_label: "frontend-slides · Electric Studio (MIT)"

Network accessline 20

example_source_url: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"

Network accessline 26

featured: 0   upstream: "https://github.com/zarazhangrui/frontend-slides"   preview:

Network accessline 27

upstream: "https://github.com/zarazhangrui/frontend-slides"

`templates/frame-electric-studio/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-electric-studio/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Electric Studio · Split Panel Quote</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet" />

Network accessline 5

<title>Electric Studio · Split Panel Quote</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;700;800&display=swap" rel="stylesheet" />

`templates/frame-electric-studio/template.html-video.yaml`

Network accessline 85

name: frontend-slides     author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides

Network accessline 86

author: "Zara Zhang"     url: https://github.com/zarazhangrui/frontend-slides     license: MIT

Network accessline 87

url: https://github.com/zarazhangrui/frontend-slides

Network accessline 97

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 98

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 99
```
url: https://github.com/nexu-io
```

`templates/frame-glitch-title/SKILL.md`

Network accessline 18

example_tagline: "cyan / magenta 像散 + CRT 扫描线" example_desc: "巨大标题 + 数据腐败伪影 + 角落 ASCII 噪点 chunks" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 19

example_desc: "巨大标题 + 数据腐败伪影 + 角落 ASCII 噪点 chunks" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · glitch"

Network accessline 20

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 25

scenario: video   featured: 0.14   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 26

featured: 0.14   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 27

upstream: "https://github.com/nexu-io/html-anything"

`templates/frame-glitch-title/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-glitch-title/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Glitch Title · SIGNAL_LOST</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>Glitch Title · SIGNAL_LOST</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="styleshe

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700;800&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet" />

Network accessline 23

/* grain */   .grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfi

Network accessline 24

.grain { position:absolute; inset:0; opacity:0.1; mix-blend-mode:overlay; z-index:4; pointer-events:none;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E

Network accessline 25

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='ur

`templates/frame-glitch-title/template.html-video.yaml`

Network accessline 65

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 66

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 67
```
url: https://github.com/nexu-io
```

`templates/frame-light-leak-cinema/SKILL.md`

Network accessline 17

example_tagline: "暖橙漏光 + 35mm 颗粒" example_desc: "2.39:1 letterbox + 衬线斜体大字 + 胶片齿孔" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 18

example_desc: "2.39:1 letterbox + 衬线斜体大字 + 胶片齿孔" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · light-leak"

Network accessline 19

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 23

surface: video   scenario: video   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 24

scenario: video   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 25

upstream: "https://github.com/nexu-io/html-anything"

`templates/frame-light-leak-cinema/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-light-leak-cinema/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Light Leak Cinema · REEL 03</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>Light Leak Cinema · REEL 03</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;1,400;1,500&family=Source+Serif+Pro:ital,wght@0,400;1,400;1,500&family=IBM+Plex+Mono:wght@400;500&family=Noto+Serif+SC:wght@400;500&display=swap" rel="st

Network accessline 23

}   .grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeT

Network accessline 24

.grain { position:absolute; inset:0; opacity:0.14; mix-blend-mode:overlay; pointer-events:none;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbu

Network accessline 25

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='u

`templates/frame-light-leak-cinema/template.html-video.yaml`

Network accessline 65

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 66

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 67
```
url: https://github.com/nexu-io
```

`templates/frame-liquid-bg-hero/SKILL.md`

Network accessline 17

example_tagline: "Aurora Violet 流体" example_desc: "多层 radial-gradient 呼吸背景 + difference 文字" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 18

example_desc: "多层 radial-gradient 呼吸背景 + difference 文字" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · vfx-liquid-background"

Network accessline 19

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 23

surface: video   scenario: video   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 24

scenario: video   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 25

upstream: "https://github.com/nexu-io/html-anything"

`templates/frame-liquid-bg-hero/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-liquid-bg-hero/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Liquid Hero · Aurora Violet</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>Liquid Hero · Aurora Violet</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=Source+Serif+Pr

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=Source+Serif+Pro:ital,wght@1,400;1,600&display=swap" rel="stylesheet" />

`templates/frame-liquid-bg-hero/template.html-video.yaml`

Network accessline 69

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 70

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 71
```
url: https://github.com/nexu-io
```

`templates/frame-logo-outro/SKILL.md`

Network accessline 18

example_tagline: "Midnight Indigo + glow bloom" example_desc: "Logo 装配 + 品牌名 + tagline + CTA, 视频片尾用" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 19

example_desc: "Logo 装配 + 品牌名 + tagline + CTA, 视频片尾用" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · logo-outro"

Network accessline 20

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 25

scenario: video   featured: 0.16   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 26

featured: 0.16   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 27

upstream: "https://github.com/nexu-io/html-anything"

`templates/frame-logo-outro/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-logo-outro/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Logo Outro · HTML Anything</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>Logo Outro · HTML Anything</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;5

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;800;900&family=Inter:wght@400;500&family=Noto+Sans+SC:wght@400;500;700&display=swap" rel="stylesheet" />

`templates/frame-logo-outro/template.html-video.yaml`

Network accessline 68

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 69

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 70
```
url: https://github.com/nexu-io
```

`templates/frame-pentagram-stat/SKILL.md`

Network accessline 18

example_tagline: "巨大红黑数字 + 瑞士网格 + 生长条形图" example_desc: "单一关键指标锚点 + 网格线扫入 + 黑色数据底栏滑入" example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 19

example_desc: "单一关键指标锚点 + 网格线扫入 + 黑色数据底栏滑入" example_source_url: "https://github.com/alchaincyf/huashu-design" example_source_label: "huashu-design · Pentagram (MIT)"

Network accessline 20

example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"

Network accessline 26

featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"   preview:

Network accessline 27

upstream: "https://github.com/alchaincyf/huashu-design"

`templates/frame-pentagram-stat/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-pentagram-stat/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Pentagram Stat · Swiss Grid Data Anchor</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&display=swap" rel="stylesheet" />

Network accessline 5

<title>Pentagram Stat · Swiss Grid Data Anchor</title> <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Archivo:wght@500;700;900&display=swap" rel="stylesheet" />

`templates/frame-pentagram-stat/template.html-video.yaml`

Network accessline 83

name: huashu-design     author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design

Network accessline 84

author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design     license: MIT

Network accessline 85

url: https://github.com/alchaincyf/huashu-design

Network accessline 95

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 96

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 97
```
url: https://github.com/nexu-io
```

`templates/frame-takram-organic/SKILL.md`

Network accessline 18

example_tagline: "毛玻璃圆角卡 + 放射节点弹出 + 柔和漂浮" example_desc: "米色底 + 自然色 (sage/terracotta) + 八节点放射图作为艺术品" example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 19

example_desc: "米色底 + 自然色 (sage/terracotta) + 八节点放射图作为艺术品" example_source_url: "https://github.com/alchaincyf/huashu-design" example_source_label: "huashu-design · Takram (MIT)"

Network accessline 20

example_source_url: "https://github.com/alchaincyf/huashu-design"

Network accessline 25

scenario: video   featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"

Network accessline 26

featured: 0   upstream: "https://github.com/alchaincyf/huashu-design"   preview:

Network accessline 27

upstream: "https://github.com/alchaincyf/huashu-design"

`templates/frame-takram-organic/package.json`

Executable scriptline 1
```
Executable file
```

`templates/frame-takram-organic/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>Takram Organic · Soft Tech Radial</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

Network accessline 5

<title>Takram Organic · Soft Tech Radial</title> <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet" /> <style>

Network accessline 6

<link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;600;700&display=swap" rel="stylesheet" />

`templates/frame-takram-organic/template.html-video.yaml`

Network accessline 85

name: huashu-design     author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design

Network accessline 86

author: "alchaincyf (花叔 · 花生)"     url: https://github.com/alchaincyf/huashu-design     license: MIT

Network accessline 87

url: https://github.com/alchaincyf/huashu-design

Network accessline 97

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 98

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 99
```
url: https://github.com/nexu-io
```

`templates/vfx-text-cursor/SKILL.md`

Network accessline 18

example_tagline: "逐字揭示 + chromatic 拖光" example_desc: "光标打字 hot pink + cyan 像散, 视频开场用" example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 19

example_desc: "光标打字 hot pink + cyan 像散, 视频开场用" example_source_url: "https://hyperframes.heygen.com/catalog" example_source_label: "hyperframes · vfx-text-cursor"

Network accessline 20

example_source_url: "https://hyperframes.heygen.com/catalog"

Network accessline 25

scenario: video   featured: 0.15   upstream: "https://github.com/nexu-io/html-anything"

Network accessline 26

featured: 0.15   upstream: "https://github.com/nexu-io/html-anything"   preview:

Network accessline 27

upstream: "https://github.com/nexu-io/html-anything"

`templates/vfx-text-cursor/package.json`

Executable scriptline 1
```
Executable file
```

`templates/vfx-text-cursor/source/index.html`

Network accessline 4

<meta charset="UTF-8" /> <title>VFX Text Cursor · Opening</title> <script src="https://cdn.tailwindcss.com"></script>

Network accessline 5

<title>VFX Text Cursor · Opening</title> <script src="https://cdn.tailwindcss.com"></script> <link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=JetBrains+Mono&di

Network accessline 6

<script src="https://cdn.tailwindcss.com"></script>

Network accessline 7

<link href="https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;700;800;900&family=Noto+Sans+SC:wght@400;700;900&family=JetBrains+Mono&display=swap" rel="stylesheet" />

Network accessline 10

.vignette { position:absolute; inset:0; background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.8) 100%); z-index:1; }   .grain { position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none; z-i

Network accessline 11

.grain { position:absolute; inset:0; opacity:0.06; mix-blend-mode:overlay; pointer-events:none; z-index:2;     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3

Network accessline 12

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='ur

`templates/vfx-text-cursor/template.html-video.yaml`

Network accessline 67

author:   name: nexu-io   url: https://github.com/nexu-io

Network accessline 68

name: nexu-io   url: https://github.com/nexu-io   contact: open-design@nexu.io

Network accessline 69
```
url: https://github.com/nexu-io
```

How the signals fit together

Facts from a static read of the files at the pinned commit. They describe what the code does, not why.

Some files could not be read; the facts below still hold.

Signal confidence: 98 facts

Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:20Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:25Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:26Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-poster/SKILL.md:27Low confidence
Executable script in code of a file that runsframe-bold-poster/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:20Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:25Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:26Low confidence
Network access in the frontmatter of the SKILL.mdframe-bold-signal/SKILL.md:27Low confidence
Executable script in code of a file that runsframe-bold-signal/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:20Low confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:25Low confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:26Low confidence
Network access in the frontmatter of the SKILL.mdframe-build-minimal/SKILL.md:27Low confidence
Executable script in code of a file that runsframe-build-minimal/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:20Low confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:25Low confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:26Low confidence
Network access in the frontmatter of the SKILL.mdframe-creative-voltage/SKILL.md:27Low confidence
Executable script in code of a file that runsframe-creative-voltage/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:17Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:23Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:24Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-chart-nyt/SKILL.md:25Low confidence
Executable script in code of a file that runsframe-data-chart-nyt/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-data-rollup/SKILL.md:23Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-rollup/SKILL.md:24Low confidence
Network access in the frontmatter of the SKILL.mdframe-data-rollup/SKILL.md:25Low confidence
Executable script in code of a file that runsframe-data-rollup/package.json:1High confidence
Executable script in a comment of a file that runsframe-data-rollup/source/DataRollup.tsx:1Low confidence
Executable script in a comment of a file that runsframe-data-rollup/source/Root.tsx:1Low confidence
Executable script in a comment of a file that runsframe-data-rollup/source/entry.ts:1Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:18Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:19Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:20Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:25Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:26Low confidence
Network access in the frontmatter of the SKILL.mdframe-electric-studio/SKILL.md:27Low confidence
Executable script in code of a file that runsframe-electric-studio/package.json:1High confidence
Network access in the frontmatter of the SKILL.mdframe-glitch-title/SKILL.md:18Low confidence

and 48 more

Works with

Agent compatibility, from the files in this repository
Agent	Status	Evidence	Install to
Claude Code	Native	Path CLAUDE.md	`.claude/skills/<skill-name>/`
Codex	Compatible	Standard SKILL.md templates/frame-bold-poster/SKILL.md	`.agents/skills/<skill-name>/`
Cursor	Compatible	Standard SKILL.md templates/frame-bold-poster/SKILL.md	`.cursor/skills/<skill-name>/`
Gemini CLI	Compatible	Standard SKILL.md templates/frame-bold-poster/SKILL.md	`.gemini/skills/<skill-name>/`
GitHub Copilot	Compatible	Standard SKILL.md templates/frame-bold-poster/SKILL.md	`.github/skills/<skill-name>/`
OpenCode	Compatible	Standard SKILL.md templates/frame-bold-poster/SKILL.md	`.opencode/skills/<skill-name>/`

Native The repository ships a manifest, folder or frontmatter field for this agent.
Compatible A standard SKILL.md that this agent can read.
Unknown No evidence either way.

Derived automatically from paths, manifests and frontmatter. Not tested on each agent.

Explore alternatives and comparisons

Add this badge to your README

It updates every night and links to this page.

[![nexu-io/html-video on hotskills](https://hotskills.dev/badge/nexu-io-html-video.svg)](https://hotskills.dev/skill/nexu-io-html-video/)

nexu-io/html-video

History

templates/frame-bold-poster/SKILL.md

templates/frame-bold-signal/SKILL.md

templates/frame-build-minimal/SKILL.md

templates/frame-creative-voltage/SKILL.md

templates/frame-data-chart-nyt/SKILL.md

templates/frame-data-rollup/SKILL.md

templates/frame-electric-studio/SKILL.md

templates/frame-glitch-title/SKILL.md

templates/frame-light-leak-cinema/SKILL.md

templates/frame-liquid-bg-hero/SKILL.md

templates/frame-logo-outro/SKILL.md

templates/frame-pentagram-stat/SKILL.md

templates/frame-takram-organic/SKILL.md

templates/vfx-text-cursor/SKILL.md

Share this page

Heat

Stars over time

Individual skills in this repository

How it works

frame-bold-poster

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-bold-signal

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-build-minimal

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-creative-voltage

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-data-chart-nyt

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-data-rollup

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-electric-studio

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-glitch-title

Frontmatter

SKILL.md

Reference documents

The playbook

Scripts executed separately

Files

frame-light-leak-cinema

Frontmatter

SKILL.md

`templates/frame-bold-poster/SKILL.md`

`templates/frame-bold-signal/SKILL.md`

`templates/frame-build-minimal/SKILL.md`

`templates/frame-creative-voltage/SKILL.md`

`templates/frame-data-chart-nyt/SKILL.md`

`templates/frame-data-rollup/SKILL.md`

`templates/frame-electric-studio/SKILL.md`

`templates/frame-glitch-title/SKILL.md`

`templates/frame-light-leak-cinema/SKILL.md`

`templates/frame-liquid-bg-hero/SKILL.md`

`templates/frame-logo-outro/SKILL.md`

`templates/frame-pentagram-stat/SKILL.md`

`templates/frame-takram-organic/SKILL.md`

`templates/vfx-text-cursor/SKILL.md`

`templates/frame-bold-poster/SKILL.md`

`templates/frame-bold-poster/package.json`

`templates/frame-bold-poster/source/index.html`

`templates/frame-bold-poster/template.html-video.yaml`

`templates/frame-bold-signal/SKILL.md`

`templates/frame-bold-signal/package.json`

`templates/frame-bold-signal/source/index.html`

`templates/frame-bold-signal/template.html-video.yaml`

`templates/frame-build-minimal/SKILL.md`

`templates/frame-build-minimal/package.json`

`templates/frame-build-minimal/source/index.html`

`templates/frame-build-minimal/template.html-video.yaml`

`templates/frame-creative-voltage/SKILL.md`

`templates/frame-creative-voltage/package.json`

`templates/frame-creative-voltage/source/index.html`

`templates/frame-creative-voltage/template.html-video.yaml`

`templates/frame-data-chart-nyt/SKILL.md`

`templates/frame-data-chart-nyt/package.json`

`templates/frame-data-chart-nyt/source/index.html`

`templates/frame-data-chart-nyt/template.html-video.yaml`

`templates/frame-data-rollup/SKILL.md`

`templates/frame-data-rollup/package.json`

`templates/frame-data-rollup/source/DataRollup.tsx`

`templates/frame-data-rollup/source/Root.tsx`

`templates/frame-data-rollup/source/entry.ts`

`templates/frame-data-rollup/template.html-video.yaml`

`templates/frame-electric-studio/SKILL.md`