1仕組みと動作原理
表紙は3層の重ね合わせで構成：160° 深夜グラデーション背景（#08080f→#0e1020→#08080f）+ 3つの blur 光球 + 1層の SVG ネットワーク図。すべて CSS/SVG 内で記述され、画像素材は不要です。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .slide{background:linear-gradient(160deg,#08080f,#0e1020 50%,#08080f);color:var(--gd-text);padding:64px 88px;overflow:hidden}
「AI-native / dev-tool launch」の質感は、単一の背景画像ではなく、これら3層の重なりによって生まれます。
「浮遊 orbs」の実装は、radial-gradient 円 + filter:blur(110px) + 22秒 ease-in-out 交互アニメーション（3つの球体で遅延をずらす）によるもので、canvas や WebGL を使わない純粋な CSS アニメーションです。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-orb{position:absolute;border-radius:50%;filter:blur(110px);opacity:.35;animation:gdDrift 22s ease-in-out infinite alternate}
同一リポジトリ内の多数のテンプレートが同様の手法で環境光を表現しており、メインスレッドをブロックせず極めて低コストです。
「SVG 力学モデルグラフ」は実際には手動で座標を配置した静的 SVG（line と circle の x/y が固定されており、コメントで live force-directed と自称）であり、ファイル内にレイアウト計算は含まれず、力学モデルはあくまで視覚的な造形です。
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- live force-directed graph bg -->
これが本テンプレートで唯一説明と異なる点です（verification.second_pass の discrepancy 項目を参照）。
「レインボーグラデーション見出し」は、8色ストップの linear-gradient + background-clip:text + 4秒のリニアアニメーションで 200% 背景を回転させて実現されており、文字自体は透明でグラデーションのみが表示されます。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-rainbow{background:linear-gradient(90deg,#ff0080,#ff4d00,#ff9900,#ffe600,#00c853,#0091ea,#6200ea,#ff0080);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:gdRainbow 4s linear infinite}
これは今回の一連のテンプレートで唯一レインボーグラデーションを採用した見出し手法であり、ダーク背景との高コントラストによりセクションページの視覚的アクセントを担います。
「グラスモーフィズムカードページ」＝半透明の白背景 3% + 1px 白ボーダー 10% + backdrop-filter:blur(20px) saturate(160%) + 上部 50% グラデーションハイライト + 内側ストロークシャドウ。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-glass{position:relative;overflow:hidden;border-radius:20px;padding:22px 26px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.1);backdrop-filter:blur(20px) saturate(160%);box-shadow:0 8px 32px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.08)}
ガラス風カードにより、ダーク背景上の情報ブロックが独立したセマンティック層を形成しつつ、orbs のぼかし環境光を透過させます。
CLI コマンド表示＝JetBrains Mono 32px 緑文字 + 2層の text-shadow（30px / 60px）によるネオン発光で、「dev tool launch」のトーン＆マナーにおける中核的な演出要素となっています。
next/src/lib/templates/skills/deck-graphify-dark/example.html
.tpl-graphify-dark-graph .gd-cmd{font-family:'JetBrains Mono',monospace;font-size:32px;font-weight:700;color:var(--gd-green);text-shadow:0 0 30px rgba(126,211,164,.45),0 0 60px rgba(126,211,164,.15);letter-spacing:-.01em}
ボーダーや背景色の追加ではなく、発光強度によって「このコマンドが重要である」ことをエンコードしています。
サンプル8ページ：COVER / SECTION DIVIDER / CONTENT（plugin grid）/ CODE / CHART（race diagram）/ PIPELINE / CTA / THANKS。デスクトップグリッドには gd-grid-3 と gd-grid-4 による3列・4列レイアウトを採用。
next/src/lib/templates/skills/deck-graphify-dark/example.html
<!-- 5. CHART — race diagram -->
dev-tool launch の説明の流れ（位置付け → 機能 → インストール → データ → ワークフロー → アクション）を網羅するページ構成です。
ランタイムはホスト側が担当：テンプレートディレクトリ内には実行可能ファイルが一切なく、プロンプトは assemblePrompt によって組み立てられた後、ローカルの agent CLI に渡されて実行されます。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
skill 自体は純粋なプロンプト + プレビュー用素材のみで構成されています。
2コア機能
01AI-native / ナレッジグラフ / dev-tool launch 向けポジショニング
02表紙：深夜グラデーション + 浮遊 blur orbs + SVG グラフ背景
03Section ページ：レインボーグラデーションの大見出し
04コード / CLI ページ：JetBrains Mono + ネオン発光
05グラスモーフィズムカードページ
063列 / 4列デスクトップグリッド（プラグイン、機能一覧）
07キーワード強調用のカプセル型タグ（gd-tag）
08装飾背景としての SVG ネットワーク図（line + circle の手動座標配置）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC / Space Grotesk） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストであり、スクリプト実行や外部への影響はありません。
監査ノート： 。評価対象＝skill 自身のディレクトリ（next/src/lib/templates/skills/deck-graphify-dark/）：ディレクトリ内には SKILL.md、example.html のみが存在し、.sh/.py/.mjs/.ts 等の実行可能ファイル、package.json、インストールスクリプトはありません。認証情報 / 環境変数 / Cookie を読み取るコードや、ディスク書き込み指示も含まれません（HTML はモデルの応答本文に出力され、ディスクへの保存はホスト側のフロントエンドが担当）。example 内の <script> 数＝0。SKILL.md は純粋なレイアウト / コンテンツ仕様であり、実行時にアクセスすべき生成バックエンドや API は指定されていません。第4バッチの評価基準（生成物の参照は評価対象外、純粋な指示テンプレートは green 判定）に基づき、本テンプレートは純粋な指示型に分類されます。ディレクトリ内に実際に出現するエンドポイントは以下のみです（いずれも生成物サンプルまたはそのメタデータに属し、ブラウザ側から取得されるもので、skill コードから呼び出されるものではありません）：fonts.googleapis.com（example.html 内）、www.w3.org（example.html 内）。ホスト側の動作は評価対象外とし、別途 verdict.risks に記録：convert ルートがローカルの agent CLI を spawn して stdin 経由でプロンプトを渡す（next/src/lib/agents/invoke.ts）、共通指示により Tailwind / Google Fonts を CDN から読み込む（next/src/lib/templates/shared.ts）、プレビュー用 iframe が sandbox="allow-scripts allow-same-origin" を使用（next/src/components/template-picker.tsx）。
5二重目の独立検証
- [discrepancy] 「SVG 力导向图谱」是否真为力导向布局 — 否。示例是手摆固定坐标的 <line>/<circle>（如 <line x1="300" y1="200" x2="520" y2="340"/>），文件内没有 d3-force / requestAnimationFrame / 任何布局计算，注释 <!-- live force-directed graph bg --> 属描述性夸张（视觉上是「无序连线 + 节点」的图谱造型）。对产出无实际影响，但描述与实现不符。
- [ok] 「漂浮 orbs」是否真是动画 — gd-orb 带 filter:blur(110px) 与 animation:gdDrift 22s ease-in-out infinite alternate，三球错开 delay（gd-orb-2 / gd-orb-3 各有 animation-delay）。
- [ok] 「彩虹渐变标题」是否存在 — gd-rainbow 的 8 段色标 + background-clip:text + gdRainbow 4s 动画。
- [ok] 「Glassmorphism 卡片」是否有真实现 — gd-glass 使用 backdrop-filter:blur(20px) saturate(160%) 与半透明描边、内高光。
- [ok] 目录内是否有脚本 / 网络调用 / 凭证读取 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 fetch/XHR/env/写盘代码；无凭证读取。
- [ok] SKILL.md 是否要求运行时外链 — SKILL.md 只列色值与页型（无 URL）；字体 @import 属 example.html（产物示例）。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-graphify-dark，含 SKILL.md。
- [ok] README 收录一致性 — README deck 表列出 deck-graphify-dark（Dark, data-graphic-heavy deck），与目录内容相符。
6結論
最適な用途： AI-native 製品、dev tool / CLI のローンチ発表や技術プレゼンテーションに最適：ダークテーマ + ネオン + グラフ造形が「インフラ感」を演出し、プラグイングリッド、コマンド、データ比較などを自然に収容できます。
不向きな用途： フォーマルなビジネス / 印刷用途には不向き（高彩度なダーク背景、ガラス表現、ネオンは印刷時に大きく崩れます）；ライトテーマのブランドビジュアルには不向き（ダークカラーがハードコード化）；「リアルな動的力学モデルグラフ描画」を求めるデモには不向き（サンプルは静的 SVG）。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-graphify-dark.tar.gz
sha256:
Option B · Copy Guide for Agenta286c3d514e66d5b…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.