1仕組みと動作原理

本skillは実行可能プログラムではなく、html-anythingの「テンプレート」です。SKILL.md + example.html[/example.md]で構成されるディレクトリであり、実行時にloader.tsによってディスクから読み込まれます。テンプレートの追加はディレクトリの追加のみで完結し、TypeScriptの変更は不要です。

next/src/lib/templates/loader.ts

Adding a template = adding a folder. No TS code change required; the API

SKILLS_DIRはアプリケーションカレントディレクトリのsrc/lib/templates/skillsに固定されています。listSkills()が第1階層のサブディレクトリを走査し、isValidBundledIdでフィルタリングした上で、ディレクトリごとにSKILL.mdを読み込んでfrontmatterをパースするため、「セレクター用メタデータ」と「生成用プロンプト本文」は同一ファイルに由来します。

frontmatterはセレクターやAPI向けのメタデータ（zh_name/en_name/emoji/description/category/scenario/aspect_hint/featured/recommended/tags）であり、fmToMeta()によってSkillMetaにマッピングされます。frontmatter以降の本文のみがモデルへの仕様指示となります。

next/src/lib/templates/loader.ts

zhName: fm.zh_name ?? fm.name ?? id,

idはディレクトリ名から取得されます。exampleメタデータ（example_id/name/format/tagline/desc/source_url）はディレクトリ内にexample.md/htmlが存在する場合にのみSkillExampleMetaとして出力され、bodyは一覧APIから意図的に除外されています（コメント：「Body is excluded so we can return the entire registry in one cheap fetch」）。

生成時、本テンプレート本文はプロンプト本文として扱われます。/api/convertがassemblePrompt()を用いて「グローバルデザイン指示＋本テンプレート本文＋ユーザーコンテンツ」を1つのプロンプトに結合し、ホスト側のローカルagent CLIに渡して、HTMLをstdoutストリーミングからキャプチャします。

next/src/app/api/convert/route.ts

prompt = assemblePrompt({ body: skill.body, content, format });

同一ルートにはeditFromHtml/editFromContentによる「差分最小化編集」ブランチも存在します。このパイプラインにおいてテンプレート本文は単なる文字列であり、評価や実行は行われません。

テンプレート本文の前にはグローバル共通指示（SHARED_DESIGN_DIRECTIVES）が付与され、技術およびコンテンツの規律がすべてのテンプレートに一律適用されます。サンプルHTMLに見られるCDNやWebフォントの外部リンクはここに由来します（ホストシェルによる注入であり、テンプレート自体の要求ではありません）。

next/src/lib/templates/shared.ts

通过 CDN 引入 Tailwind v3 Play (https://cdn.tailwindcss.com) 与所需的 Google Fonts。

テンプレート本文はスタイル、レイアウト、コンポーネントのみを担当し、これらの必須要件を重複して記述しません。判定はテンプレート自身のディレクトリのみを対象とし、このエンドポイントはホストシェルの挙動としてsecurity.reasonに記載されています。

生成物はstdoutテキストとして返却されます。グローバル指示によりエージェントによるファイルシステム操作は明示的に禁止されており、ディスクへの保存はフロントエンドが担当します。そのため、テンプレートディレクトリにはスクリプトもディスク書き込み能力も存在しません。

next/src/lib/templates/shared.ts

**禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。

原文の補足文では「HTMLをいかなる.htmlファイルにも書き込んではならない……フロントエンドがstdoutテキストを直接キャプチャし、ファイルの保存はフロントエンドが担当する」と指示されています。成果物は最終的にフロントエンドによってタスク記録への書き込みおよびエクスポートが行われます。

example.htmlはパッケージ同梱の事前レンダリングサンプルです。/api/templates/<id>/previewはtext/htmlとしてそのままiframe（セレクター内のインラインプレビュー）に返し、/api/templates/<id>/exampleはexample.mdとexample.htmlをセットで返します。

next/src/app/api/templates/[id]/preview/route.ts

return new Response(skill.exampleHtml, {

サンプルはプレビューおよびドキュメント用途に限定され、生成プロンプトには関与しない（生成にはSKILL.md本文のみを使用する）ため、その外部リンクがテンプレート自体の機能境界に影響を与えることはありません。

本文では「アニメーション演出」が検証可能な時系列仕様として定義されています。1文字あたり80msでの順次表示、現在文字に追従するカーソルブロック、およびrevealの瞬間に発生して200ms以内に収束するchromatic ghostなどです。

next/src/lib/templates/skills/vfx-text-cursor/SKILL.md

- 逐字揭示, 每个字符 80ms 间隔; 当前字符后面跟着一个 cursor `▍` (或细 vertical bar)。

これは「動画オープニング」系テンプレートの中核メカニズムです。文字単位のタイミング設計によって1つの名言を編集可能なオープニングフレームに仕立てます。同セクション内にはtext-shadow: 2px 0 #ff3b6f, -2px 0 #00d4ffという具体的な色収差レシピも記載されています。

光斑や光線はビットマップではなくCSSで合成されます。細長い矩形のlinear-gradientとmix-blend-mode: screenを組み合わせ、不規則な角度でランダムに3〜5本配置されます。

next/src/lib/templates/skills/vfx-text-cursor/SKILL.md

- 在打字位置附近随机生成 3-5 道**定向光斑** (light leak)

本文では「`linear-gradient(45deg, transparent, accent20, transparent)`の細長い矩形 + `mix-blend-mode: screen`を使用」と指定されており、サンプルの実装では3本の.ray要素（.ray-1/2/3）による静的な近似表現がとられています。

「避けるべきこと」を明確にしたネガティブ制約：ホットピンク＋シアンの2色による色収差のみを使用し、R/G/Bのフルカラーレインボーを禁止し、セリフフォントを厳格に禁止します。

next/src/lib/templates/skills/vfx-text-cursor/SKILL.md

- **绝不**: 多色彩虹 chromatic (只用 1 个 hot pink + cyan 这种二元像散, 不要 R/G/B 全色)。

この制約により「色収差」を識別性の高い2色に限定し、チープな虹色の縁取りになるのを防いでいます。これは単なる美的形容ではなく、テンプレートの品質規律です。

アクセシビリティと素材の真正性が本文に明記されています。アニメーションはprefers-reduced-motionで無効化（すべてのテキストを即時表示）できなければならず、またユーザーから提供された名言を必ず使用し、捏造してはなりません。

next/src/lib/templates/skills/vfx-text-cursor/SKILL.md

- 必须用用户提供的金句; 不要捏造。

同セクションの前の項目では「アニメーションは`@keyframes` + JSタイマー（`setTimeout`による1文字ずつの表示）を用い、`prefers-reduced-motion`で無効化可能であること」が求められています。

サンプルHTMLは「静止した1フレーム」のみを再現しています。カーソルブロックはCSSのblinkアニメーションで点滅し、chromaticはテキスト全体に対する静的なtext-shadowであり、3本の.rayは固定角度です。順次表示を行うJSタイマー、shimmer、prefers-reduced-motionへのフォールバックは実装されていません。

next/src/lib/templates/skills/vfx-text-cursor/example.html

animation: blink 1s steps(1) infinite;

サンプルに対してgrepを実行してもsetTimeout、prefers-reduced-motion、shimmerは見当たりません。すなわち、本文で宣言されている「1文字ずつの順次表示／0.5sのshimmer sweep」は同梱サンプル内には実装されていません（サンプルの位置付けはオープニングフレームの静止画プレビューです）。

CLI側にはキーワードによる直接マッチング経路が存在します。skills-matcher.tsがユーザーコンテンツ内のキーワードを本テンプレートidに直接マッピングし、一致した場合はconfidence＝ヒット数×2+3を付与します。しきい値3に達するとローカルルールが適用され、モデルによるテンプレート選択はスキップされます。

cli/src/skills-matcher.ts

[["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"],

VFX、カーソル、chromaticなどの単語はvfx-text-cursorに直接マッチします。videoシナリオのシグナル用には別のキーワードテーブル（動画、フレーム、hyperframes、remotion、VFX、片頭）が用意されています。

CLIのフォールバックマッチングで使用されるしきい値定数：AIによる要約マッチングを有効にするにはコンテンツ長が60文字を超えている必要があり、強シグナルのしきい値は3です。

cli/src/skills-matcher.ts

const MIN_CONTENT_LENGTH_FOR_AI = 60;

さらにSCENARIO_SIGNALSがテンプレートのscenarioに基づいてキーワードに重み付けを行い、fallbackMatchがtags/zhName/descriptionを用いてスコアリングします。両レイヤーが失敗した場合にのみ、エージェントを呼び出して要約マッチングを実行します。

ホストシェルはsandbox="allow-scripts allow-same-origin"を指定したiframeを使用してサンプルや成果物をレンダリングします（スクリプトおよび同一オリジンアクセスを許可）。これは製品シェルの設計判断であり、リスクとして記載されますが、本skillの判定には影響しません。

next/src/components/template-picker.tsx

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

preview-pane.tsx / deck-viewer.tsxも同様の設計です。サンプルHTMLのインラインJSはブラウザでのプレビュー時にのみ実行され、skill自体は一切スクリプトを実行しません。

2コア機能

011920×1080 動画オープニングフレーム（ダーク背景 #06070a + ビネット + ノイズ）

021文字ずつの順次表示タイミング（80ms/文字 + カーソル追従）

03色収差（chromatic）ゴースト効果（revealの瞬間 → 200ms以内に収束）

04指向性ライトフレア／ライトリーク（screenブレンド、3〜5本）

05完了時のshimmer sweep（0.5秒の光の帯が横断）

06メタデータレイヤー：上部キャプション + 出典サブタイトル + 右下タイムコード

07reduced-motionフォールバック（全テキストを即時表示）

3外部依存関係

Kind	Dependency / Endpoint
network	Tailwind CDN（示例 HTML 引用）
network	Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）
network	示例来源标注（frontmatter 元数据，非运行依赖）

4推奨統制措置と判定根拠

安全運用のための推奨統制措置

Agent 向け

自動ロード可能

管理者向け

ソースとバージョンの記録

判定根拠（ファイルパスと抜粋）

SKILL.md: プロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部への副作用は一切なし

監査ノート： 判定対象＝本skillディレクトリ（next/src/lib/templates/skills/vfx-text-cursor/）。ファイルごとの検証結果：スクリプトなし、クレデンシャル読み取りなし、ディスク書き込みなし。ディレクトリ内に登場するエンドポイントはTailwind CDN（サンプルHTMLからの参照）、Google Fonts（Inter Tight / Noto Sans SC / JetBrains Mono）、サンプルの出典表記（frontmatterメタデータであり実行時依存ではない）のみであり、すべて成果物サンプルであるexample.html内に閉じています。SKILL.md本文はレイアウト、スタイル、フォントファミリー名を指定するのみで、実行時の外部APIは一切指定されていないため、純粋な指示テンプレート＝greenと判定します。ホスト側の補足（格付け対象外）：html-anything製品シェルはassemblePrompt()を介して本文をプロンプトに組み込み、ローカルagent CLIをspawnします。また、cdn.tailwindcss.comとGoogle Fontsの要件を注入し（next/src/lib/templates/shared.ts）、プレビュー用iframeにはsandbox="allow-scripts allow-same-origin"を使用します（next/src/components/template-picker.tsx）。

5二重目の独立検証

[ok] skill 目录文件清单 — find 得 SKILL.md + example.html + example.md，无 scripts/references。
[ok] 外部端点只出现在示例/元数据 — SKILL.md 正文无 URL；两个 URL 分别位于 frontmatter example_source_url（元数据）与 example.html 的 Tailwind CDN / Google Fonts link。
[discrepancy] 逐字揭示/计时器是否在示例中实现 — SKILL.md 写明「@keyframes + JS 计时器 (setTimeout 逐字)」与 0.5s shimmer、reduced-motion 降级；example.html 只有 CSS blink 光标 + 静态 text-shadow，grep 无 setTimeout / prefers-reduced-motion / shimmer，属示例未实现正文声明的动效（示例是静帧预览）。
[discrepancy] 「不要外链字体以外的资源」是否被示例遵守 — 正文禁非字体外链，但 example.html 引入 https://cdn.tailwindcss.com 脚本；该 Tailwind 要求实为宿主全局指令（shared.ts）强制，说明模板正文与宿主壳在此点冲突。
[discrepancy] chromatic 只在 reveal 瞬间 vs 示例静态 — 正文要求像散在 reveal 瞬间出现并 200ms 内收敛；示例 .chroma 是整段 h1 的静态 text-shadow。
[ok] CLI 匹配器路由 — cli/src/skills-matcher.ts 存在 [["VFX", "特效", "光标", "cursor", "chromatic", "reveal"], "vfx-text-cursor"] 行。
[ok] 判级 green 自证 — 目录零脚本文件、零凭证、零写盘；正文未点名运行时接口，端点仅见示例与 frontmatter 元数据 → green。
[ok] official_desc 逐字 — meta.official_desc 取自 frontmatter description 原文。

6結論

「色収差」を実行可能なレシピ化：80msの文字間隔、200msの収束時間、text-shadowの具体的なカラーコードを提示し、モデルの推測を排除

ネガティブ制約による品質劣化防止：単一アクセントによる2色色収差＋セリフ体禁止により、安易な虹色枠線などの失敗パターンを排除

ビルトインのアクセシビリティ：reduced-motion時は「全文字即時表示」へフォールバックし、ユーザー原文の改変や捏造を禁止

出所トレーサビリティ：frontmatterに着想元のリンクとラベルを明記し、サンプルのフッターにカラーパレット戦略を明示

最適な用途： 動画のオープニングやチャプタータイトルフレーム、発表会のオープニング名言、一言を強烈に印象付けたいheroフレームに最適。Remotionやhyperframesでの動画合成に向けたビジュアルカンプとしても有用です。

不向きな用途： 大量の情報や構造化データを掲載するページには不向き。長文の組版を必要とするシーンには不向き（単一の文＋メタデータレイヤーで1つの完結したレイアウト）。レンダリング済みのmp4を直接出力することを期待するワークフローには不向き（HTMLフレームのみを出力）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload vfx-text-cursor.tar.gz

sha256: 315c18b1b92b614f…

Option B · Copy Guide for Agent

install.json

Agent はこの JSON ガイドから自動的にダウンロードして検証します。

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.