1实现原理 · 为什么它能做到
先过滤再开卡片:读 GUIDE.md(契约)→ 读 registry.json(生成的主索引)→ 按 style/tier/purpose 过滤,最后才打开具体卡片。
.claude/skills/style-library/SKILL.md
Read `style-library/GUIDE.md`, then `style-library/registry.json`. Filter by style, tier, and purpose before opening individual cards.
这里在做什么:把 247.7KB 的 registry.json 当「先查再取」的入口,避免把整个库读进上下文;过滤维度由 GUIDE.md 的 ID 方案定义(card id = `<style>.<tier>.<purpose>[.<variant>]`,稳定且自描述)。
复制卡片必须连带相对依赖(CSS、字体、GSAP)并本地化、再填充命名 slot,否则拿到的不是完整资产。
.claude/skills/style-library/SKILL.md
Copying a card without its relative dependencies does not produce a complete asset.
这里在做什么:把「复制 HTML 就完事」这个常见坑写成硬规则;slot 上限由选中 style 的 manifest 决定(SKILL.md 要求先读该 style 的 DESIGN.md、tokens.css 与 manifest 槽位上限)。
按用途分两种落地方式:叠加层要保持卡片外与说话人脸部的透明;接管整屏才用不透明背景。
.claude/skills/style-library/SKILL.md
For an overlay, preserve transparency outside the card and the speaker's face. For a takeover, use an opaque background.
这里在做什么:与 tier 分层(tier1 接管卡 / tier2 保留说话人可见)匹配的渲染约束,直接决定合成时会不会挡住人。
明确把库定性为草稿资源,并要求在真实项目分辨率下 lint+渲染、检查 hero 帧与转场、用最大长度验 slot 文案。
.claude/skills/style-library/SKILL.md
The catalog contains draft resources, not a promise that every card has passed rendered QA. Lint and render the selected card at actual project resolution, inspect its hero frame and transition, and check slot text at its maximum length.
这里在做什么:把「库里的卡未经过成品 QA」写进入口说明,避免使用者误当成品级资产;与 GUIDE.md 的提交/忽略清单(preview MP4 属可重生资产)一致。
扩展路径固定:用生成器新建 style 目录,补齐 tokens/manifest/cards 后重跑索引生成器;项目专属文案留在项目里,库内卡片保持通用。
.claude/skills/style-library/SKILL.md
When adding a style, use `node scripts/style-library/new-style.mjs 03 my-style "My Style"`, then complete its design tokens, manifest, and cards. Run `node scripts/style-library/build-registry.mjs` after manifest changes.
这里在做什么:registry.json 是生成物,所以新卡/新风格必须经 build-registry.mjs 重建而不是手改索引——从机制上防止索引与目录漂移。
整场起步另走模板路径:style-templates/ 提供整场起点,媒体类模板可能需要用户自备 assets/source.mp4,渲染前先看其 README。
.claude/skills/style-library/SKILL.md
Use `style-templates/` for a whole-scene starting point. A media template may require the student's own `assets/source.mp4`; check its README before rendering.
这里在做什么:把「单卡复用」与「整场模板」两条路分开,并对需要外部素材的模板给出前置检查,避免渲染时才发现缺素材。
库的组织契约在 GUIDE.md:一个 style 一个文件夹、先完整做完一个再开下一个,并明确 _blueprint 是复制骨架而非就地编辑对象。
style-library/GUIDE.md
One style = one folder. We build **one style fully before starting the next**.
这里在做什么:用「顺序推进 + 骨架克隆」降低多风格并行带来的不一致;同文件另给三段式 ID 方案(NN-slug 文件夹、slug 作 style id、card id 稳定)与 tier 分层说明。
2核心能力
01风格选择与卡片检索(按 style/tier/purpose 过滤 registry.json,基于三段式 ID 命名)
02卡片复用落地:复制进项目 compositions/、本地化 CSS/字体/GSAP、填 data-slot、按 HyperFrames 接线
03tier 分层使用:tier1 全屏接管卡(论点/大数字/章节标记/引言)与 tier2 陪伴卡(标签/列表/公式/下三分之一)
04整场模板复用(style-templates/,含媒体模板的前置素材检查)
05新增风格包(new-style.mjs 生成骨架 → 补 tokens/manifest/cards)与索引重建(manifest 变更后跑 build-registry.mjs)
06库的契约与结构:style 文件夹内容清单(style.json / DESIGN.md / tokens.css / cards/ / preview)、提交与 gitignore 边界
07风格隔离与通用性纪律:卡片引用 style 级 CSS 变量而非硬编码值;项目专属文案留在项目里
3外部依赖
| Kind | Dependency / Endpoint |
|---|---|
| cli | Node 生成器(仓库级,非本 skill 目录内):scripts/style-library/new-style.mjs、build-registry.mjs、gen-kallaway-style.mjs |
| cli | HyperFrames CLI(lint / 渲染,验证所选卡片与槽位文案) |
| package | 卡片/主题引用的第三方资产:GSAP(npm 安装,许可随包)与 Google Fonts(字体许可随发布方;本地化时需保留许可) |
| package | 兄弟资源:hyperframes skill(卡片接线)与 style-templates/README.md(整场模板前置条件) |
4管控建议与判定依据
建议配套管控措施
面向 Agent
分级或逐次授权,建议在沙箱运行
面向管理者
审批流程、可回滚、全程审计
判定依据(文件路径与关键语句摘要)
- scripts/: 执行本地脚本或命令: (本 skill 目录内无脚本)
- 网络端点: 声明外部网络访问: 产物期引用(执行期不外发,不计入判级):卡片/主题 CSS 引用 Google Fonts,由浏览器端或本地化时拉取
- 本地工作目录: 文件读写与工件输出: 复制卡片到 video-projects/<slug>/compositions/ 并本地化其 CSS/字体/GSAP 依赖
审计说明: 。本 skill 自身目录只有一份 SKILL.md(1.6KB),是纯指令:没有脚本、没有网络端点、没有凭证读取、没有可执行代码;全目录 grep 无 URL、无 process.env、无 fetch。其工作流落到本机的部分都是本地读写与本地生成器——把选中的卡片复制进项目 compositions/、本地化 CSS/字体/GSAP、填 data-slot(写项目文件),以及运行仓库级 Node 生成器 scripts/style-library/new-style.mjs 与 build-registry.mjs 重写 style-library/registry.json。唯一涉及第三方的部分是资产层:卡片/主题引用 Google Fonts(字体许可随发布方,THIRD_PARTY_NOTICES.md 有声明),属「产物期引用」,由浏览器端或本地化时拉取,不构成执行期外发,故不因此升档。
5第二遍独立确认
- [ok] SKILL.md 是否真的只有指令、没有夹带脚本或端点 — 目录仅 SKILL.md;全文无 http、无 fetch、无 process.env;唯一的命令是本地 node 生成器与 HyperFrames 验证命令。
- [ok] 指名的生成器与库路径是否真实存在(避免文档指向空气) — style-library/{GUIDE.md,registry.json,01-vox-explainer,02-kallaway,_blueprint}、style-templates/{README.md,left-glass-popout,dark-graph-paper-template}、scripts/style-library/{new-style.mjs,build-registry.mjs,gen-kallaway-style.mjs} 均在工作副本内可定位。
- [ok] 「目录是草稿资源」这一质量声明是否与库内实际状态相符(有没有夸大) — GUIDE.md 写明 Committed 与 Gitignored 的分界(preview MP4 循环不入库、可由卡片重生),SKILL.md 也明说卡未保证过渲染 QA;两者一致,属诚实标注而非夸大。
- [unlocatable] 卡片是否含硬编码凭证或外部跟踪(供应链面) — 本次只读侦查未逐张打开 style-library/cards/ 下全部卡片 HTML(registry.json 247.7KB,卡数众多)。已确认的第三方面是 Google Fonts 引用(THIRD_PARTY_NOTICES.md 声明);「每张卡是否只用 tokens.css 变量而无外部脚本」需逐卡审计,本报告不据此下结论。
- [ok] 新增风格流程会不会破坏既有索引 — SKILL.md 要求 manifest 变更后跑 build-registry.mjs,且 GUIDE.md 要求从 _blueprint 克隆而非就地改;索引重写是显式步骤,不存在「手改索引导致漂移」的鼓励。
6结论
适合: 适合已在用该教学包做 HyperFrames 视频、需要「选一个视觉风格 → 取可复用卡片/整场模板」的人:尤其适合按 tier 分层批量产出图形(接管卡 vs 陪伴卡),或想扩展自有风格库(new-style 起骨架 → 补 token/manifest → 重建 registry)的制作者。
不适合: 不适合:① 期望「卡片即成品、直接可用」的用户——库是草稿资源,仍需在真实分辨率下 lint+渲染并用最大 slot 文案自检;② 不使用 HyperFrames 的工程(卡片接线依赖 hyperframes skill 与 GSAP 契约);③ 需要严格第三方资产溯源与许可保证的商用场景(Google Fonts/示例媒体的权利归各自发布方)。
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload style-library.tar.gz
sha256:
Option B · Copy Guide for Agent2463b10b86691d38…agent 读 JSON 指南后会自动从本站下载安装,无需更多说明。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.