1实现原理 · 为什么它能做到
该 skill 不是可执行程序，而是 html-anything 的「模板」：一个目录（SKILL.md + example.html[/example.md]），由 loader.ts 在运行时扫盘读取——新增模板＝新增目录，不需要改 TypeScript。
next/src/lib/templates/loader.ts
Adding a template = adding a folder. No TS code change required; the API
注：SKILLS_DIR 固定在应用 cwd 的 src/lib/templates/skills；listSkills() 遍历一级子目录并按 isValidBundledId 过滤，逐目录读 SKILL.md、解析 frontmatter，所以「选择器元数据」和「生成用 prompt 正文」出自同一份文件。
frontmatter 是给选择器/API 的元数据（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags），由 fmToMeta() 映射成 SkillMeta；frontmatter 之后的正文才是给模型的规格。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
注：id 取自目录名；example 元数据（example_id/name/format/tagline/desc/source_url）只在目录带 example.md/html 时才产出 SkillExampleMeta，body 被刻意排除在列表 API 之外（注释：Body is excluded so we can return the entire registry in one cheap fetch）。
生成时该模板正文被当成 prompt body：/api/convert 用 assemblePrompt() 把「全局设计指令 + 本模板正文 + 用户内容」拼成一段 prompt，交给宿主的本地 agent CLI，HTML 由 stdout 流式捕获。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
注：同路由另有 editFromHtml/editFromContent 的「最小化差异编辑」分支；模板正文在这条链路上只是字符串，没有求值、没有执行。
模板正文之上还压着一段全局前置指令（SHARED_DESIGN_DIRECTIVES），把技术与内容纪律统一加在每个模板之前——示例 HTML 里普遍出现的 CDN/字体外链就源自这里（宿主壳注入，不是模板自身要求）。
next/src/lib/templates/shared.ts
通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。
注：模板正文只负责风格/版面/组件，不重复这些硬要求；判级只算模板自身目录，该端点是宿主壳行为，写进 security.reason 自证。
产物以 stdout 文本返回：全局指令显式禁止 agent 动用文件系统，落盘由前端负责——所以模板目录既无脚本也无写盘能力。
next/src/lib/templates/shared.ts
**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。
注：原文续句要求「不要把 HTML 写到任何 .html 文件里……前端直接捕获你的 stdout 文本, 文件落盘由前端负责」；产物最终由前端写入任务记录与导出。
example.html 是随包预渲染示例：/api/templates/<id>/preview 原样按 text/html 返回给 iframe（选择器内联预览），/api/templates/<id>/example 另把 example.md + example.html 一起返回。
next/src/app/api/templates/[id]/preview/route.ts
return new Response(skill.exampleHtml, {
注：示例只作预览/文档，不参与生成 prompt（生成只用 SKILL.md 正文），因此它的外链不影响模板自身的能力边界。
正文把「动效」写成可验收的时序规格：逐字揭示 80ms/字、光标块跟随当前字符、chromatic ghost 在 reveal 瞬间出现并于 200ms 内收敛。
next/src/lib/templates/skills/vfx-text-cursor/SKILL.md
- 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor `▍` (或细 vertical bar)。
注：这是「视频片头」类模板的核心机制：用字符级时序把一句金句变成可剪辑的开场帧；同段还给出 text-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ff 的具体像散配方。
光斑/射线用 CSS 合成而非位图：细长矩形 linear-gradient + mix-blend-mode: screen，随机 3-5 道、角度不规则。
next/src/lib/templates/skills/vfx-text-cursor/SKILL.md
- 在打字位置附近随机生成 3-5 道**定向光斑** (light leak)
注：正文续述「用 `linear-gradient(45deg, transparent, accent20, transparent)` 的细长矩形 + `mix-blend-mode: screen`」；示例实现为 .ray 三条（.ray-1/2/3）静态近似。
明确「不要什么」的负面约束：只用 1 个 hot pink + cyan 的二元像散，禁止 R/G/B 全色彩虹，且严禁衬线字体。
next/src/lib/templates/skills/vfx-text-cursor/SKILL.md
- **绝不**: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。
注：此约束把「像散」限制在可辨识的两色，避免变成廉价彩虹描边——是模板质量纪律而非审美形容。
无障碍与素材真实性写进正文：动效须可被 prefers-reduced-motion 关闭（直接显示全部文字），且必须使用用户提供的金句、不得捏造。
next/src/lib/templates/skills/vfx-text-cursor/SKILL.md
- 必须用用户提供的金句; 不要捏造。
注：同段上一条要求「动效用 `@keyframes` + JS 计时器 (`setTimeout` 逐字), 可被 `prefers-reduced-motion` 关闭」。
示例 HTML 只兑现了「静态一帧」：光标块用 CSS blink 动画闪烁、chromatic 是整段文字的静态 text-shadow、三条 .ray 固定角度——没有逐字揭示的 JS 计时器、没有 shimmer、也没有 prefers-reduced-motion 降级。
next/src/lib/templates/skills/vfx-text-cursor/example.html
animation: blink 1s steps(1) infinite;
注：对示例 grep 无 setTimeout、无 prefers-reduced-motion、无 shimmer；即正文声明的「逐字揭示/0.5s shimmer sweep」在随包示例中没有实现（示例定位是开场帧的静帧预览）。
CLI 侧另有一条关键词直配通道：skills-matcher.ts 把用户内容里的关键词直接映射到该模板 id，命中即给 confidence＝命中数×2+3，达到阈值 3 就走本地规则、不再让模型挑模板。
cli/src/skills-matcher.ts
[["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"],
注：VFX/光标/chromatic 等词直配 vfx-text-cursor；video 场景信号另有一份关键词表（视频/帧/hyperframes/remotion/VFX/片头）。
CLI 兜底匹配用到的阈值常量：内容长度需超过 60 字符才启用 AI 摘要匹配；强信号阈值是 3。
cli/src/skills-matcher.ts
const MIN_CONTENT_LENGTH_FOR_AI = 60;
注：另有 SCENARIO_SIGNALS 按模板 scenario 给关键词加权、fallbackMatch 用 tags/zhName/description 打分，两层都失效才调用 agent 做摘要匹配。
宿主壳用 sandbox="allow-scripts allow-same-origin" 的 iframe 渲染示例/产物（允许脚本、允许同源）——这是产品壳取舍，写进风险，不参与本 skill 判级。
next/src/components/template-picker.tsx
sandbox="allow-scripts allow-same-origin"
注：preview-pane.tsx / deck-viewer.tsx 同款；示例 HTML 的内联 JS 只在浏览器预览时执行，skill 自身不执行任何脚本。
2核心能力
011920×1080 视频开场帧（暗底 #06070a + vignette + 噪点）
02逐字揭示时序（80ms/字 + 光标跟随）
03chromatic 像散 ghost（reveal 瞬间 → 200ms 收敛）
04定向光斑 light leak（screen 混合、3-5 道）
05完成态 shimmer sweep（0.5s 光带横扫）
06元数据层：顶部 caption + 来源副标 + 右下 timecode
07reduced-motion 降级（直接显示全部文字）
3外部依赖
| 类型 | 依赖 |
|---|---|
| network | Tailwind CDN（示例 HTML 引用） |
| network | Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono） |
| network | 示例来源标注（frontmatter 元数据，非运行依赖） |
4风险提醒 风险提醒：绿色 · 放心使用
风险提醒：绿色 · 放心使用
- 随包示例与正文规格不一致 — example.html 只有静态像散与固定三道射线，无逐字揭示/shimmer/reduced-motion；若模型把示例当作「照着抄」的模板，会漏掉正文要求的时序动效。
- 正文与全局指令存在冲突 — 正文写「不要外链字体以外的资源」，而全局指令要求 Tailwind CDN 与 Google Fonts；示例选了后者（含 <script src="https://cdn.tailwindcss.com">），实际产物会额外请求该域名。
- 按字数逐字揭示在长句上偏长 — 80ms/字无上限约束，长金句（>60 字）会拖到 5s 以上，适合片头但不适合作为信息密度高的帧。
- 预览侧脚本可执行 — 示例含内联/外链脚本，宿主 iframe sandbox 允许脚本与同源（产品壳行为）。
风险提醒：绿色，放心使用。判级对象＝本 skill 目录（next/src/lib/templates/skills/vfx-text-cursor/），逐文件核对：零脚本、零凭证读取、零写盘；目录内出现的端点仅限 Tailwind CDN（示例 HTML 引用）、Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）、示例来源标注（frontmatter 元数据，非运行依赖），且全部位于 example.html 这一「产物示例」；SKILL.md 正文只规定版面/风格/字体族名，未点名任何运行时外部接口，故为纯指令模板＝green。宿主侧说明（不计档）：html-anything 产品壳会经 assemblePrompt() 把正文拼进 prompt 并 spawn 本地 agent CLI，并注入 cdn.tailwindcss.com + Google Fonts 要求（next/src/lib/templates/shared.ts），预览 iframe 用 sandbox="allow-scripts allow-same-origin"（next/src/components/template-picker.tsx）。
5第二遍独立确认
- [ok] skill 目录文件清单 — find 得 SKILL.md + example.html + example.md，无 scripts/references。
- [ok] 外部端点只出现在示例/元数据 — SKILL.md 正文无 URL；两个 URL 分别位于 frontmatter example_source_url（元数据）与 example.html 的 Tailwind CDN / Google Fonts link。
- [discrepancy] 逐字揭示/计时器是否在示例中实现 — SKILL.md 写明「@keyframes + JS 计时器 (setTimeout 逐字)」与 0.5s shimmer、reduced-motion 降级；example.html 只有 CSS blink 光标 + 静态 text-shadow，grep 无 setTimeout / prefers-reduced-motion / shimmer，属示例未实现正文声明的动效（示例是静帧预览）。
- [discrepancy] 「不要外链字体以外的资源」是否被示例遵守 — 正文禁非字体外链，但 example.html 引入 https://cdn.tailwindcss.com 脚本；该 Tailwind 要求实为宿主全局指令（shared.ts）强制，说明模板正文与宿主壳在此点冲突。
- [discrepancy] chromatic 只在 reveal 瞬间 vs 示例静态 — 正文要求像散在 reveal 瞬间出现并 200ms 内收敛；示例 .chroma 是整段 h1 的静态 text-shadow。
- [ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"] 行。
- [ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文未点名运行时接口，端点仅见示例与 frontmatter 元数据 → green。
- [ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。
6结论
适合：适合视频片头/章节标题帧、发布会开场金句、需要「一句话砸出来」的 hero 帧；也适合作为 Remotion/hyperframes 合成前的视觉稿。
不适合：不适合承载大量信息或结构化数据的页面；不适合需要长文排版的场景（单句 + 元数据层已是完整版式）；不适合期望产出可直接渲染的 mp4 的流程——它只产出 HTML 帧。
安装 agent 直装可复制
① 本站镜像 更新 2026-09-15
方式 A · 人下载镜像包下载 vfx-text-cursor.tar.gz
sha256:
方式 B · JSON 格式安装指南，复制给 agent315c18b1b92b614f…agent 读 JSON 指南后会自动从本站下载安装，无需更多说明。
② 上游 GitHub · 原始来源
来源信息 GitHub 原始
作者 / 仓库nexu-io / nexu-io/html-anything
原始 GitHubnexu-io/html-anything ↗
Stars8827
最近推送2026-09-15
本 skill commit
553ed98c28许可Apache-2.0（仓库根 LICENSE 文件；GitHub API license.spdx_id = Apache-2.0）
本站信息
收录日期2026-09-06
分类设计
侦查报告AI 侦查 · 2 遍 · 2026-09-06
本站镜像与 GitHub 原始是不同来源：本站锁定 commit 快照经 /r2 分发；GitHub 为实时上游，内容可能已更新。