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 の上限は選択したスタイルの manifest で決定されます（SKILL.md は事前に該当スタイルの DESIGN.md、tokens.css、manifest のスロット上限を読むことを要求）。
用途に応じた2つの実装方式：オーバーレイではカード外枠および話者の顔部分の透明度を維持し、全画面を乗っ取る場合のみ不透明な背景を使用する。
.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＋レンダリング、キーフレームやトランジションの確認、最大文字数での 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 のコミット／除外リスト（プレビュー 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.
処理内容：「単一カードの再利用」と「シーン全体テンプレート」の2つのパスを明確に分離し、外部素材を必要とするテンプレートには事前確認を促すことで、レンダリング時の素材不足を防ぎます。
ライブラリの構成規約は GUIDE.md に集約：1つの style につき1つのフォルダ、1つを完全に仕上げてから次を開始し、_blueprint は複製用スケルトンであり直接編集対象ではないことを明確化。
style-library/GUIDE.md
One style = one folder. We build **one style fully before starting the next**.
処理内容：「順次進行＋スケルトン複製」により、複数スタイルの並行開発による不整合を抑制。同ファイルでは3部構成の ID 体系（NN-slug フォルダ、slug を style id とし、card id は固定）および tier 階層の説明も提供されています。
2コア機能
01スタイルの選定とカード検索（3部構成 ID 命名に基づき、style/tier/purpose で registry.json をフィルタリング）
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 のディレクトリ自体には1ファイルの 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 スキルおよび 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.