Name: frame-liquid-bg-hero
Author: nexu-io/html-anything

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

这个 skill 不是可执行程序，而是注入给本机 coding-agent CLI 的一段提示词：宿主取 SKILL.md 正文，前面压一段全站共享设计指令、后面接用户内容，拼成一条 prompt 交给已登录的 agent，再把 agent 的 stdout 当 HTML 取回。

next/src/lib/templates/shared.ts

【输入格式】: ${opts.format} 【用户内容】: ${opts.content}

注：拼装模板 = 共享指令 → skill 正文 → 输入格式 → 用户内容；web 端 /api/convert 走同一函数：prompt = assemblePrompt({ body: skill.body, content, format });

共享指令层（不属于任何单个 skill，但每个模板都被它压着）把输出钉成『自包含单文件 HTML』，并明令禁止 agent 使用 Write/Edit/Bash 等文件系统工具，HTML 直接以对话正文流式输出。

next/src/lib/templates/shared.ts

- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。

注：这是本批 skill 能力边界的来源：产出物只是文本，落盘与渲染由宿主前端负责；该禁令是 prompt 软约束，不是沙箱硬隔离。

SKILL.md 之外还有一条『内容驱动数量』覆盖规则：模板里写的任何页数/帧数/卡片数一律视为参考下限，实际数量由用户内容决定——防止 agent 用模板数字压缩用户内容。

next/src/lib/templates/shared.ts

- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。

注：对 frame-* 单帧模板尤其关键：它把模板里的版面描述定性为『可复用版面池』而非产量上限。

加载约定是『一个 skill = 一个文件夹』：SKILL.md（YAML frontmatter 供选择器 + 正文即模板 prompt），可选 example.md（样本输入）与 example.html（可直接打开的预览样张）；新增模板只需加目录，不改 TS 代码。

next/src/lib/templates/loader.ts

* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker

注：loader 的 loadSkillFromDir 只读这三类文件，没有其它资产装载通道——第二遍据此核对本 skill 的资产可达性。

选择链路（CLI 侧）是三级漏斗：关键词强信号（每命中 1 词 2 分，阈值 3）→ 退化为 tags/scenario 打分 → 仍无把握就把用户内容前 800 字交给本地 agent 做一句话分类。

cli/src/skills-matcher.ts

const CONFIDENCE_THRESHOLD = 3;

注：AI 兜底的 prompt 原文：const prompt = `请用一句话（不超过15个字）描述以下内容最像什么类型的文档，只需回答类型名称：

预览链路独立于生成：/api/templates/<id>/preview 把 example.html 原样以 text/html 返回给 iframe；前端 iframe 用 sandbox="allow-scripts allow-same-origin"。

next/src/components/preview-pane.tsx

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

注：路由注释：* Returns the skill's `example.html` verbatim so it can be loaded into an（宿主侧取舍：allow-scripts + allow-same-origin 组合下，预览页脚本可自行摘掉 sandbox）。

流体背景给三级实现路径并默认最稳的一级：CSS 多层 radial-gradient 错位呼吸（3-5 个大椭圆、@keyframes 平移+scale+hue-rotate、8-14s 周期错峰、mix-blend-mode screen/overlay、顶层 backdrop-filter blur(80px)）。