ドキュメント&知識ベース · nexu-io/html-anything

social-media-matrix

シネマティックなマルチプラットフォームSNS分析:インタラクティブチャート、ホバーインサイト、期間比較、ライト/ダークテーマ

L4 高権限 · 段階的認可と監査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 を含み、本文はエージェント向けのレイアウト指示文です。リポジトリは個別テンプレート用のコードを一切持たず、テンプレートの追加=フォルダーの新規追加となります。

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

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

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(ホストの PATH から検出された claude / codex / cursor-agent など)を起動します。これに付随する共通指示にも「**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-media-matrix/SKILL.md はレイアウト、配色、フォント、コンテンツ規律のみを記述しており、エージェントにツールの実行、APIの取得、外部データの読み取りを促す記述は一切ありません。

next/src/lib/templates/skills/social-media-matrix/SKILL.md
【模板: 社媒矩阵追踪 (Social Matrix Tracker)】
skill ディレクトリは計 2〜3 ファイル(SKILL.md + example.html[+ example.md])で構成され、scripts/references/データファイルは存在しません。example.html は同一テンプレートの手動作成サンプル成果物にすぎません(internal_assets を参照)。

SNSデータをシネマティックで高密度なマルチプラットフォームダッシュボードに仕立てることを意図しています。

next/src/lib/templates/skills/social-media-matrix/SKILL.md
【意图】电影感、数据密集的多平台社媒看板。

コアとなるのは単一プラットフォームの指標カードではなく、platform × metric の KPI マトリクスです。

next/src/lib/templates/skills/social-media-matrix/SKILL.md
- Multi-platform KPI matrix (横 platform × 纵 metric)

チャートにはインタラクティブ性が求められます:ホバーツールチップと期間比較。

next/src/lib/templates/skills/social-media-matrix/SKILL.md
- 交互式 charts (hover tooltip + range compare)

テーマやフォールバックデータも本文に記載されています:dark / light 切り替え、データは seed 値でフォールバック。

next/src/lib/templates/skills/social-media-matrix/SKILL.md
- dark / light 切换; 数据用 seed 兜底

サンプルでは canvas + インライン JS を使用してインタラクティブなチャートを実装しています(ツールチップ、ピン留め、ドラッグ範囲選択、Shift+Drag による複数範囲保存、ダブルクリックでリセット)。

next/src/lib/templates/skills/social-media-matrix/example.html
<div class="sub">Hover: details · Click: pin point · Drag: interval stats · Shift+Drag: save multi ranges · Double click: reset</div>

2コア機能

01マルチプラットフォーム KPI マトリクス(platform × metric)
02インタラクティブチャート:ホバーツールチップ / クリックピン留め / ドラッグによる期間統計
03Insights パネルへのリアルタイム反映(focus / pin / range / A-B 比較)
04dark / light テーマ切り替え(html[data-theme] でトークン全体を制御)
05複数ネットワークのローテーション表示(サンプルでは 3.6 秒ごとにプラットフォームを切り替え)
06canvas チャートレイヤー(折れ線/積み上げ/ドーナツ/地理的分布)
07トップ投稿グリッドとインサイト

3外部依存関係

KindDependency / Endpoint
cli本地 coding-agent CLI(宿主提供,模板自身不调用)

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

安全運用のための推奨統制措置
Agent 向け
段階的・都度認可、サンドボックス推奨
管理者向け
承認フロー、ロールバック可能、全履歴監査
判定根拠(ファイルパスと抜粋)
  • scripts/: ローカルスクリプトまたはコマンドの実行: example.html 内のインライン <script>(ブラウザ側:canvas 折れ線/積み上げ/ドーナツ描画、ホバーツールチップ、クリックピン留め、ドラッグ期間統計、S
監査ノート: 判定対象=本 skill ディレクトリ(SKILL.md + example.html[+ example.md]):組み込みスクリプトなし、認証情報読み取りなし、ディスク書き込み指示なし、ランタイム時に外部エンドポイントを一切要求しません。本文はレイアウト/配色/フォントファミリー名およびコンテンツ規律のみを提供し、フォント名自体は通信を発生させません。ディレクトリ内に実際に現れる外部リンクはすべて「成果物サンプル」の性質であり、各項目を照合・検証済み:該当ゼロ(social-media-matrix ディレクトリ内に http(s) リテラルの該当なし。フォントはファミリー名(Inter / "Cormorant Garamond" など)の宣言のみでリクエストは発生せず、CDN や画像外部リンクもなし)。第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 2 个文件,无 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] 端点扫描(目录内) — social-media-matrix 目录 2 个文件中无任何 http(s) 字面量:无 CDN、无 Google Fonts、无外链图片;字体仅以字族名声明。
  • [ok] example.html 与 SKILL.md 的一致性 — 正文五条要求均有对应实现:data-theme + setTheme()(主题切换)、.platforms 矩阵、canvas 图表 + .chart-tooltip(交互图表)、.insights-panel(洞察抽屉)、Top posts 卡片。
  • [unlocatable] 「数据用 seed 兜底」 — 正文写 '- dark / light 切换; 数据用 seed 兜底',但在 SKILL.md 与 example.html 中都找不到任何确定性随机种子机制:示例是写死的静态数据字面量(data = { x:{…}, linkedin:{…} … }),只有装饰性 sparkline 用 Math.random()。该措辞更像是「缺数据时自造合理数据」的要求,无代码级对应物,故不写成能力。

6結論

  • 「複数プラットフォーム × 複数指標」のマトリクスを第一級オブジェクトとして扱い、単一プラットフォームのレポートではなく横断比較に最適
  • 卓越したインタラクション深度:ホバーツールチップ、クリックピン留め、ドラッグ期間統計、Shift+Drag による複数期間の保存
  • インサイトパネルがインタラクション結果をリアルタイムでテキスト化(A/B 比較、前月比/前年比)、単なる図表に留まらないダッシュボード
  • ライト・ダーク両テーマが対として実装されており、大画面投影と夜間閲覧の双方に対応
  • 外部依存ゼロ。プレビューやオフライン閲覧時にもサードパーティへのリクエストは一切発生しない
  • 最適な用途: 複数のプラットフォームや指標を横断的に比較分析したいコンテンツチームや個人、特にインタラクティブな分析(期間比較、A/B)や明暗テーマの切り替えを重視するシーンに最適です。また、「高密度データダッシュボード」の視覚的リファレンスとしても適しています。
    不向きな用途: 単一プラットフォームの週報(social-media-dashboard の方が軽量)、モバイル端末での閲覧、実データソースへの接続や構造化レポートのエクスポートが必要なシーンには不向きです(データの取得やエクスポートは行わず、データはユーザーコンテンツまたはモデルの自動生成に依存します)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload social-media-matrix.tar.gz
    sha256: 64db2953e2b6de77…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.