1仕組みと動作原理
この skill は実行可能プログラムではなく、ローカルの coding-agent CLI に注入されるプロンプトです。ホストが SKILL.md 本文を取得し、先頭にサイト全体の共通デザイン指示を付加し、末尾にユーザーコンテンツを結合して一本のプロンプトを構成し、ログイン済みのアカウント経由で agent に渡して、agent の stdout を HTML として受け取ります。
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
共通指示レイヤー(個別の skill には属さないが、全テンプレートに適用される)は出力を「自己完結型シングルファイル HTML」に固定し、agent が Write/Edit/Bash などのファイルシステムツールを使用することを明示的に禁止しており、HTML は対話本文として直接ストリーミング出力されます。
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
SKILL.md の外部には「コンテンツ駆動の数量決定」というオーバーライド規則が存在します。テンプレートに記載されたページ数、フレーム数、カード数はすべて参考下限値とみなされ、実際の数量はユーザーコンテンツによって決定されます。これにより、agent がテンプレートの数値に合わせてユーザーコンテンツを圧縮することを防ぎます。
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
ロード規則は「1 skill = 1 ディレクトリ」です。SKILL.md(セレクター用 YAML frontmatter + テンプレートプロンプト本体)、任意の example.md(サンプル入力)および example.html(直接開けるプレビューサンプル)で構成され、TS コードを変更することなくディレクトリを追加するだけで新しいテンプレートを追加できます。
* SKILL.md — frontmatter (id, scenario, tags, …) + prompt body * example.md — (optional) sample input content * example.html — (optional) pre-rendered preview, shown inline in the picker
選択パイプライン(CLI 側)は 3 段階の漏斗構造です。キーワードの強いシグナル(1 単語一致ごとに 2 点、閾値 3)→ tags/scenario スコアリングへのフォールバック → それでも確証が得られない場合はユーザーコンテンツの先頭 800 文字をローカル agent に渡し、1 文の分類を行わせます。
const CONFIDENCE_THRESHOLD = 3;
プレビューパイプラインは生成から独立しています。/api/templates/<id>/preview は example.html をそのまま text/html として iframe に返し、フロントエンドの iframe は sandbox="allow-scripts allow-same-origin" を使用します。
sandbox="allow-scripts allow-same-origin"
テンプレートは純粋な骨組み(全 22 行)です。6 つの固定レイアウトセクションを用いて財務資料を 1 ページのレポートにまとめます。マストヘッド + 4 つの主要 KPI、収益とバーンレートの 2 つのチャート、P&L 概要表、5 つの主要ハイライト、Outlook(展望)段落、および折りたたみ式の Methodology(算定基準)エリアで構成されます。
【布局】 - Masthead (公司 + Q + 报告标题) + 4 个 hero KPI - Revenue chart + Burn chart (Chart.js / ECharts) - P&L 概要表 (zebra + sticky header) - Top-line highlights (5 条 bullet) - Outlook 段落 - Methodology 折叠区
意図は 1 つの文に集約されています。「数値 + グラフ + テキストによる洞察を備えた財務向け 1 ページレポート」であり、単なる表ではなく、定量的レイアウトと文章による解説の両方を要求します。
【意图】财务向单页报告, 数字 + 图表 + 文字洞察。
レイアウトの詳細は直接的な実装仕様を指定しています。P&L 表にはゼブラストライプ + 固定ヘッダー(sticky header)を要求し、長い表でもスクロール可能で高い可読性を保ちます。
- P&L 概要表 (zebra + sticky header)
ファーストビューの KPI 数は 4 つの主要 KPI に厳格に固定され、マストヘッド(企業名 + 四半期 + レポートタイトル)と同一画面に収めることで、開いた瞬間に「どの企業のどの四半期か、4 つの重要指標は何か」が直感的に伝わるよう設計されています。
- Masthead (公司 + Q + 报告标题) + 4 个 hero KPI
本 skill には example.md がなく、プレビューサンプルの example.html は完全に自己完結しています。外部リンクや <script> は一切なく、グラフは CSS/SVG で描画され、フォントはローカルのセリフ系フォントスタックを使用します。
--display: 'Iowan Old Style', 'Charter', 'Iowan', Georgia, serif;
2コア機能
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Tailwind 与 Google Fonts 由共享指令层强制(本模板 SKILL.md 未提任何 CDN;官方示例页零外链) |
| package | Chart.js / ECharts(SKILL.md 指定的图表方案;示例页未使用,改为手写 SVG/CSS) |
4推奨統制措置と判定根拠
- SKILL.md: スクリプト実行や外部影響を伴わない、純粋なプロンプト指示およびルールテキスト
5二重目の独立検証
- [ok] 『6 段版面』宣称 — 重读 SKILL.md【布局】6 条与 JSON 引用逐字一致,无遗漏无夸大。
- [discrepancy] 图表库条目(Chart.js / ECharts) — SKILL.md 写 `Revenue chart + Burn chart (Chart.js / ECharts)`,但 example.html 无任何 <script>、无 CDN 引用,图表为 CSS/SVG 手绘——规范建议与示例实现不一致,已写入 risks。
- [ok] 『示例页零外链』结论 — 对 example.html 做 URL 正则扫描零命中、<script> 计数为 0,坐实自包含。
- [ok] 运行时机制 — 重读 loader.ts loadSkillFromDir / shared.ts assemblePrompt,与第一遍结论一致。
- [ok] 安全面 — skill 目录 2 个文件均无脚本/凭证/写盘/网络调用 token。
- [ok] meta 元数据 — GitHub API 实查:stars=8827、pushed_at=2026-09-15T03:36:24Z、license Apache-2.0。
- [unlocatable] 安装量 — 无公开安装量数据源,installs=null。
6結論
3d200da22fb65eba…