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

finance-report

マストヘッド + KPI + 収益/バーンレート推移図 + P&L 概要表 + 主要ハイライト + 今後の見通し

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

1仕組みと動作原理

この skill は実行可能プログラムではなく、ローカルの coding-agent CLI に注入されるプロンプトです。ホストが SKILL.md 本文を取得し、先頭にサイト全体の共通デザイン指示を付加し、末尾にユーザーコンテンツを結合して一本のプロンプトを構成し、ログイン済みのアカウント経由で agent に渡して、agent の stdout を HTML として受け取ります。

next/src/lib/templates/shared.ts
【输入格式】: ${opts.format} 【用户内容】: ${opts.content}
プロンプト構築テンプレート = 共通指示 → skill 本文 → 入力形式 → ユーザーコンテンツ。Web 端の /api/convert も同一関数を使用:prompt = assemblePrompt({ body: skill.body, content, format });

共通指示レイヤー(個別の skill には属さないが、全テンプレートに適用される)は出力を「自己完結型シングルファイル HTML」に固定し、agent が Write/Edit/Bash などのファイルシステムツールを使用することを明示的に禁止しており、HTML は対話本文として直接ストリーミング出力されます。

next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
これが今回の skill 群の能力境界の根拠です。生成物はテキストのみであり、ファイル保存やレンダリングはホストのフロントエンドが担当します。この禁止令はプロンプトによるソフトな制約であり、サンドボックスによるハードな隔離ではありません。

SKILL.md の外部には「コンテンツ駆動の数量決定」というオーバーライド規則が存在します。テンプレートに記載されたページ数、フレーム数、カード数はすべて参考下限値とみなされ、実際の数量はユーザーコンテンツによって決定されます。これにより、agent がテンプレートの数値に合わせてユーザーコンテンツを圧縮することを防ぎます。

next/src/lib/templates/shared.ts
- 模板只定义"可用版面 / 风格 / 配色 / 字体 / 组件库", **不定义** slide / 帧 / 卡片 / section 的数量。
frame-* などのシングルフレームテンプレートでは特に重要であり、テンプレート内のレイアウト記述を上限ではなく「再利用可能なレイアウトプール」として定義します。

ロード規則は「1 skill = 1 ディレクトリ」です。SKILL.md(セレクター用 YAML frontmatter + テンプレートプロンプト本体)、任意の example.md(サンプル入力)および example.html(直接開けるプレビューサンプル)で構成され、TS コードを変更することなくディレクトリを追加するだけで新しいテンプレートを追加できます。

next/src/lib/templates/loader.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
loader の loadSkillFromDir はこれら 3 種類のファイルのみを読み込み、他のアセットロードパスはありません。第 2 パスではこれに基づき本 skill のアセット到達性を検証します。

選択パイプライン(CLI 側)は 3 段階の漏斗構造です。キーワードの強いシグナル(1 単語一致ごとに 2 点、閾値 3)→ tags/scenario スコアリングへのフォールバック → それでも確証が得られない場合はユーザーコンテンツの先頭 800 文字をローカル agent に渡し、1 文の分類を行わせます。

cli/src/skills-matcher.ts
const CONFIDENCE_THRESHOLD = 3;
AI フォールバックの元のプロンプト:const prompt = `以下のコンテンツが最も類似しているドキュメントの種類を1文(15文字以内)で説明し、種類名のみを回答してください:`

プレビューパイプラインは生成から独立しています。/api/templates/<id>/preview は example.html をそのまま text/html として iframe に返し、フロントエンドの iframe は sandbox="allow-scripts allow-same-origin" を使用します。

next/src/components/preview-pane.tsx
sandbox="allow-scripts allow-same-origin"
ルートのコメント:* Returns the skill's `example.html` verbatim so it can be loaded into an(ホスト側のトレードオフ:allow-scripts + allow-same-origin の組み合わせ下では、プレビューページのスクリプトが自身でサンドボックスを解除することが可能です)。

テンプレートは純粋な骨組み(全 22 行)です。6 つの固定レイアウトセクションを用いて財務資料を 1 ページのレポートにまとめます。マストヘッド + 4 つの主要 KPI、収益とバーンレートの 2 つのチャート、P&L 概要表、5 つの主要ハイライト、Outlook(展望)段落、および折りたたみ式の Methodology(算定基準)エリアで構成されます。

next/src/lib/templates/skills/finance-report/SKILL.md
【布局】 - Masthead (公司 + Q + 报告标题) + 4 个 hero KPI - Revenue chart + Burn chart (Chart.js / ECharts) - P&L 概要表 (zebra + sticky header) - Top-line highlights (5 条 bullet) - Outlook 段落 - Methodology 折叠区
6 セクションの骨組みは本バッチの中で最もシンプルであり、スタイル、配色、フォントはすべて共通指示レイヤーに委ねられています。

意図は 1 つの文に集約されています。「数値 + グラフ + テキストによる洞察を備えた財務向け 1 ページレポート」であり、単なる表ではなく、定量的レイアウトと文章による解説の両方を要求します。

next/src/lib/templates/skills/finance-report/SKILL.md
【意图】财务向单页报告, 数字 + 图表 + 文字洞察。
1 文の意図:数値 + グラフ + テキストによる洞察。3 つのうち 1 つでも欠ければ不合格となります。

レイアウトの詳細は直接的な実装仕様を指定しています。P&L 表にはゼブラストライプ + 固定ヘッダー(sticky header)を要求し、長い表でもスクロール可能で高い可読性を保ちます。

next/src/lib/templates/skills/finance-report/SKILL.md
- P&L 概要表 (zebra + sticky header)
固定ヘッダー + ゼブラストライプは長い表の可読性を保つためのディテールであり、レイアウトレベルの必須要件です。

ファーストビューの KPI 数は 4 つの主要 KPI に厳格に固定され、マストヘッド(企業名 + 四半期 + レポートタイトル)と同一画面に収めることで、開いた瞬間に「どの企業のどの四半期か、4 つの重要指標は何か」が直感的に伝わるよう設計されています。

next/src/lib/templates/skills/finance-report/SKILL.md
- Masthead (公司 + Q + 报告标题) + 4 个 hero KPI
ファーストビューの 4 指標 + 企業・四半期タイトルは、結論から読み進める財務読者の視線誘導に合致しています。

本 skill には example.md がなく、プレビューサンプルの example.html は完全に自己完結しています。外部リンクや <script> は一切なく、グラフは CSS/SVG で描画され、フォントはローカルのセリフ系フォントスタックを使用します。

next/src/lib/templates/skills/finance-report/example.html
--display: 'Iowan Old Style', 'Charter', 'Iowan', Georgia, serif;
サンプルページに外部リンクが存在しないことは、この種のレイアウトが CDN に依存せず成立することを示しています。

2コア機能

01標準的な財務レポートのファーストビュー:マストヘッド(企業名 + 四半期 + タイトル)+ 4 つの主要 KPI
02収益グラフ + バーンレートグラフの 2 つの配置枠(Chart.js / ECharts)
03P&L 概要表:ゼブラストライプ + 固定ヘッダー(sticky header)
045 つの重要ハイライト(top-line highlights)エリア
05Outlook(今後の見通し)段落
06折りたたみ式 Methodology エリア(集計基準のトレーサビリティ確保)
07セレクターキーワード:财报 / finance report / 财务报表 / 年报 / 季度财报 / 利润表 / 资产负债表

3外部依存関係

KindDependency / Endpoint
networkTailwind 与 Google Fonts 由共享指令层强制(本模板 SKILL.md 未提任何 CDN;官方示例页零外链)
packageChart.js / ECharts(SKILL.md 指定的图表方案;示例页未使用,改为手写 SVG/CSS)

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

安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠(ファイルパスと抜粋)
  • SKILL.md: スクリプト実行や外部影響を伴わない、純粋なプロンプト指示およびルールテキスト
監査ノート: 。評価対象は本 skill 自身のディレクトリです(評価基準:SKILL.md に従って実行した際に実際に何が起きるか)。SKILL.md は純粋な指示テキストであり、付属の example.md/example.html は入力サンプルおよびプレビューサンプルです。ディレクトリ内にはスクリプト、実行時のネットワーク呼び出し、認証情報の読み取り、agent 側でのファイル書き込みは存在しません。SKILL.md も外部の生成・サービスバックエンドを一切指定していません(orange 判定の先行事例 ai-image-generation / seedance が素材を外部生成バックエンドに送信しアカウントクレジットを消費するのに対し、本テンプレートは素材の外部送信を発生させません)。等級に影響しない説明事項:ディレクトリ内の example.html は cdn.tailwindcss.com および fonts.googleapis.com へ外部リンクしています(バッチ 4 の判定基準:example.html の外部リンクは生成物サンプルの範疇であり、評価対象外)。また、共通指示レイヤーも生成物の head 内で CDN 経由で Tailwind と Google Fonts を読み込むよう要求していますが(- `<head>` 内で CDN 経由で Tailwind v3 Play (https://cdn.tailwindcss.com) と必要な Google Fonts を読み込むこと)、これはホストシェル側の振る舞いです。ホスト側の背景(評価等級には含まれません。verdict.risks を参照):プレビュー iframe sandbox="allow-scripts allow-same-origin"、ホストは全権限モードで agent を起動("bypassPermissions", / "--yolo",)。追記:公式サンプルページ example.html は外部リンク・スクリプトともにゼロであり、本 skill は 9 つのテンプレートの中で最もネットワーク露出面が小さい設計となっています。

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

  • 極めてシンプルかつ完全なレイアウト骨組み:ファーストビュー = 企業/四半期/タイトル + 4 つの主要 KPI、その下にグラフ、P&L、ハイライト、展望が続き、財務レポートの読解フローに合致します。
  • P&L 表にゼブラストライプ + 固定ヘッダーを要求し、1 ページ内でも長い表の可読性を維持——財務表において最も実用的なユーザビリティ設計です。
  • 共通指示レイヤーに余白を残す設計:配色、フォント、グラフィック言語を固定しないため、改修コストが低く、企業の既存 CI/VI に容易に適合できます。
  • 公式サンプルによりオフライン完結の納品が可能であることを実証:外部リンクゼロ、スクリプトゼロ、CSS/SVG による手描きのグラフ構成。
  • 最適な用途: 1 ページで全体を把握したい四半期/年次財務サマリー(資金調達前のエグゼクティブサマリー、取締役会付帯資料、投資家向けアップデートなど)に最適です。また、自社のカラーリングを適用するための財務レポートページのベース骨組みとしても適しています。デザインの細部調整に時間をかけず、迅速に出力したいチームにとって最も効率的です。
    不向きな用途: 複数ページにわたる詳細な財務諸表、注記、監査基準の全文が必要なシナリオには不向きです(長文の 1 ページ構成であり、冊子の年次報告書ではありません)。グラフのインタラクションやドリルダウンが求められる分析用途には不向きです(テンプレートは表示枠のみを提供し、サンプルは静的な SVG です)。サンプルの数値をそのままデータテンプレートとして流用することには適していません(サンプル内の Northwind Q3 は架空の企業です)。
    Install Agent-Ready
    ① Verified Mirror 2026-09-15
    Option A · Direct DownloadDownload finance-report.tar.gz
    sha256: 3d200da22fb65eba…
    Option B · Copy Guide for Agent
    install.json
    Agent はこの JSON ガイドから自動的にダウンロードして検証します。
    ② Upstream GitHub
    GitHub Repo ↗
    Pinned to commit 553ed98c28.