1仕組みと動作原理

テンプレート本体には実行可能コードが含まれていません。loaderはsrc/lib/templates/skills/<id>/SKILL.mdからfrontmatterと本文を読み込み、本文（body）をexampleの内容とともにLoadedSkillとして返します。

next/src/lib/templates/loader.ts

const raw = safeRead(path.join(dir, "SKILL.md"));

ここで行われていること：SKILL.mdが唯一の振る舞いの定義元です。frontmatterはセレクターのレンダリング（zh_name/emoji/aspect_hint/tags/example_*など）に使用され、本文全体がプロンプトとなります。loaderはセマンティックな検証を行わず、テンプレートに記述された内容をそのまま渡します。

プロンプトは送信前にホスト側で組み立てられます。テンプレート本文は共有デザイン指示（SHARED_DESIGN_DIRECTIVES）と【入力フォーマット】/【ユーザーコンテンツ】の間に挟まれます。

next/src/lib/templates/shared.ts

Wrap a per-template instruction body with the shared design directives and

ここで行われていること：テンプレートは「この成果物がどのような外観を持つか」（レイアウト/リズム/コンポーネント）のみを定義し、共有指示がテンプレート横断のハード制約（単一ファイルHTML、ファイル操作ツールの使用禁止、TailwindおよびGoogle FontsのCDN利用、コンテンツの信憑性、中欧文間のスペース確保など）を担います。

共有指示はハード制約をエージェントへの明示的な禁止事項として定義し、コンテンツ駆動による数量決定を強制します（テンプレート内の数値は参考下限値に過ぎません）。

next/src/lib/templates/shared.ts

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

同一ファイル内には次のルールもあります。出力されるslide/frame/card/sectionの数量は【ユーザーコンテンツ】の実際の長さと情報構造によって完全に決定されます。これにより、コンテンツが増加しても破綻せず、各セグメントに最低1枚のカード/セクションを割り当て、テンプレートはレイアウトの選択肢のみを提供する形をとっています。

実際に実行されるのは、ユーザーのローカル環境にインストールされログイン済みのコーディングエージェントCLIです。ホストが子プロセスをspawnし、プロンプトを渡してstdoutからHTMLをストリーミング取得します。

next/src/lib/agents/invoke.ts

import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";

ここで行われていること：テンプレートスキルはプロンプトを提供するだけであり、コード生成やツール実行を含む能力はホストCLIの既存権限に依存します。スキルディレクトリ自体にはスクリプトのエントリポイントが存在しないため、評価はディレクトリ内のアセットのみを対象とします（ホストの挙動は評価対象外）。

/api/convertはテンプレートの実行パスです。skill.bodyとユーザーコンテンツをプロンプトに組み上げ、invokeAgentに渡します。

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

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

編集モードでは別途buildEditPromptを経由します（最小限の差分編集、ファイルツールの禁止、完全なHTMLの直接ストリーミング出力を要求）。そのため本テンプレートの成果物は、単一ファイルHTML、インラインCSS/SVGで構成され、外部リソースはフォントおよび個別テンプレートで明示的に指定されたチャートライブラリのみという安定した形態を維持します。

テンプレートは成果物内でCDNチャートライブラリを用いたレンダリングを要求します。2つ以上のチャート（棒/折れ線/円/散布図）にChart.jsまたはEChartsを用い、jsdelivr CDN経由で読み込み、ユーザー入力からデータを解析します。

next/src/lib/templates/skills/data-report/SKILL.md

- 主图表区: 至少 2 个图表 (柱状 / 折线 / 饼 / 散点), 使用 Chart.js 或 ECharts (jsdelivr CDN 引入), 数据从用户输入解析得到。

このCDNは成果物の実行時依存です。生成されたHTMLがブラウザで開かれた際に該当エンドポイントからchart.jsを取得します。スキル実行中には取得・レポート・素材送信を行いません（エンドポイント：cdn.jsdelivr.net、security.reasonおよびverdict.risksを参照）。第4バッチの最終基準に従い、リスク格付けの対象外となります。

テンプレートは具体的なクラッシュ事象を予見し解決策を提示しています。Chart.jsでresponsiveおよびmaintainAspectRatio:falseを設定した際、親コンテナに明示的な高さがないとResizeObserverの無限ループに陥るため、canvasの外側を固定高コンテナでラップする必要があります。

next/src/lib/templates/skills/data-report/SKILL.md

**图表容器必须有固定高度**

ここで行われていること：蓄積されたトラブル事例をハード要件化（KPIミニチャート ~40px、メインチャート ~240–280px）し、レイアウト目的でcanvasに直接height=属性を指定することを明確に禁止しています。実障害に基づいた制約は高品質なテンプレートである証拠です。

データの信憑性が最優先事項として規定されています。ユーザーが提供した実際のデータを解析し、決して捏造してはなりません。

next/src/lib/templates/skills/data-report/SKILL.md

- **必须解析用户提供的实际数据**, 不要捏造。

この規定が入力仕様を決定づけています。CSV/Excel/JSONの構造化データが必須入力項目となり、サンプル入力では9行のCSV（month,active_users,new_signups,paying,churn_rate）が使用されています。

レポートはさらに4種類の補助的要素を規定しています。ヘッダー（タイトル+対象期間+データソース）、KPIカード（数値+前年比+ミニトレンドライン）、データテーブル（ストライプ/ホバー/固定ヘッダー）、インサイトブロック（絵文字始まりの3〜5項目）、下部の折りたたみ式メソドロジーエリアです。

next/src/lib/templates/skills/data-report/SKILL.md

- KPI 卡片网格: 3-5 个最重要指标, 每个卡片显示数值 + 同比变化 + 微型趋势线。

サンプルでは各要素が実装されています。40pxのミニ折れ線を備えた4つのKPIカード、メインチャート領域の2つのcanvas（高さ260px）、スクリプトによってデータ配列から動的生成されるテーブル行、3つの絵文字インサイト、<details>によるメソドロジーの折りたたみ表示です。

サンプルではデータをインライン配列として保持し、成果物内スクリプトでテーブルとチャートをレンダリングすることで、ユーザーデータからDOM構造への完全な変換パスを示しています。

next/src/lib/templates/skills/data-report/example.html

{month:'2024-09', mau:8420, signups:1240, paying:612, churn:0.034},

同一スクリプトブロック内でnew Chart(...)を実行し、4つのKPIミニトレンドラインと2つのメインチャートを生成します。これは成果物に組み込まれたページ内スクリプトであり（スキル側のエントリポイントではありません）、差し替え可能なデータ配列が同梱されているため、ユーザーは配列を書き換えるだけでページを再利用できます。

チャートコンテナの高さ制約はサンプル内で忠実に再現されています（ミニチャート40px、メインチャート260px）。

next/src/lib/templates/skills/data-report/example.html

<div class="mt-3" style="position:relative;height:40px"><canvas id="kpi1"></canvas></div>

ここで行われていること：「固定の高さを設ける」という要件を単なる推奨にとどめず検証可能なDOM構造として定着させています。メインチャートも同一仕様（position:relative;height:260px）であり、SKILL.mdで指定された240–280pxの範囲と完全に一致しています。

2コア機能

01構造化データからビジュアルレポートへの解析パイプライン（CSV/Excel/JSON入力）

02複数チャートのレンダリング（2つ以上。サンプルでは2軸対応のメイン棒/折れ線グラフに加え、4つのKPIミニトレンドラインを実装）

03KPIカード（メトリクス値 + 前年比変化 + ミニトレンドライン）

04データテーブル（元データ抜粋、ストライプ表示 / ホバー効果 / 固定ヘッダー）

05インサイトブロック（絵文字で始まる3〜5行のテキストインサイト）

06下部折りたたみ式メソドロジーエリア（集計基準・定義の説明）

07既知の障害に対する防御ルール（ResizeObserverの無限ループを防ぐ固定高コンテナ）

08データ信憑性の厳格な要求（ユーザー提供の実データを必ず解析し捏造を禁止）

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

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

Agent 向け

自動ロード可能

管理者向け

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

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

SKILL.md: プロンプト指示および規則テキストのみで構成され、スクリプト実行や外部への副作用は一切ありません。

監査ノート： 評価はスキル自身のディレクトリのみに基づきます。data-report/内にはSKILL.md、example.html、example.mdのみが存在し、独自のCLI、認証情報の読み取り、ディスク書き込み指示は含まれていません。実行時の外部送信もゼロです（example.html内の<script>は成果物自体のページ内描画スクリプトであり、スキル側のスクリプトエントリポイントではありません）。SKILL.md:22にはjsdelivr CDNの利用指定（「Chart.jsまたはECharts (jsdelivr CDN経由) を使用」）があり、エンドポイントはcdn.jsdelivr.net、example.html:7で[email protected] UMDパッケージが実際に読み込まれています。第4バッチの最終基準に基づき、これは**成果物実行時の参照**とみなされます。生成されたHTMLがブラウザで開かれた際に当該静的ライブラリを取得するものであり、スキルの実行フェーズでユーザーデータを外部取得・送信・転送することはないため（データは成果物自体にのみインライン化されます）、格付け対象外とし、エンドポイントの記載にとどめています。なお、成果物はページ内スクリプトでデータを処理しチャートを描画するため、ホストのプレビューパネル（sandbox="allow-scripts allow-same-origin"）下で実行されます。このsandbox設定およびCLIプロセスのspawnはホスト側の挙動であるため評価には含めず、verdict.risksに記録しています。

5二重目の独立検証

[ok] 图表容器高度规范 vs 示例实现 — SKILL.md 要求 canvas 外层包固定高度 div（KPI ~40px、主图 240–280px）且禁止给 canvas 写 height 属性；示例全部命中（40px×4、260px×2，canvas 无 height 属性）。
[ok] 数据一致性（产物 ↔ 示例输入） — example.html 的 data 数组与 example.md 的 CSV 9 行数值一一对应（如 2025-05: mau 23950 / signups 4250 / paying 2418 / churn 0.018），证明解析用户数据的执行路径可复现。
[ok] 端点性质（产物期 vs 执行期） — SKILL.md:22 逐字命中「使用 Chart.js 或 ECharts (jsdelivr CDN 引入)」；example.html:7 为 [email protected] 的 jsdelivr 链接。库由浏览器加载产物时取用，属产物期引用（批4 终版口径不判级），故维持 green；端点已列入 security.reason 与 verdict.risks。
[ok] 「至少 2 个图表」是否达标 — 示例有 chart-main（柱状覆盖双轴折线）与 chart-churn（折线）两张主图，另有 4 条 KPI 迷你趋势线，超过最低要求；图表类型在 SKILL.md 列出的柱状/折线范围内。
[ok] license / stars / commit 元数据 — GitHub API（api.github.com/repos/nexu-io/html-anything）：spdx_id=Apache-2.0、stargazers_count=8827、pushed_at=2026-09-15T03:36:24Z；工作副本 git HEAD = 553ed98c283f9c0f489902d035416a972d6a9699（与任务表 pin 553ed98c283f 同源）。
[ok] skill.path 与目录资产面 — pin 目录内该路径存在且含 SKILL.md；目录内文件清单已用 glob 全量核对（含隐藏文件），无 scripts/、无 references/、无二进制资产（competitive-teardown 的 assets/ 为纯 HTML，另行记录）。

6結論

チャートライブラリ特有の致命的な不具合を厳格な仕様として規定（親コンテナの固定高、canvasのheight属性禁止、40px/240–280pxの参考値提示）し、画面フリーズの発生率を大幅に低減しています。

明確な入力契約と再現性の高いサンプル：9行のCSVを入力することで視覚的な週次レポートが出力され、成果物内のデータ配列は入力値と1対1で対応します。

レポート構成の完全性（ヘッダー期間+ソース、前年比とミニトレンドを備えたKPIカード、2つ以上のチャート、固定ヘッダー付き元データ表、絵文字インサイト、折りたたみメソドロジー）により、そのままプロダクト週報として納品可能です。

データの信憑性に関する規律をテンプレート本文に明記（実データを必ず解析し、架空の数値を捏造しないこと）。

抑制の効いたプロフェッショナルな配色（メイン1色 + ニュートラル階調 + チャート用パレット）。サンプルでは暖色系オレンジ/アンバー/緑/青の4色で指標を効果的に識別しています。

最適な用途： 構造化データを迅速に公開可能なレポートページに落とし込む用途に最適です（プロダクト週報/月報、運用データの振り返り、施策検証レポート、1枚完結の財務サマリーなど）。CSVやJSON形式でデータが提示され、指標の集計基準が明確である場合に最大の効果を発揮します（サンプルの9か月成長データなど）。

不向きな用途： データが存在しないテキスト主体のレイアウトには適していません（実データの解析が必須要件です）。完全オフラインや外部依存ゼロが求められる環境には不向きです（成果物がCDNからチャートライブラリを取得するため、dashboardのようなインラインSVG方式を推奨します）。動的な絞り込みやドリルダウンを伴うインタラクティブBIダッシュボードには適していません（リアクティブなデータバインディングを持たない静的レンダリングのため）。

Install Agent-Ready

① Verified Mirror 2026-09-15

Option A · Direct DownloadDownload data-report.tar.gz

sha256: decfcd8af87ff5e9…

Option B · Copy Guide for Agent

install.json

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

② Upstream GitHub

GitHub Repo ↗

Pinned to commit 553ed98c28.