1仕組みと動作原理
本skillは実行可能プログラムではなく、プレーンテキストのプロンプトテンプレートです。ホストが正規表現でSKILL.mdのYAML frontmatterをパースし、本文bodyをプロンプトの主体として読み込みます。
next/src/lib/templates/loader.ts
const { fm, body } = parseFrontmatter(raw);
リポジトリのディレクトリ規約に関する自己説明：『SKILL.md — frontmatter (id, scenario, tags, …) + prompt body』、および『Adding a template = adding a folder. No TS code change required』——テンプレートはディレクトリ規約によって登録されます。全リポジトリのTS/TSX内を検索しても"motion-frames"のハードコードされた参照は見つからず、本テンプレートに対するコード上の個別分岐処理は一切ありません。
テンプレート本文は単独で実行されるのではなく、最終プロンプトの「テンプレートセクション」に組み込まれます：共有デザイン指示 ＋ 本テンプレート本文 ＋ ユーザーコンテンツ。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
shared.tsのassemblePromptの自己説明：『Wrap a per-template instruction body with the shared design directives and the user content tail.』。リクエストはまずconst skill = loadSkill(templateId);経由で本ディレクトリのbodyを取得してから組み立てられます。
グローバルの「コンテンツ駆動型数量」ルールがテンプレート内のあらゆる数値を上書きします：テンプレートはレイアウト/スタイル/配色/コンポーネントライブラリのみを定義し、出力の長さを定義しません。
next/src/lib/templates/shared.ts
数量**完全由【用户内容】的实际长度和信息结构决定**
このルールは「最優先事項であり、テンプレート内のあらゆる数値を上書きする」と明記されており、deck系テンプレートの「6〜10枚」といった数値も「短いサンプルにおける参考下限とみなす」と明記されています。したがって、本テンプレートが提示するのは利用可能なレイアウトと制約であり、ページ数の上限ではありません。
成果物の形態はグローバルなハード制約を受けます：単一ファイルHTML、フェンスなしの純粋なHTML、先頭文字は必ず<でなければならず、ファイル書き込みは禁止されています（フロントエンドがstdoutをキャプチャします）。
next/src/lib/templates/shared.ts
不要用 markdown 代码围栏包裹, 不要任何解释性文字
同セクションには『Write / Edit / MultiEdit / Bash / Create / いかなるファイルシステムツールの使用も禁止』と明記されています——ファイルのディスク保存はホストのフロントエンドが担当し、テンプレート側でディスク書き込み動作は発生しません。
frontmatterのメタデータがセレクターの表示（中国語名/英語名/絵文字/説明/カテゴリ/シナリオ/アスペクト比/タグ/サンプルメタデータ）を制御します。
next/src/lib/templates/loader.ts
zhName: fm.zh_name ?? fm.name ?? id,
本テンプレートのメタデータ：category=video、scenario=marketing、aspect_hint=デスクトップhero、featured=6。セレクターはcategory/scenarioでグループ化され、featuredでソートされます。すべてfrontmatterによって決定され、コードの個別処理はありません。
同梱のサンプルアセットは2つの読み取り専用API経由でフロントエンドに公開されます：example.htmlはiframeにそのまま返却され、example.mdは「プレビュー」ボタンの入力コンテンツとして機能します。
next/src/app/api/templates/[id]/preview/route.ts
verbatim so it can be loaded into an
example.htmlのレスポンスヘッダーはContent-Type: text/html; charset=utf-8です。もう一つのルートはcontent: skill.exampleMd ?? ""としてサンプルテキストをクライアントに渡します。本ディレクトリにはexample.html（8402バイト）のみが存在し、example.mdはありません。
実行チェーン（ホストの振る舞いであり、本テンプレートのコードではありません）：ホストがローカルで認証済みのagent CLIをspawnし、組み立てたプロンプトをstdin経由で渡し、stdoutからHTMLをストリーミング回収します。
next/src/lib/agents/invoke.ts
child.stdin.write(opts.prompt);
子プロセスはcwd=process.cwd()（cwd: opts.cwd ?? process.cwd(),）で実行され、stdioはすべてpipeされます。プロンプトはシェルの文字列結合ではなく、stdin/--message経由で渡されます（not interpolated into a shell command）。
テンプレートはモーション効果を4つの独立して実装可能なコンポーネント（リング、球体、タイマー、視差タグ）に分解し、それぞれに実装手法（SVG+transform / 等幅フォント）を提示するため、モデルが独自に技術スタックを選ぶ必要がありません。
next/src/lib/templates/skills/motion-frames/SKILL.md
- Rotating type ring (SVG + transform)
コンポーネントの粒度はposter-heroよりも細かく、「一枚絵型」ではなく「組み立て型」のテンプレートです。
「純粋なCSSモーション、滑らかでループ可能」と「JSは任意」の2点が合わさることで強力な制約となります：デフォルトではJSを導入せず、ループはCSSアニメーションに依存し、成果物は本質的に自己完結します。
next/src/lib/templates/skills/motion-frames/SKILL.md
- 纯 CSS 动效, 流畅可循环
ppt-keynote（キーボード操作用JSが必要）とは正反対の選択です：本テンプレートは「操作を伴わないループ背景/オープニング」を対象としており、インタラクションは求められません。
2コア機能
01回転テキストリング（SVG + transform）
02メインビジュアルとしての動的な地球儀/抽象幾何学オブジェクト
03単一の等幅フォントタイマー（JSは任意）
04視差フローティングタグレイヤー
05本編クオリティのモーション規律：純粋なCSS、シームレスなループが可能
06シネマティックな色調補正 ＋ 単一ネオンのアクセントカラー
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind Play CDN（共享指令对产物的要求） |
| network | jsdelivr CDN（可选：图表/动画脚本） |
| network | Google Fonts（共享指令指定） |
| cli | 本机 coding-agent CLI（宿主检测 PATH 并 spawn） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠（ファイルパスと抜粋）
- 网络端点: 外部ネットワークアクセスの宣言：成果物側（共有デザイン指示による要求）：生成されたHTMLはブラウザ内でcdn.tailwindcss.com（Tailwind Play）およびGoogle Fを参照します
監査ノート： 。評価基準：本skillディレクトリ（SKILL.md + example.html）のみを評価対象とし、ホスト側のラッパーや成果物の外部リンクは評価に含めません。ディレクトリ内にはスクリプト、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み指示はいずれも存在せず、ディレクトリ全体のトークンスキャンでも検出ゼロです。SKILL.mdはCDN/フォント/APIを一切指定していません（Google Fontsにすら言及せず、「等幅フォント」のようなフォントファミリーの説明のみ記載）。example.htmlも自己完結しています（HTTP外部リンクなし、<script>なし）。評価を変更しない説明事項2点：①ホストラッパー（loader.ts → assemblePrompt → agents/invoke.tsによるローカルCLIのspawn；claudeの引数に--permission-mode bypassPermissionsが含まれ、envForが{...process.env}で環境変数をそのまま渡す）はホストの挙動であり、verdict.risksに記載済みです。②ホストが注入する共有デザイン指示により、成果物の<head>内でTailwind Play / Google Fontsの参照が要求されます（成果物のランタイムにおける外部リンクに該当）。
5二重目の独立検証
- [ok] skill 目录资产面（脚本 / references / 数据 / 模板） — 目录实为 2 个文件：SKILL.md 与 example.html；无 scripts/、无 references 目录、无任何可执行文件（.sh/.py/.js/.mjs/.ts 零命中）。
- [ok] 「无脚本、无网络、无凭证、无写盘」的反例搜索 — 对目录递归 token 扫描（api[_-]?key|token|secret|\.env|process\.env|child_process|fetch\(|curl |wget |npm |npx |exec\(|subprocess|writeFile|fs\.）：零命中；SKILL.md 另按 http|CDN|cdn|font|API|api|fetch|Google|script 扫描，仅命中 font-semibold / font-black 这类字重类名，无端点。
- [ok] 官方描述 vs 实际能力（有无夸大） — frontmatter description（可循环 CSS 动效组合: 旋转环、地球仪、计时器、视差标签）与正文一致：描述承诺的版式要素都能在正文找到对应条目，未见正文未支持的越界承诺。
- [ok] 外部资源/工具条目逐条回源 — external_deps 中的仓库级条目（Tailwind Play CDN / jsdelivr / Google Fonts / 本机 agent CLI）逐条回到 shared.ts 与 argv.ts 原文取证；本模板无目录级端点条目。
- [ok] 宿主执行链（供 security.reason / verdict.risks 使用，不参与判级） — prompt 经 stdin 送入被 spawn 的本机 CLI（invoke.ts），HTML 从 stdout 分流捕获；claude 参数含 --permission-mode bypassPermissions、envFor 透传 process.env；预览 iframe sandbox="allow-scripts allow-same-origin"（template-picker.tsx:544 / preview-pane.tsx:297）。
- [ok] 路径与 commit 一致性 — 工作副本 /var/ytdown/skills-portal/spy-repos/html-anything 的 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 一致）；skill.path=next/src/lib/templates/skills/motion-frames 下确有 SKILL.md，全仓无第二份同名模板。
- [ok] "CSS 动效"是否借道外部动画库 — SKILL.md 明确"纯 CSS 动效, 流畅可循环"，未要求引入 GSAP/Lottie 等库；example.html 中无 <script>、无 CDN 外链，动效由内联 CSS 实现，故不存在外部动画依赖。
- [ok] 是否真的无 JS — SKILL.md 允许"JS 可有可无"，即产物里可能含可选 JS，但那是交给模型写进产物（自包含），不是 skill 调外部脚本；skill 目录内无任何 JS 文件。
6結論
最適な用途： 動画のオープニング/トランジション、ランディングページのheroセクション、SNSアニメーションカバーなど、「一目で理解でき、操作を必要としない」モーションフレームに適しています。また、静的なheroを軽量なモーションにアップグレードする際のコンポーネント設計の再利用にも適しています。
不向きな用途： 正確なタイムライン制御やMP4へのレンダリングを必要とするエンジニアリング用途には不向きです（duration/transitionの表記がなく、動画制作ではなくWebモーションの範疇です。MP4が必要な場合はリポジトリ内のvideo-hyperframesシリーズを選択してください）。インタラクションやデータ駆動型のモーションにも不向きです。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload motion-frames.tar.gz
sha256:
Option B · Copy Guide for Agent6c0a8c77753d9758…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.