Content & Media Creation · nateherkai/hyperframes-student-kit
style-library
Select, customize, or extend the project's reusable motion-graphics card library and style templates. Use for choosing a visual style, adding a card, building a new style pack, or reusing a template in a HyperFrames video.
L4 High-Privilege · Graded auth & full auditV1 Commit-PinnedExecute CommandNetwork AccessWrite FileDual-pass Audit
Control levels describe skill capabilities and suggested control measures; they do not represent quality or safety certifications, nor do they dictate usability. Usage decisions rest entirely with users and administrators. Different agent hosts apply varying constraints; do not assume hosts provide automatic protection. Third-party skill copyrights belong to their original authors. Use at your own risk.
1How It Works & Mechanism
Filter first before opening cards: Read GUIDE.md (contract) → Read registry.json (generated master index) → Filter by style/tier/purpose, and only then open specific cards.
.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.
What is happening here: Uses the 247.7KB registry.json as a 'query-before-fetch' entry point to avoid loading the entire library into context; filtering dimensions are defined by the ID scheme in GUIDE.md (card id = `<style>.<tier>.<purpose>[.<variant>]`, stable and self-describing).
Copying cards must include relative dependencies (CSS, fonts, GSAP), localize them, and then fill named slots; otherwise, you do not have a complete asset.
.claude/skills/style-library/SKILL.md
Copying a card without its relative dependencies does not produce a complete asset.
What is happening here: Turns the common pitfall of 'just copying the HTML' into a hard rule; slot limits are determined by the manifest of the selected style (SKILL.md requires reading that style's DESIGN.md, tokens.css, and manifest slot limits first).
Two implementation approaches based on purpose: Overlays must maintain transparency outside the card and over the speaker's face; only use opaque backgrounds when taking over the entire screen.
.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.
What is happening here: Rendering constraints matching the tier architecture (tier1 takeover cards / tier2 retaining speaker visibility), directly dictating whether the speaker is obscured during compositing.
Explicitly treat the library as draft-quality assets and require linting + rendering at real project resolution, inspecting hero frames and transitions, and validating slot text with maximum lengths.
.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.
What is happening here: Notes upfront that 'cards in the library have not undergone final QA' to prevent users from mistaking them for production-ready assets; aligns with the commit/ignore lists in GUIDE.md (preview MP4s are regenerable assets).
Fixed extension workflow: Scaffold a new style directory using the generator, complete tokens/manifest/cards, and rerun the index generator; keep project-specific copy within the project, leaving library cards generic.
.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.
What is happening here: Because registry.json is a generated artifact, new cards/styles must be rebuilt via build-registry.mjs rather than modifying the index manually—mechanically preventing drift between the index and directories.
Full-scene startups use a separate template workflow: style-templates/ provides full-scene starting points; media templates may require users to supply assets/source.mp4, so check its README before rendering.
.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.
What is happening here: Separates the 'single card reuse' and 'full-scene template' paths and adds prerequisite checks for templates needing external media, avoiding missing-asset errors at render time.
Library organizational contracts reside in GUIDE.md: one folder per style, complete one entirely before starting the next, and clarify that _blueprint is a scaffolding template rather than an in-place edit target.
style-library/GUIDE.md
One style = one folder. We build **one style fully before starting the next**.
What is happening here: Uses 'sequential progression + blueprint cloning' to mitigate inconsistencies from parallel style development; the same document provides the three-part ID scheme (NN-slug folders, slug as style id, stable card id) and tier explanations.
2Core Capabilities
01Style selection and card discovery (filtering registry.json by style/tier/purpose, based on three-part ID naming)
02Card reuse implementation: copying into project compositions/, localizing CSS/fonts/GSAP, filling data-slot, and wiring per HyperFrames
03Tier-based usage: tier1 full-screen takeover cards (arguments/big numbers/chapter markers/quotes) and tier2 accompaniment cards (tags/lists/formulas/lower-thirds)
04Full-scene template reuse (style-templates/, including prerequisite asset checks for media templates)
05Adding style packs (scaffolding via new-style.mjs → completing tokens/manifest/cards) and index rebuilding (running build-registry.mjs after manifest changes)
06Library contract and structure: style folder contents checklist (style.json / DESIGN.md / tokens.css / cards/ / preview), commit and gitignore boundaries
07Style isolation and generality discipline: cards reference style-level CSS variables rather than hardcoded values; project-specific copy stays in projects
3External Dependencies
| 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（整场模板前置条件） |
4Recommended Governance & Evidence
Suggested Controls for Safe Operation
For Agent Runtime
Graded/per-use authorization, sandbox recommended
For Administrators
Approval workflow, rollback support, full audit
Evidence & Triggers (File Paths & Excerpts)
- scripts/: Execute local scripts or commands: (No scripts inside this skill's directory)
- 网络端点: Declare external network access: Artifact-time references (no runtime outbound requests, excluded from risk rating): Cards/theme CSS reference Google Fonts, fetched by the browser or during localization
- 本地工作目录: File read/write and artifact output: Copying cards to video-projects/<slug>/compositions/ and localizing their CSS/font/GSAP dependencies
Audit Notes: This skill's directory contains only a single SKILL.md (1.6KB) consisting purely of instructions: no scripts, no network endpoints, no credential access, and no executable code; a full directory grep yields no URLs, no process.env, and no fetch calls. All local execution workflows involve local file read/write operations and local generators—copying selected cards into project compositions/, localizing CSS/fonts/GSAP, populating data-slot (writing project files), and running repository-level Node generators scripts/style-library/new-style.mjs and build-registry.mjs to rewrite style-library/registry.json. The only third-party aspect involves assets: cards/themes reference Google Fonts (licensed by their respective publishers, documented in THIRD_PARTY_NOTICES.md), which are artifact-time references loaded in-browser or during localization without runtime outbound calls, and thus do not trigger an escalation.
5Second-Pass Verification
- [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 克隆而非就地改；索引重写是显式步骤，不存在「手改索引导致漂移」的鼓励。
6Verdict & Scenarios
Best for: Suitable for creators already using this instructional package to produce HyperFrames videos who need to 'select a visual style → fetch reusable cards/full-scene templates': especially ideal for batch-producing graphics split by tiers (takeover vs. accompaniment cards) or extending custom style libraries (scaffold with new-style → populate tokens/manifest → rebuild registry).
Not for: Not suitable for: (1) Users expecting production-ready cards out of the box—the library consists of draft resources requiring linting + rendering at target resolution and testing with maximum slot copy; (2) Projects not using HyperFrames (card wiring relies on the hyperframes skill and GSAP contracts); (3) Commercial use cases requiring strict third-party asset provenance and licensing guarantees (Google Fonts/sample media rights belong to their respective publishers).
Install Agent-Ready
① Verified Mirror 2026-09-28
Option A · Direct DownloadDownload style-library.tar.gz
sha256:
Option B · Copy Guide for Agent2463b10b86691d38…Agents automatically download and verify mirrors from this JSON guide.
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 0d30152a82.