1仕組みと動作原理
背景色に GitHub Dark のカラーパレット（#0d1117 背景 / #161b22 面 / #30363d 枠線）を直接採用。コードブロックやステータスカラーが開発者の視覚的慣習と自然に一致するため、ダークテーマ体系を再構築する必要がありません。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
--oc-bg:#0d1117;
既存プロダクトのカラーパレット流用は低コストかつ高認知度なアプローチです。対象読者の目はすでにこのコントラスト比に慣れ親しんでいます。
「紫青アンビエントライト」＝2層の radial-gradient を重ね合わせ（紫 at 28%/38%、青 at 72%/62%）、左上と右下からそれぞれ光を当てることで、一様なグラデーションではなく対角線上の空気感を演出します。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cbg{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 28% 38%,rgba(124,58,237,.25) 0%,transparent 60%),radial-gradient(ellipse at 72% 62%,rgba(88,166,255,.18) 0%,transparent 60%)}
配置をずらした2つの光源は、中央テキストのコントラストを損なうことなく、単一グラデーションよりも立体感を生み出します。
「60pxグリッドマスク」＝双方向の1pxライン（#30363d 40%）+ 60px間隔 + 中央のみを残す radial mask。SKILL.md で固定定義された60pxと一致しています。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-cgrid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(48,54,61,.4) 1px,transparent 1px),linear-gradient(90deg,rgba(48,54,61,.4) 1px,transparent 1px);background-size:60px 60px;mask-image:radial-gradient(ellipse at center,black 35%,transparent 80%)}
グリッドは「エンジニアリング感」の演出に寄与しますが、マスクで外周に向かってフェードアウトさせることで本文の邪魔にならないようにしています。
「3色グラデーション見出し」＝linear-gradient(135deg, #a855f7 → #60a5fa → #34d399) + background-clip:text。紫→青→ミントグリーンの3色は、Claude や開発者エコシステムで定番の配色です。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-g{background:linear-gradient(135deg,#a855f7 0%,#60a5fa 55%,#34d399 100%);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
グラデーションは見出しテキストのみに適用し、本文は単色を保持することで、強調箇所を1点に絞り全体の散漫さを防ぎます。
「GitHub風コード + 紫左ボーダーハイライト」：コードブロックに #010409 の濃い背景色 + 4種のトークンクラス（.cp 緑 / .cc 青 / .ca 紫 / .cm 薄灰）を使用し、GitHub のシンタックスハイライト習慣を踏襲しています。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-code{background:#010409;border:1px solid var(--oc-border);border-radius:12px;padding:20px 24px;font-family:'JetBrains Mono',monospace;font-size:14px;line-height:1.85;width:100%;max-width:860px;text-align:left;color:#e6edf3}
この種のチュートリアルスライドではコードが主体コンテンツとなるため、馴染みのある配色を模倣することで読書コストを大幅に削減できます。
「紫色ピルタグ」＝カプセルタグ + 半透明の紫背景（rgba(124,58,237,.14)）+ 1pxの紫枠線でテーマ（MCP / agent など）を明記。また、ステータス表示用に4色のバッジ（.oc-bp/.oc-bb/.oc-bg/.oc-bo）も用意されています。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
.tpl-obsidian-claude-gradient .oc-tag{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--oc-accent3);background:rgba(124,58,237,.14);border:1px solid rgba(168,85,247,.3);padding:5px 16px;border-radius:999px;margin-bottom:22px}
タグはチュートリアルスライドのナビゲーションアンカーであり、読者はピルを見て「このページが何を扱っているか」を即座に判断できます。
ページ骨格は「製品プロモーション」ではなく「チュートリアル構成」：COVER / SECTION / 比較カード / 手順ページ / コードページ / STATS / QUOTE-CTA / THANKS であり、サンプルコンテンツは Obsidian を Claude Desktop に接続する MCP 設定チュートリアルとなっています。
next/src/lib/templates/skills/deck-obsidian-claude/example.html
<!-- 3. CONTENT — compare cards -->
frontmatter の scenario: engineering および tags（github, dark, purple, mcp, agent）が実際のコンテンツ形式に落とし込まれています。
ランタイム実行はホスト側が担当：テンプレートディレクトリ内に実行ファイルはゼロ、サンプル内の <script> もゼロ。プロンプトはホスト側で組み立てられた後、ローカル agent CLI に渡されます。
next/src/lib/agents/invoke.ts
import { spawn, type ChildProcessWithoutNullStreams } from "node:child_process";
skill 自体は純粋なプロンプト + 静的プレビュー素材に過ぎません。
2コア機能
01開発者向けチュートリアルスライドの位置付け（GitHub Blog / Linear Changelog に類似）
02GitHub-dark 背景 + 紫青 radial アンビエントライト + 60pxグリッドマスク
03中央寄せレイアウト + 紫色ピルタグ
043色グラデーション見出し（#a855f7 → #60a5fa → #34d399）
05GitHub風コードパレット（cp/cc/ca/cm 4種のトークン）
064色ステータスバッジ（紫/青/緑/橙の半透明カプセル）
07比較カードグリッド（2列 / 3列、中央揃え固定幅）
08ステップ手順および設定コードスライド（MCP サーバー設定例を含む）
3外部依存関係
| Kind | Dependency / Endpoint |
|---|---|
| network | Google Fonts（JetBrains Mono / Inter / Noto Sans SC） |
| network | 宿主共享指令声明的 Tailwind CDN（宿主侧要求，非本模板要求） |
| package | 示例配置文本里提到的 MCP server 包（仅作为教程代码示例出现，skill 不安装也不运行） |
4推奨統制措置と判定根拠
安全運用のための推奨統制措置
Agent 向け
自動ロード可能
管理者向け
ソースとバージョンの記録
判定根拠（ファイルパスと抜粋）
- SKILL.md: 純粋なプロンプト指示およびルールテキストのみで構成され、スクリプト実行や外部影響は一切ありません
監査ノート： 判定対象＝skill 自身のディレクトリ（next/src/lib/templates/skills/deck-obsidian-claude/）：ディレクトリ内には SKILL.md と example.html のみが存在し、.sh/.py/.mjs/.ts などの実行可能ファイル、package.json、インストールスクリプトは一切含まれていません。また、認証情報 / 環境変数 / cookie を読み取るコードやディスク書き込み命令も存在しません（HTML はモデルの応答本文として出力され、ディスク保存はホストフロントエンドが担当）。example 内の <script> 数＝0。SKILL.md は純粋なレイアウト・コンテンツ仕様であり、ランタイムでアクセスすべき生成バックエンドや API は指定されていません。第4バッチ基準（成果物の参照は判定対象外、純粋な指示テンプレートは green 判定）に基づき、本テンプレートは純粋指示型に分類されます。ディレクトリ内に実際に現れるエンドポイントは以下のみです（すべて成果物サンプルまたはそのメタデータに属し、ブラウザ側で取得されるものであり、skill コードが発信元ではありません）：127.0.0.1:27123（example.html 内に記載）、fonts.googleapis.com（example.html 内に記載）。ホスト側の挙動は評価対象外とし、verdict.risks に別途記録されています：convert ルートがローカル agent CLI を spawn して stdin 経由でプロンプトを渡す処理（next/src/lib/agents/invoke.ts）、共有指示による CDN からの Tailwind / Google Fonts 読み込み要請（next/src/lib/templates/shared.ts）、プレビュー用 iframe での sandbox="allow-scripts allow-same-origin" の使用（next/src/components/template-picker.tsx）。
5二重目の独立検証
- [ok] 示例中的 127.0.0.1:27123 是否构成网络调用 — 不构成。该字符串只出现在 <pre> 的 MCP 配置示例文本里（OBSIDIAN_HOST 的值）；全文件 <script> 计数为 0，没有 fetch/XHR/Image/iframe 等任何请求代码，也没有 WebSocket。它是教程文案，不是运行时外发。
- [ok] 「60px 网格 mask」是否兑现 — .oc-cgrid 的 background-size:60px 60px + mask-image radial-gradient，与 SKILL.md 的 60px 一致。
- [ok] 「三色渐变标题」是否为真渐变 — .oc-g 使用 #a855f7 → #60a5fa → #34d399 的 135° 渐变 + background-clip:text。
- [ok] 「GitHub 风代码 palette」是否真为四类 token — .cp / .cc / .ca / .cm 四个类分别对应绿 / 蓝 / 紫 / 暗灰，落在 #010409 深底代码块内。
- [ok] 教程内容中的凭据写法是否安全 — 配置示例的 OBSIDIAN_API_KEY 用 xxxxxxxxxxxxxxxx 占位，未嵌入任何真实密钥；这是示例文案的良好实践。
- [ok] 目录内是否有脚本 / 凭证读取 / 写盘 — 目录仅 SKILL.md + example.html；<script> 计数 0；无 env/凭证访问代码、无写盘代码。
- [ok] pin commit 与路径 — HEAD = 553ed98c283f9c0f489902d035416a972d6a9699；skill.path = next/src/lib/templates/skills/deck-obsidian-claude，含 SKILL.md。
6結論
最適な用途： 開発者ツールチュートリアル、インテグレーションガイド、Changelog 風の更新履歴説明、MCP / agent エコシステムコンテンツなど、「GitHub Blog のルック＆フィール + コード掲載」が求められるシナリオに最適です。
不向きな用途： ライトテーマのブランドやフォーマルなビジネス用途（GitHub Dark がハードコードされているため）、マーケティング向けの発表（大きな画像やアニメーションがなく、コードや手順がメイン）、高精度な印刷納品物には不向きです。
Install Agent-Ready
① Verified Mirror 2026-09-15
Option A · Direct DownloadDownload deck-obsidian-claude.tar.gz
sha256:
Option B · Copy Guide for Agentb2eadd1665cf47d9…Agent はこの JSON ガイドから自動的にダウンロードして検証します。
② Upstream GitHub
GitHub Repo ↗
Pinned to commit 553ed98c28.