デザイン&モーション · nexu-io/html-anything

social-reddit-card

リアルなReddit投稿カード+上下投票+コメント数。動画オーバーレイやストーリー共有に最適

L3 ネットワーク · ドメインとキー範囲を宣言V1 コミット固定ネットワーク通信Dual-pass Audit
Author nexu-ioGitHub nexu-io/html-anything ↗Stars 8827License Apache-2.0(仓库根 LICENSE = Apache License 2.0;GitHub API spdx_id=Apache-2.0)Commit 553ed98c28
管理レベルは Skill の能力と推奨統制措置を示すものであり、品質や安全性の認証、利用可否の判定ではありません。使用の可否はユーザーおよび管理者が決定します。Agent 環境によって制約が異なるため、自動保護を仮定しないでください。第三者製 Skill の著作権は原著作者に帰属し、利用リスクは利用者が負います。

1仕組みと動作原理

本テンプレートは「フォルダ=テンプレート」構造における純粋なデータです。SKILL.md はセレクター用の YAML frontmatter と agent 向けのレイアウト指示本文で構成され、リポジトリはテンプレート個別のコードを持たず、テンプレートの追加はフォルダの追加のみで完結します。

next/src/lib/templates/loader.ts
SKILL.md — frontmatter (id, scenario, tags, …) + prompt body
loader.ts のファイル先頭コメントにディレクトリ規約が明記されています。frontmatter はプロセス内の正規表現(YAML 依存関係なし)で解析され、本文はプロンプト本文としてそのまま抽出されます。フロントエンドには渡されません(「Body is excluded so we can return the entire registry in one cheap fetch without shipping prompt text to the browser.」)。

実行時、ホストが本テンプレートの本文を共通デザイン指示とユーザーコンテンツの間に挟み込んで1つのプロンプトを構築します。テンプレートの「知能」はこの自然言語の中にのみ存在し、実行可能コードは含まれません。

next/src/lib/templates/shared.ts
return `${SHARED_DESIGN_DIRECTIVES} ${opts.body.trim()}
assemblePrompt の戻り値は「共通デザイン指示 + テンプレート本文 + 【入力形式】+【ユーザーコンテンツ】」です。共通セクション(同一ファイル内の SHARED_DESIGN_DIRECTIVES)は、単一ファイル HTML、Tailwind/フォント CDN、コンテンツ駆動の分量制御、ファイルシステムツールの使用禁止などの厳格な要件を担当し、全テンプレート共通であり、本テンプレート固有のものではありません。

ホストの /api/convert は本テンプレートを読み込んだ後、これらのテキストをローカルでログイン済みの coding-agent CLI に渡し、stdout のみを HTML としてストリーミング取得します。テンプレート自身はネットワーク通信を行わず、認証情報を読み取らず、ファイル書き込みもしません。

next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
同一ルートはその後 invokeAgent({ … }) を呼び出して CLI(claude / codex / cursor-agent 等、ホストの PATH から検出)を起動します。これに付随する共通指示には「**Write / Edit / MultiEdit / Bash / Create / いかなるファイルシステムツールも使用禁止**」と明記されています。

テンプレートに付属する example.html は「事前レンダリング済みサンプル」であり、プレビューAPIからそのまま返されてセレクターやギャラリーの iframe に読み込まれます。テンプレートカードのプレビュー表示を決定するものであり、コンテンツ生成には関与しません。

next/src/app/api/templates/[id]/preview/route.ts
Returns the skill's `example.html` verbatim so it can be loaded into an
プレビューは skill id ごとにキャッシュされます(Cache-Control: public, max-age=300)。フロントエンドはプレビューパネルの iframe に sandbox="allow-scripts allow-same-origin" を付与しています(ホスト側の実装であり、本テンプレートからは制御不可)。

frontmatter の各フィールドはセレクターのメタデータにマッピングされ(featured は全体ソート、recommended は上部「★ おすすめ」グループへの登録、example_* はサンプルカードの文面生成を決定)、カテゴリや利用シーンのフィルタリングでの表示位置を制御します。

next/src/lib/templates/loader.ts
if (typeof fm.featured === "number") meta.featured = fm.featured;
fmToMeta は category/scenario/aspectHint/tags を SkillMeta に直接マッピングします。example ブロックは example_id または example.{md,html} が存在する場合に生成されます(id/name/format/tagline/desc + 任意の source)。これらは表示とソートにのみ影響し、生成処理には影響しません。

本テンプレートの生成能力はすべて自身の本文によって実現されます。social-reddit-card/SKILL.md はレイアウト、配色、フォント、コンテンツ規律のみを記述しており、agent にツール実行、API呼び出し、外部データの読み取りを促す記述は一切ありません。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
【模板: Reddit 帖子卡】
skill ディレクトリは計2〜3ファイル(SKILL.md + example.html[+ example.md])で構成され、scripts、references、データファイルは存在しません。example.html は本テンプレートの手動サンプル生成物です(internal_assets 参照)。

ストーリー、質問、ジョークを Reddit 投稿カードとしてレンダリングし、動画オーバーレイやSNS共有に利用することを目的としており、hyperframes の reddit-post から着想を得た旨が明記されています。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
【意图】把一段故事 / 提问 / 段子, 渲染成 Reddit 帖子卡片, 用于视频叠加、社媒故事分享。Inspired by hyperframes reddit-post。

カード構造は左側の投票レール(幅 40-56px)によって定義され、これが Reddit の視覚的アイデンティティの中核を成しています。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
- 左侧 **vote rail** (40-56px 宽):

投票数のカラーはプラス=オレンジ、マイナス=青、ゼロ=グレーの3段階カラースケールで規定され、大きな数字は 12.3k 形式へのフォーマットが求められます。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
- 票数 (Inter, 17px, weight 700, 居中, 颜色: 0 灰 / 正橙 / 负蓝); 大数字用 `12.3k` 格式。

コンテンツ規律:ユーザーから提供されたコンテンツを必ず使用すること。妥当なサブレディット名、ユーザー名、投票数のみ自動生成が許可されます。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
- 必须用用户提供的内容; 自动生成合理的 subreddit / username / 票数。

アセット制約:外部画像リンクは厳禁。画像のプレースホルダーはすべて CSS グラデーション+説明文で表現します。

next/src/lib/templates/skills/social-reddit-card/SKILL.md
- 严禁外链图片; 图片占位用 CSS 渐变 + 描述。

サンプル成果物は、ダークモード + 12.3k upvotes + 1.2k comments + r/programming 配色を実証しています。

next/src/lib/templates/skills/social-reddit-card/example.html
<span class="font-bold text-[15px]" style="color:#ff4500">12.3k</span>

2コア機能

01投票レール(▲/票数/▼、プラス橙・マイナス青・ゼロ灰の3色)
02投稿本体(サブレディット円形アイコン + r/subreddit + 投稿者/投稿時間 + タイトル + 本文/引用/画像プレースホルダー)
03下部アクション行(コメント数 / Awards / Share / ⋯)
04ライト/ダーク両モード配色(動画オーバーレイにはダークモードを推奨)
05完全インラインSVGアイコン(Snooロゴ、上下矢印、コメント吹き出し、トロフィー)、外部画像リンク禁止
06サンプル成果物:r/programming ダークカード + 12.3k upvotes / 1.2k comments

3外部依存関係

KindDependency / Endpoint
networkTailwind CDN(仅出现在产物示例 example.html,运行时不要求)
networkGoogle Fonts(仅出现在产物示例 example.html)
network灵感出处标注(frontmatter example_source_url,非运行时调用)
cli本地 coding-agent CLI(宿主提供,模板自身不调用)

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

安全運用のための推奨統制措置
Agent 向け
アクセス可能ドメインとキー範囲を宣言
管理者向け
最小権限のキー、リクエストログを保持
判定根拠(ファイルパスと抜粋)
  • 网络端点: 外部ネットワークアクセスの宣言: cdn.tailwindcss.com(example.html の <script src>。セレクターのプレビューやサンプルのローカル表示時にブラウザからリクエスト)
監査ノート: 評価対象=本 skill ディレクトリ(SKILL.md + example.html[+ example.md]):組み込みスクリプトなし、認証情報読み取りなし、ディスク書き込み指示なし、ランタイムでの外部エンドポイント要求なし——本文はレイアウト、配色、フォントファミリ名、コンテンツ規律のみを指定し、フォント名はリクエストを構成しません。ディレクトリ内に実際に現れる外部リンクはすべて「成果物サンプル」の性質であり、内訳は以下の通りです:cdn.tailwindcss.com(example.html 6行目 <script src>)、fonts.googleapis.com(example.html 7行目 <link>、IBM Plex Sans + Noto Sans SC)、hyperframes.heygen.com(frontmatter の example_source_url 出典表記のみ)。バッチ4の基準(エンドポイントが成果物サンプル/出典表記にのみ現れる場合は green)に基づき、評価ランクに影響はありません。ホスト側の動作(loader.ts のディスク読み込み、assemblePrompt によるプロンプト組み立て、agents/invoke.ts によるローカル CLI 呼び出し、プレビュー iframe の sandbox="allow-scripts allow-same-origin")は verdict.risks に記載し、ランク評価の根拠には含めません。

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結論

  • 曖昧な形容詞ではなく、具体的なカラーコード、フォントサイズ、ウェイトによってリアルさを担保
  • 完全な投票セマンティクス(上下矢印 + スコア + 3段階カラースケール)を備え、同種の「SNSカード」テンプレートにおいて独自のコンポーネントを保持
  • 明確なコンテンツ規律:ユーザー提供コンテンツの厳守、サブレディット/ユーザー名/投票数のみ自動補完を許可
  • 自己完結型の成果物:外部画像リンクを厳禁とし、アイコンはすべてインラインSVG、画像枠はCSSグラデーションで処理
  • 最小限の入力形式を示す example.md を同梱し、利用のハードルを低減
  • 最適な用途: ストーリー、質問、またはジョークをリアルな Reddit カードに仕立て、動画オーバーレイやSNS共有に活用する用途に最適。また、「投票要素」を伴う視覚言語が求められるストーリー系コンテンツ(中国語等のリライトシナリオを含む)にも適しています。
    不向きな用途: 実際の Reddit データ連携が必要な用途(テンプレート自体はスクレイピングや Reddit 接続を行いません。README ではデータ取得は外部ツールに任せ、本テンプレートはレンダリングのみを担当することを推奨しています)、公式ブランド素材(リアルなSNSカードは商標や誤認のリスクがあります)、複数画像の長文記事(単一カード形式のため)には適していません。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload social-reddit-card.tar.gz
    sha256: 13bf26ccd190a3b6…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.