1仕組みと動作原理
5段構成レイアウト：Header（チーム + 期間）→ KPIカードグリッド → 7日間スパークライン → Real-time activity feed → linked database タスクテーブル（ステータスピル）。
next/src/lib/templates/skills/live-dashboard/SKILL.md
- KPI 卡片网格
本バッチ内で最も情報密度が高いテンプレートです。5つのセクションが独立したブロックになっており、「チーム概要」のような縦長ページの構築に適しています。
データソースがなくても「稼働中」の質感を演出：サンプル内ではコネクタ未接続であることや表示値がシードデータであることを明記し、インラインJSでスパークラインとアクティビティフローを描画します。
next/src/lib/templates/skills/live-dashboard/example.html
<div class="pill-live sample" id="livePill" title="No connector bound — values below are seeded sample data">
本文にも「データソースがない場合でもシードデータで代替する」と記載されており、シードによるフォールバックは欠陥ではなく本テンプレートの中核的な仕様です。
ステータスセマンティクスにNotionデータベースの配色を採用：done/progress/blocked/todo/review の5段階ピルのカラーコードをCSS変数にハードコード。
next/src/lib/templates/skills/live-dashboard/example.html
--pill-done-bg: #dbeddb; --pill-done-ink: #2b593f;
5組のbg/ink変数は「Notionらしさ」の最も直接的な源泉であり、レイアウトそのもの以上に視覚的印象を決定づけています。
テンプレート自体がプロンプト：SKILL.md 本文をローダーが読み出し、共有プレリュードやユーザー入力と結合してローカルの agent CLI に実行させます。
next/src/app/api/convert/route.ts
prompt = assemblePrompt({ body: skill.body, content, format });
ランタイムはテンプレートディレクトリ内のコードを実行しません：/api/convert は {agent, templateId, content} のみを受け取り、loadSkill(templateId) で SKILL.md 本文を取得してプロンプトの主体とし、ログイン済みのローカル agent CLI に渡します。HTMLは stdout 経由でフロントエンドにストリーミングされます。
skill ディレクトリは純粋なテキスト資産：ローダーはディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードは一切ロードされません。
next/src/lib/templates/loader.ts
const raw = safeRead(path.join(dir, "SKILL.md"));
ファイルシステム上の skill は単なるテキストです：ローダーが各ディレクトリの SKILL.md を読み取り、frontmatter をピッカー用メタデータとして抽出、本文を body として返します。本テンプレートディレクトリ内のモジュールが import または実行されることはありません。
テンプレート注入前に共有プレリュードが適用され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツに応じて決定する」ことを最優先事項として規定。
next/src/lib/templates/shared.ts
【内容驱动数量 — 最高优先级, 覆盖模板里的任何数字】
共有プレリュードはテンプレート本文より前に注入され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリを定義するのみであり、数量はユーザーコンテンツ次第である」と定めています。そのため、本テンプレートのレイアウト一覧は「再利用可能なレイアウトプール」であり、ページ数やフレーム数の上限ではありません。
テンプレート注入前に共有プレリュードが適用され、「テンプレートはレイアウト/スタイル/配色/フォント/コンポーネントライブラリのみを定義し、数量はユーザーコンテンツに応じて決定する」ことを最優先事項として規定。
next/src/lib/templates/shared.ts
- **禁止使用 Write / Edit / MultiEdit / Bash / Create / 任何文件系统工具**。不要把 HTML 写到任何 \`.html\` 文件里。前端直接捕获你的 stdout 文本, 文件落盘由前端负责。
プレリュードはファイルシステムツールの使用を明示的に禁止し、純粋なHTMLをレスポンス本文からストリーミング出力することを要求します。ディスクへの書き込みはフロントエンド側が担当するため、skill 側にはディスク書き込み動作が存在しません。
skill ディレクトリは純粋なテキスト資産：ローダーはディスクから SKILL.md 本文を読み取るのみで、ディレクトリ内の実行可能コードは一切ロードされません。
next/src/lib/templates/loader.ts
const exampleHtml = safeRead(path.join(dir, "example.html"));
ディレクトリ内の example.html はリポジトリに同梱されたゴールデンサンプルです。プレビュー用ルートはビルドやコンパイルを行わずディスクから直接読み出して返却し、品質基準および詳細ページの表示素材として機能します。
2コア機能
01KPIカードグリッド
027日間トレンドスパークラインカード
03Real-time activity feed（アバター + アクション + タイムスタンプ）
04linked database タスクテーブル + 5段階ステータスピル
05サンプル/シードモードおよび更新ボタン（オフラインデモ用）
06スパークライン描画およびデモ用の行点滅用インラインJS（本バッチ唯一のスクリプト入りサンプル）
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部影響は一切なし
監査ノート： 🟢 グリーン（安全）。判定対象＝skill ディレクトリ自体：ディレクトリ内にURLは存在しません（example.html にも http(s) エンドポイントは一切なし）。ディレクトリ内には SKILL.md と example.html のみが含まれ、スクリプト、実行可能コード、ネットワークエンドポイント、認証情報の読み取り、ディスク書き込み指示はゼロです。SKILL.md に従って実行した結果はホストモデルによるHTMLテキストの出力のみであり、外部送信やディスク書き込み動作は一切含まれません。ホストシェルおよび生成物の利用環境における挙動は判定基準とせず、verdict.risks にのみ記録しています：shared.ts のプレリュードが成果物に Tailwind CDN (https://cdn.tailwindcss.com) と Google Fonts の参照を要求している点、ランタイムがログイン済みのローカル agent CLI を spawn する点（envFor が process.env を透過）、プレビュー用 iframe が sandbox="allow-scripts allow-same-origin" である点。
5二重目の独立検証
- [discrepancy] 规范↔示例：zebra 斑马纹 — 正文写「Linked database task table (zebra + 状态 pill)」；示例没有 nth-child 斑马纹，改用 `.db-row:hover` 高亮与 `.db-row.changed` 行闪烁动画；状态 pill 五档齐备。
- [ok] 示例脚本普查 — example.html 仅 1 个内联 <script>；fetch/XMLHttpRequest/WebSocket 命中 0，脚本只做 seeded 数据渲染与演示动效，与示例自述「seeded fixtures, not a real workspace」一致。
- [ok] 7 日窗口核对 — 示例命中 `Tasks created · last 7 days`，与正文「7 天 sparkline 趋势」一致。
- [ok] seed 兜底核对 — 正文「即使没有数据源也用 seed 数据兜底」；示例 `pill-live sample` 的 title 为 `No connector bound — values below are seeded sample data`，并在刷新按钮 title 里标明 sample mode。
- [ok] commit/host 侧声明 — 示例末尾提示 `tasks and activity below are seeded fixtures, not a real workspace.`——自查诚实，不存在把演示数据冒充真实数据的误导性文案。
- [ok] 目录资产面普查 — glob 全量：SKILL.md、example.html；无 scripts/、无 references/、无数据文件、无包管理器清单。
- [ok] 可执行代码普查 — example.html 内 <script> 计数 = 1，fetch/XMLHttpRequest/WebSocket 命中 0；SKILL.md 全篇无脚本或可执行代码。
- [ok] 外链端点普查 — 目录内（含 example.html）零 http(s) 命中，产物离线自持。
6結論
最適な用途： チーム週報・運用概要などの縦長ページ、製品デモ内の「データダッシュボード」UI、Notion風ダッシュボードのプロトタイプ。データソースがない状態でも「稼働している」ように見せたいプレゼン資料に最適。
不向きな用途： 実データの連携や自動更新を必要とする本番ダッシュボード（テンプレートにコネクタは含まれずシードデモのみ）；チャートによるインタラクティブな分析（サンプルはスパークラインのみ）；「スクリプト含有不可」の厳格な制約がある配信チャネル。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload live-dashboard.tar.gz
sha256:
Option B · Copy Guide for Agentd4f43f274c67de59…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.