1仕組みと動作原理
本テンプレートは「フォルダ=テンプレート」構造における純粋なデータです。SKILL.md はセレクター用の YAML frontmatter と agent 向けのレイアウト指示本文で構成され、リポジトリはテンプレート個別のコードを持たず、テンプレートの追加はフォルダの追加のみで完結します。
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
実行時、ホストが本テンプレートの本文を共通デザイン指示とユーザーコンテンツの間に挟み込んで1つのプロンプトを構築します。テンプレートの「知能」はこの自然言語の中にのみ存在し、実行可能コードは含まれません。
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
ホストの /api/convert は本テンプレートを読み込んだ後、これらのテキストをローカルでログイン済みの coding-agent CLI に渡し、stdout のみを HTML としてストリーミング取得します。テンプレート自身はネットワーク通信を行わず、認証情報を読み取らず、ファイル書き込みもしません。
prompt = assemblePrompt({ body: skill.body, content, format });
テンプレートに付属する example.html は「事前レンダリング済みサンプル」であり、プレビューAPIからそのまま返されてセレクターやギャラリーの iframe に読み込まれます。テンプレートカードのプレビュー表示を決定するものであり、コンテンツ生成には関与しません。
Returns the skill's `example.html` verbatim so it can be loaded into an
frontmatter の各フィールドはセレクターのメタデータにマッピングされ(featured は全体ソート、recommended は上部「★ おすすめ」グループへの登録、example_* はサンプルカードの文面生成を決定)、カテゴリや利用シーンのフィルタリングでの表示位置を制御します。
if (typeof fm.featured === "number") meta.featured = fm.featured;
本テンプレートの生成能力はすべて自身の本文によって実現されます。social-reddit-card/SKILL.md はレイアウト、配色、フォント、コンテンツ規律のみを記述しており、agent にツール実行、API呼び出し、外部データの読み取りを促す記述は一切ありません。
【模板: Reddit 帖子卡】
ストーリー、質問、ジョークを Reddit 投稿カードとしてレンダリングし、動画オーバーレイやSNS共有に利用することを目的としており、hyperframes の reddit-post から着想を得た旨が明記されています。
【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。
カード構造は左側の投票レール(幅 40-56px)によって定義され、これが Reddit の視覚的アイデンティティの中核を成しています。
- 左侧 **vote rail** (40-56px 宽):
投票数のカラーはプラス=オレンジ、マイナス=青、ゼロ=グレーの3段階カラースケールで規定され、大きな数字は 12.3k 形式へのフォーマットが求められます。
- 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用 `12.3k` 格式。
コンテンツ規律:ユーザーから提供されたコンテンツを必ず使用すること。妥当なサブレディット名、ユーザー名、投票数のみ自動生成が許可されます。
- 必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。
アセット制約:外部画像リンクは厳禁。画像のプレースホルダーはすべて CSS グラデーション+説明文で表現します。
- 严禁外链图片; 图片占位用 CSS 渐变 + 描述。
サンプル成果物は、ダークモード + 12.3k upvotes + 1.2k comments + r/programming 配色を実証しています。
<span class="font-bold text-[15px]" style="color:#ff4500">12.3k</span>
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind CDN(仅出现在产物示例 example.html,运行时不要求) |
| network | Google Fonts(仅出现在产物示例 example.html) |
| network | 灵感出处标注(frontmatter example_source_url,非运行时调用) |
| cli | 本地 coding-agent CLI(宿主提供,模板自身不调用) |
4推奨統制措置と判定根拠
- 网络端点: 外部ネットワークアクセスの宣言: cdn.tailwindcss.com(example.html の <script src>。セレクターのプレビューやサンプルのローカル表示時にブラウザからリクエスト)
5二重目の独立検証
- [ok] skill 目录的脚本 / 网络 / 凭证 / 写盘面 — 目录仅 SKILL.md / example.html / example.md 3 个文件,无 scripts/references/数据目录;token 扫描(curl / wget / fetch / exec / spawn / process.env / API_KEY / token / secret / write / save / delete)在该目录的 SKILL.md 中零命中;无自带可执行脚本。
- [ok] 运行时链路复核 — 重读 loader.ts / shared.ts / app/api/convert/route.ts / app/api/templates/[id]/preview/route.ts:模板正文只作为 prompt body 被 assemblePrompt 拼装,宿主 spawn 本地 CLI 并捕获 stdout;模板不参与任何执行。
- [ok] commit 与元数据 — 工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699(=任务表 pin 的 full 40 位);GitHub API nexu-io/html-anything:stars 8827、license spdx Apache-2.0、pushed_at 2026-09-15T03:36:24Z(与本地 HEAD 提交时间 2026-09-15 11:36:24 +0800 一致)。
- [discrepancy] README 与源码的 frontmatter schema 漂移(仓库级) — README 第 213 / 217 / 468 行称模板 frontmatter 必须含 mode · scenario · surface · preview · design_system;但在 next/src/lib/templates/skills/ 下 '^mode:'、'^surface:'、'^design_system:' 全部零命中,实际字段是 category / scenario / aspect_hint / featured / recommended + example_*(loader.ts 的 SkillFrontmatter)。文档滞后于代码,不影响本模板运行,但照 README 新写模板会踩空。
- [ok] frontmatter 元数据映射 — loader.ts fmToMeta 逐字段映射 zhName / enName / emoji / description / category / scenario / aspectHint / tags + featured / recommended + example 卡;本模板取自 SKILL.md 的实际取值与之相符。
- [ok] example.html 与 SKILL.md 的一致性 — vote rail 三色、r/subreddit 元数据行、评论数 action row 均在示例实现(#ff4500 票数 12.3k / r/programming / 1.2k Comments);配色与正文 dark 模式给定值一致。
- [ok] 「严禁外链图片」自证 — example.html 除 Tailwind 与 Google Fonts 两个资源端点外没有任何图片 URL;票数、图标全为文本 + 内联 SVG,符合正文禁止条款。
- [ok] 端点扫描(目录内) — 3 处:cdn.tailwindcss.com 与 fonts.googleapis.com 在 example.html,hyperframes.heygen.com 仅在 frontmatter 出处标注;SKILL.md 正文与 example.md 无其它 URL。
6結論
13bf26ccd190a3b6…