Name: sprite-animation
Author: nexu-io/html-anything

1实现原理 · 为什么它能做到

本模板是「文件夹即模板」结构里的一份纯数据：SKILL.md 用 YAML frontmatter 供选择器使用，正文是给 agent 的版式指令；仓库不为单个模板写任何代码，新增模板＝新增一个文件夹。

next/src/lib/templates/loader.ts

SKILL.md — frontmatter (id, scenario, tags, …) + prompt body

注：loader.ts 在文件头注释里写明目录约定；frontmatter 由进程内正则解析（无 YAML 依赖），正文原样作为 prompt body 取出，前端不会拿到（「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.」）。

运行时由宿主把本模板正文夹在共享设计指令与用户内容之间拼成一次 prompt —— 模板的「智能」全在这段自然语言里，没有可执行代码。

next/src/lib/templates/shared.ts

return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}

注：assemblePrompt 的返回是「共享设计指令 + 模板正文 + 【输入格式】+【用户内容】」。共享段（同一文件 SHARED_DESIGN_DIRECTIVES）负责单文件 HTML、Tailwind/字体 CDN、内容驱动数量、禁止使用文件系统工具等硬性要求，对所有模板一致，不是本模板自带。

宿主的 /api/convert 载入该模板后把这些文字交给本地已登录的 coding-agent CLI，只把 stdout 当 HTML 流式回收；模板本身不发网络、不读凭证、不写文件。

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

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

注：同一 route 随后调用 invokeAgent({ … }) 拉起 CLI（claude / codex / cursor-agent 等，由宿主 PATH 探测）；与其配套的共享指令还明写「**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**」。

随模板附带的 example.html 是「预渲染示例」，由预览接口原样吐出、进入选择器与画廊的 iframe —— 它决定模板卡片有没有可视预览，不参与内容生成。

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

Returns the skill's `example.html` verbatim so it can be loaded into an

注：预览按 skill id 缓存（Cache-Control: public, max-age=300）；前端在预览面板里给 iframe 加了 sandbox="allow-scripts allow-same-origin"（宿主侧实现，本模板不可控）。

frontmatter 的字段被逐项映射成选择器元数据（featured 决定全量排序、recommended 进顶部「★ 推荐」组、example_* 生成示例卡文案），并决定它在分类/场景过滤里出现在哪里。

next/src/lib/templates/loader.ts

if (typeof fm.featured === "number") meta.featured = fm.featured;

注：fmToMeta 同时把 category/scenario/aspectHint/tags 直接搬到 SkillMeta；example 块在 example_id 或 example.{md,html} 存在时生成（id/name/format/tagline/desc + 可选 source）。这些字段只影响展示与排序，不影响生成行为。

该模板的生成能力全部由它自己的正文兑现：sprite-animation/SKILL.md 只描述版面、配色、字体与内容纪律，没有一句让 agent 去跑工具、取接口或读外部数据。