初回コミット: パーソナル図解ツールキット

Made-with: Cursor

sample/majiai-diagram/.claude/skills/diagram-maji/references/character-usage.md

@@ -0,0 +1,166 @@
+# キャラクター利用ガイド
+
+## キャラクターの役割
+
+| キャラクター | 役割 | 職業 |
+|------------|------|------|
+| **マジくん** | 読者の代弁者。技術に詳しくない視点で疑問を投げかける | マーケティングアシスタント（非エンジニア） |
+| **マスター** | 導き手。本質を平易に説明する | 喫茶店マスター兼AI活用のプロ |
+
+---
+
+## 表情の使い分け
+
+### マジくん（10種類）
+
+| 表情 | ファイル名 | 使用シーン |
+|-----|----------|----------|
+| 標準 | `マジくん-標準-512×512-透過.png` | 通常の発言 |
+| 驚き | `マジくん-驚き-512×512-透過.png` | 新しい発見、「マジ？」 |
+| マジ？ | `マジくん-マジ？-512×512-透過.png` | 心底驚いたとき |
+| 調子に乗ってる | `マジくん-調子に乗ってる-512×512-透過.png` | 理解した気になっている |
+| 疑っている | `マジくん-疑っている-512×512-透過.png` | 半信半疑、ケチをつける |
+| 強く反発する | `マジくん-強く反発する-512×512-透過.png` | 納得いかない |
+| 焦り | `マジくん-焦り-512×512-透過.png` | 困っている |
+| ひどく慌てている | `マジくん-ひどく慌てている-512×512-透過.png` | パニック |
+| 涙ぐむ | `マジくん-涙ぐむ-512×512-透過.png` | 落ち込み、感動 |
+| 自信がない、落ち込んでいる | `マジくん-自信がない、落ち込んでいる-512×512-透過.png` | 失敗、挫折 |
+
+### マスター（4種類）
+
+| 表情 | ファイル名 | 使用シーン |
+|-----|----------|----------|
+| 標準 | `マスター-標準-512×512-透過.png` | 通常の説明 |
+| 諭す | `マスター-諭す-512×512-透過.png` | 重要なポイント、本質を伝える |
+| 思考、分析 | `マスター-思考、分析-512×512-透過.png` | 考え中、深い話 |
+| 真顔 | `マスター-真顔-512×512-透過.png` | 厳しい指摘 |
+
+---
+
+## 対話パターン
+
+### 1. 導入パターン（疑問→答え）
+
+```html
+<!-- マジくん: 疑問を投げかける -->
+<div class="flex items-start gap-4 mb-6">
+  <img src="./images/マジくん-疑っている-512×512-透過.png" 
+       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
+  <div class="char-bubble maji-bubble flex-1">
+    <p class="text-lg">
+      <span class="font-bold text-amber-700">マジくん:</span><br>
+      「フック」って何ですか？プログラムに釣り針でも刺すんですか？
+    </p>
+  </div>
+</div>
+
+<!-- マスター: 本質を説明 -->
+<div class="flex items-start gap-4 mb-6">
+  <img src="./images/マスター-諭す-512×512-透過.png" 
+       alt="マスター" class="w-20 h-20 object-contain flex-shrink-0">
+  <div class="char-bubble master-bubble flex-1">
+    <p class="text-lg">
+      <span class="font-bold text-blue-700">マスター:</span><br>
+      良い質問ですね。フックとは「割り込みポイント」のこと。
+      会社のセキュリティゲートを想像してください。
+    </p>
+  </div>
+</div>
+```
+
+### 2. 驚きパターン（発見の瞬間）
+
+```html
+<div class="flex items-start gap-4 mb-6">
+  <img src="./images/マジくん-驚き-512×512-透過.png" 
+       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
+  <div class="char-bubble maji-bubble flex-1">
+    <p class="text-lg">
+      <span class="font-bold text-amber-700">マジくん:</span><br>
+      マジ？<br>
+      つまり、AIが何かする前に「ちょっと待って！」って止められるんですね！
+    </p>
+  </div>
+</div>
+```
+
+### 3. まとめパターン（理解の確認）
+
+```html
+<div class="flex items-start gap-4 mb-6">
+  <img src="./images/マスター-標準-512×512-透過.png" 
+       alt="マスター" class="w-20 h-20 object-contain flex-shrink-0">
+  <div class="char-bubble master-bubble flex-1">
+    <p class="text-lg">
+      <span class="font-bold text-blue-700">マスター:</span><br>
+      その通りです。整理すると、フックには3つの役割があります。
+    </p>
+  </div>
+</div>
+
+<div class="flex items-start gap-4 mb-6">
+  <img src="./images/マジくん-調子に乗ってる-512×512-透過.png" 
+       alt="マジくん" class="w-20 h-20 object-contain flex-shrink-0">
+  <div class="char-bubble maji-bubble flex-1">
+    <p class="text-lg">
+      <span class="font-bold text-amber-700">マジくん:</span><br>
+      これでボクも次期OpenAIのCEO候補ですね！
+    </p>
+  </div>
+</div>
+```
+
+---
+
+## セリフの書き方
+
+### マジくんの特徴
+
+- **一人称**: 「ボク」
+- **基本**: 丁寧語（「〜です」「〜ます」）
+- **反発時**: やや格式高い表現
+- **驚き**: 「マジ？」（心底驚いた時のみ単独で使用）
+- **大袈裟な比喩**: 感情的になると誇張表現
+
+```
+❌ 悪い例: 「すごいね！」「わかった！」
+✅ 良い例: 「これは人類の転換点かもしれません！」「ボクのキャリアに光が差しました！」
+```
+
+### マスターの特徴
+
+- **一人称**: 「私」
+- **口調**: 常に丁寧語、タメ口は使わない
+- **説明**: たとえ話を必ず使う
+- **名前呼び**: 「マジさん」
+
+```
+❌ 悪い例: 「それは違う」「こうだ」
+✅ 良い例: 「その発言は、マジさんがまだ本質を理解できていない証拠ですね」
+```
+
+---
+
+## 配置ルール
+
+1. **対話シーンでは左右固定しない**: 上から順に配置
+2. **画像サイズ**: `w-20 h-20`（80px）が基本
+3. **吹き出しの向き**: 画像側に尖端
+4. **余白**: `gap-4`、`mb-6` で統一
+
+---
+
+## 画像パス
+
+HTML内での参照パス:
+
+```html
+./images/マジくん-{表情}-512×512-透過.png
+./images/マスター-{表情}-512×512-透過.png
+```
+
+デプロイ時にコピー元:
+
+```
+docs/design/charactor-images/square/512px/
+```

sample/majiai-diagram/.claude/skills/diagram-maji/references/exemplar.md

@@ -0,0 +1,230 @@
+# 模範解答パターン
+
+## 成功する図解の構造
+
+```
+1. ヘッダー（グラデーション背景）
+   └─ タイトル + サブタイトル
+
+2. 導入（キャラクター対話）
+   └─ マジくん: 「〇〇って何ですか？」
+   └─ マスター: たとえ話で概要説明
+
+3. 用語解説ボックス
+   └─ 最初に出てくる技術用語を全て解説
+
+4. まず覚える3つ
+   └─ 絞り込んだ最重要ポイント
+   └─ 重要度バッジ（必須/推奨/任意）
+
+5. 各セクション詳細
+   └─ セクションカード形式
+   └─ Lucide iconでビジュアル化
+   └─ たとえ話で補足
+   └─ コード例の前に日本語解説
+
+6. まとめ（キャラクター対話）
+   └─ マスター: 要点を3つで整理
+   └─ マジくん: 理解の確認
+
+7. 目次（フローティング）
+   └─ デスクトップのみ表示
+```
+
+---
+
+## 「まず覚える3つ」の書き方
+
+```html
+<div class="section-card">
+  <div class="flex items-center gap-3 mb-6">
+    <div class="w-12 h-12 bg-gradient-to-br from-rose-500 to-pink-500 rounded-xl flex items-center justify-center">
+      <i data-lucide="star" class="w-6 h-6 text-white"></i>
+    </div>
+    <div>
+      <h2 class="text-2xl font-bold text-gray-800">まず覚える3つ</h2>
+      <p class="text-gray-500">最初はこれだけでOK！</p>
+    </div>
+  </div>
+
+  <div class="grid gap-4">
+    <!-- 1つ目 -->
+    <div class="flex items-start gap-4 p-4 bg-gradient-to-r from-red-50 to-red-100 rounded-xl border-l-4 border-red-500">
+      <div class="w-10 h-10 bg-red-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">1</div>
+      <div>
+        <div class="flex items-center gap-2 mb-1">
+          <span class="font-bold text-lg text-gray-800">PreToolUse</span>
+          <span class="badge-essential">必須</span>
+        </div>
+        <p class="text-gray-600">ツールが実行される<strong>前</strong>にチェック。「本当にやっていい？」と確認する門番。</p>
+      </div>
+    </div>
+
+    <!-- 2つ目 -->
+    <div class="flex items-start gap-4 p-4 bg-gradient-to-r from-blue-50 to-blue-100 rounded-xl border-l-4 border-blue-500">
+      <div class="w-10 h-10 bg-blue-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">2</div>
+      <div>
+        <div class="flex items-center gap-2 mb-1">
+          <span class="font-bold text-lg text-gray-800">PostToolUse</span>
+          <span class="badge-recommended">推奨</span>
+        </div>
+        <p class="text-gray-600">ツールが実行された<strong>後</strong>に確認。結果をログに残したり、通知を送ったり。</p>
+      </div>
+    </div>
+
+    <!-- 3つ目 -->
+    <div class="flex items-start gap-4 p-4 bg-gradient-to-r from-green-50 to-green-100 rounded-xl border-l-4 border-green-500">
+      <div class="w-10 h-10 bg-green-500 text-white rounded-full flex items-center justify-center font-bold text-lg flex-shrink-0">3</div>
+      <div>
+        <div class="flex items-center gap-2 mb-1">
+          <span class="font-bold text-lg text-gray-800">Stop</span>
+          <span class="badge-optional">任意</span>
+        </div>
+        <p class="text-gray-600">AIが作業を終えるとき。「お疲れ様、次はこれをやってね」とフォローアップを追加。</p>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## たとえ話の展開パターン
+
+### パターン1: 会社のセキュリティゲート
+
+```html
+<div class="bg-gradient-to-r from-amber-50 to-orange-50 p-6 rounded-xl border border-amber-200 my-6">
+  <div class="flex items-center gap-2 mb-3">
+    <i data-lucide="building-2" class="w-6 h-6 text-amber-600"></i>
+    <span class="font-bold text-amber-800">たとえ話：会社のセキュリティゲート</span>
+  </div>
+  <div class="space-y-3 text-gray-700">
+    <p>あなたが会社に出勤するとき、入口にはセキュリティゲートがありますよね。</p>
+    <ul class="list-disc list-inside space-y-1 ml-2">
+      <li><strong>社員証をかざす</strong> → 本人確認（PreToolUse）</li>
+      <li><strong>ゲートが開く</strong> → 許可された行動が実行される</li>
+      <li><strong>入館記録が残る</strong> → ログ記録（PostToolUse）</li>
+    </ul>
+    <p>フックは、この<strong>セキュリティゲートのような役割</strong>をプログラムの中で果たします。</p>
+  </div>
+</div>
+```
+
+### パターン2: スマホの権限ダイアログ
+
+```html
+<div class="bg-gradient-to-r from-blue-50 to-indigo-50 p-6 rounded-xl border border-blue-200 my-6">
+  <div class="flex items-center gap-2 mb-3">
+    <i data-lucide="smartphone" class="w-6 h-6 text-blue-600"></i>
+    <span class="font-bold text-blue-800">たとえ話：スマホの権限ダイアログ</span>
+  </div>
+  <div class="space-y-3 text-gray-700">
+    <p>スマホでアプリを使うとき、こんな画面を見たことありませんか？</p>
+    <div class="bg-white p-4 rounded-lg border text-center my-3">
+      「カメラへのアクセスを許可しますか？」<br>
+      <span class="text-blue-600">[許可する]</span> / <span class="text-gray-500">[許可しない]</span>
+    </div>
+    <p>これがまさに<strong>PreToolUse</strong>の動き！</p>
+    <ul class="list-disc list-inside space-y-1 ml-2">
+      <li><strong>許可する</strong> → allow（実行OK）</li>
+      <li><strong>許可しない</strong> → deny（実行NG）</li>
+      <li><strong>毎回確認する</strong> → ask（ユーザーに聞く）</li>
+    </ul>
+  </div>
+</div>
+```
+
+---
+
+## 詳細セクションの書き方
+
+```html
+<div class="section-card" id="pretooluse">
+  <!-- セクションヘッダー -->
+  <div class="flex items-center gap-3 mb-6">
+    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+      <i data-lucide="shield-check" class="w-6 h-6 text-blue-600"></i>
+    </div>
+    <div>
+      <h2 class="text-2xl font-bold text-gray-800">PreToolUse</h2>
+      <p class="text-gray-500">ツール実行前のチェックポイント</p>
+    </div>
+  </div>
+
+  <!-- キャラクター対話 -->
+  <div class="flex items-start gap-4 mb-6">
+    <img src="./images/マジくん-疑っている-512×512-透過.png" 
+         alt="マジくん" class="w-16 h-16 object-contain flex-shrink-0">
+    <div class="char-bubble maji-bubble flex-1">
+      <p>「Pre」って「前」という意味ですよね？つまり、ツールを使う前に何かするってことですか？</p>
+    </div>
+  </div>
+
+  <div class="flex items-start gap-4 mb-6">
+    <img src="./images/マスター-諭す-512×512-透過.png" 
+         alt="マスター" class="w-16 h-16 object-contain flex-shrink-0">
+    <div class="char-bubble master-bubble flex-1">
+      <p>その通りです。AIが何かツールを使おうとしたとき、<strong>実行する前に「ちょっと待って」と割り込める</strong>ポイントです。</p>
+    </div>
+  </div>
+
+  <!-- 本文 -->
+  <div class="space-y-4">
+    <h3 class="text-xl font-bold text-gray-700 flex items-center gap-2">
+      <i data-lucide="target" class="w-5 h-5 text-blue-500"></i>
+      何ができるの？
+    </h3>
+    <ul class="space-y-2">
+      <li class="flex items-start gap-2">
+        <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
+        <span>特定のツールの使用を<strong>禁止</strong>できる</span>
+      </li>
+      <li class="flex items-start gap-2">
+        <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
+        <span>ツールに渡す<strong>入力内容を変更</strong>できる</span>
+      </li>
+      <li class="flex items-start gap-2">
+        <i data-lucide="check" class="w-5 h-5 text-green-500 flex-shrink-0 mt-0.5"></i>
+        <span>ユーザーに<strong>確認を求める</strong>ことができる</span>
+      </li>
+    </ul>
+  </div>
+
+  <!-- コード例 -->
+  <div class="mt-6">
+    <div class="flex items-center gap-2 mb-2">
+      <i data-lucide="code" class="w-5 h-5 text-purple-500"></i>
+      <span class="font-bold text-gray-700">このコードがやること</span>
+    </div>
+    <p class="text-gray-600 mb-3">
+      「Writeツール（ファイルを書き込む道具）」が使われそうになったら、
+      <span class="font-bold text-red-600">許可しない</span>というルールを設定しています。
+    </p>
+    <div class="code-block">
+      <pre><code>hook.onPreToolUse((event) => {
+  if (event.toolName === 'Write') {
+    return { permissionDecision: 'deny' };
+  }
+});</code></pre>
+    </div>
+  </div>
+</div>
+```
+
+---
+
+## 品質チェックリスト
+
+作成後、以下を確認：
+
+- [ ] 全ての技術用語に用語解説ボックスがある
+- [ ] たとえ話が3つ以上ある
+- [ ] 導入・中間・まとめにキャラクター対話がある
+- [ ] 「まず覚える3つ」がある
+- [ ] コード例の前に「このコードがやること」がある
+- [ ] Lucide iconのみ使用（絵文字なし）
+- [ ] 本気AIブランドカラーが適用されている
+- [ ] キャラクター画像のパスが正しい
+- [ ] スマホで読みやすい（レスポンシブ）
+- [ ] 目次がフローティング表示される（デスクトップ）

sample/majiai-diagram/.claude/skills/diagram-maji/references/html-structure.md

@@ -0,0 +1,280 @@
+# HTML構造ガイド
+
+## 基本テンプレート
+
+```html
+<!DOCTYPE html>
+<html lang="ja">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>【図解タイトル】- 本気AI</title>
+  <script src="https://cdn.tailwindcss.com"></script>
+  <script src="https://unpkg.com/lucide@latest"></script>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
+  <style>
+    /* 本気AIブランドカラー */
+    :root {
+      --majiai-primary: hsl(343, 85%, 45%);
+      --majiai-secondary: hsl(213, 63%, 38%);
+      --majiai-gradient: linear-gradient(90deg, #24609E, #D60C52);
+    }
+    
+    body {
+      font-family: 'Noto Sans JP', 'Inter', sans-serif;
+    }
+
+    /* ヘッダーグラデーション */
+    .header-gradient {
+      background: var(--majiai-gradient);
+    }
+
+    /* セクションカード */
+    .section-card {
+      background: white;
+      border-radius: 1rem;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      padding: 2rem;
+      margin-bottom: 2rem;
+    }
+
+    /* 用語解説ボックス */
+    .term-explain {
+      background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+      border-left: 4px solid #9333ea;
+      padding: 1.5rem;
+      border-radius: 0.75rem;
+      margin: 1.5rem 0;
+    }
+
+    /* キャラクター吹き出し */
+    .char-bubble {
+      position: relative;
+      padding: 1.5rem;
+      border-radius: 1rem;
+      margin-left: 1rem;
+    }
+    .char-bubble::before {
+      content: '';
+      position: absolute;
+      left: -10px;
+      top: 20px;
+      border-width: 10px;
+      border-style: solid;
+    }
+    .maji-bubble {
+      background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
+      border: 2px solid #f59e0b;
+    }
+    .maji-bubble::before {
+      border-color: transparent #f59e0b transparent transparent;
+    }
+    .master-bubble {
+      background: linear-gradient(135deg, #dbeafe 0%, #bfdbfe 100%);
+      border: 2px solid #3b82f6;
+    }
+    .master-bubble::before {
+      border-color: transparent #3b82f6 transparent transparent;
+    }
+
+    /* 重要度バッジ */
+    .badge-essential {
+      background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    .badge-recommended {
+      background: linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+    .badge-optional {
+      background: linear-gradient(135deg, #6b7280 0%, #9ca3af 100%);
+      color: white;
+      padding: 0.25rem 0.75rem;
+      border-radius: 9999px;
+      font-size: 0.875rem;
+      font-weight: 600;
+    }
+
+    /* コードブロック */
+    .code-block {
+      background: #1e293b;
+      color: #e2e8f0;
+      padding: 1.5rem;
+      border-radius: 0.75rem;
+      overflow-x: auto;
+      font-family: 'Fira Code', monospace;
+      font-size: 0.875rem;
+      line-height: 1.7;
+    }
+
+    /* 目次 */
+    .toc {
+      position: fixed;
+      right: 2rem;
+      top: 50%;
+      transform: translateY(-50%);
+      background: white;
+      padding: 1rem;
+      border-radius: 0.75rem;
+      box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+      max-height: 80vh;
+      overflow-y: auto;
+      z-index: 50;
+    }
+    @media (max-width: 1280px) {
+      .toc { display: none; }
+    }
+  </style>
+</head>
+<body class="bg-gray-50">
+  <!-- ヘッダー -->
+  <header class="header-gradient text-white py-8">
+    <div class="max-w-4xl mx-auto px-4">
+      <h1 class="text-3xl md:text-4xl font-bold">【タイトル】</h1>
+      <p class="mt-2 text-lg opacity-90">サブタイトル</p>
+    </div>
+  </header>
+
+  <!-- メインコンテンツ -->
+  <main class="max-w-4xl mx-auto px-4 py-8">
+    <!-- セクション例 -->
+  </main>
+
+  <!-- Lucide初期化 -->
+  <script>
+    lucide.createIcons();
+  </script>
+</body>
+</html>
+```
+
+---
+
+## Lucide Icon の使い方
+
+### 基本構文
+
+```html
+<i data-lucide="icon-name" class="w-6 h-6"></i>
+```
+
+### よく使うアイコン
+
+| 用途 | アイコン名 | コード |
+|-----|----------|--------|
+| 重要 | `alert-circle` | `<i data-lucide="alert-circle" class="w-6 h-6 text-red-500"></i>` |
+| ヒント | `lightbulb` | `<i data-lucide="lightbulb" class="w-6 h-6 text-yellow-500"></i>` |
+| チェック | `check-circle` | `<i data-lucide="check-circle" class="w-6 h-6 text-green-500"></i>` |
+| 情報 | `info` | `<i data-lucide="info" class="w-6 h-6 text-blue-500"></i>` |
+| 警告 | `triangle-alert` | `<i data-lucide="triangle-alert" class="w-6 h-6 text-orange-500"></i>` |
+| 設定 | `settings` | `<i data-lucide="settings" class="w-6 h-6 text-gray-500"></i>` |
+| コード | `code` | `<i data-lucide="code" class="w-6 h-6 text-purple-500"></i>` |
+| ファイル | `file-text` | `<i data-lucide="file-text" class="w-6 h-6 text-blue-500"></i>` |
+| フォルダ | `folder` | `<i data-lucide="folder" class="w-6 h-6 text-yellow-600"></i>` |
+| 矢印 | `arrow-right` | `<i data-lucide="arrow-right" class="w-6 h-6"></i>` |
+| ユーザー | `user` | `<i data-lucide="user" class="w-6 h-6"></i>` |
+| ロック | `lock` | `<i data-lucide="lock" class="w-6 h-6 text-gray-600"></i>` |
+| 鍵 | `key` | `<i data-lucide="key" class="w-6 h-6 text-yellow-500"></i>` |
+| 許可 | `shield-check` | `<i data-lucide="shield-check" class="w-6 h-6 text-green-500"></i>` |
+| 禁止 | `shield-x` | `<i data-lucide="shield-x" class="w-6 h-6 text-red-500"></i>` |
+| 質問 | `help-circle` | `<i data-lucide="help-circle" class="w-6 h-6 text-blue-500"></i>` |
+| 本 | `book-open` | `<i data-lucide="book-open" class="w-6 h-6 text-indigo-500"></i>` |
+| 学習 | `graduation-cap` | `<i data-lucide="graduation-cap" class="w-6 h-6 text-purple-500"></i>` |
+| ツール | `wrench` | `<i data-lucide="wrench" class="w-6 h-6 text-gray-600"></i>` |
+| プレイ | `play` | `<i data-lucide="play" class="w-6 h-6 text-green-500"></i>` |
+| 停止 | `square` | `<i data-lucide="square" class="w-6 h-6 text-red-500"></i>` |
+
+### セクションヘッダーでの使用例
+
+```html
+<div class="section-card">
+  <div class="flex items-center gap-3 mb-6">
+    <div class="w-12 h-12 bg-blue-100 rounded-xl flex items-center justify-center">
+      <i data-lucide="shield-check" class="w-6 h-6 text-blue-600"></i>
+    </div>
+    <div>
+      <h2 class="text-2xl font-bold text-gray-800">セクションタイトル</h2>
+      <p class="text-gray-500">サブタイトル</p>
+    </div>
+  </div>
+  <!-- コンテンツ -->
+</div>
+```
+
+---
+
+## コード例の前の日本語解説
+
+コードを見せる前に、必ず「このコードが何をするのか」を日本語で説明する。
+
+### ❌ 悪い例
+
+```html
+<div class="code-block">
+  <pre><code>
+hook.onPreToolUse((event) => {
+  if (event.toolName === 'Write') {
+    return { permissionDecision: 'deny' };
+  }
+});
+  </code></pre>
+</div>
+```
+
+### ✅ 良い例
+
+```html
+<div class="mb-4">
+  <div class="flex items-center gap-2 mb-2">
+    <i data-lucide="code" class="w-5 h-5 text-purple-500"></i>
+    <span class="font-bold text-gray-700">このコードがやること</span>
+  </div>
+  <p class="text-gray-600 ml-7">
+    「Writeツール（ファイルを書き込む道具）が使われそうになったら、
+    <span class="font-bold text-red-600">許可しない</span>」というルールを設定しています。
+  </p>
+</div>
+<div class="code-block">
+  <pre><code>
+hook.onPreToolUse((event) => {
+  if (event.toolName === 'Write') {
+    return { permissionDecision: 'deny' };
+  }
+});
+  </code></pre>
+</div>
+```
+
+---
+
+## フローチャートの表現
+
+```html
+<div class="flex flex-col md:flex-row items-center justify-center gap-4 my-8">
+  <div class="bg-blue-100 px-6 py-4 rounded-xl text-center">
+    <i data-lucide="play" class="w-8 h-8 text-blue-600 mx-auto mb-2"></i>
+    <div class="font-bold">開始</div>
+  </div>
+  <i data-lucide="arrow-right" class="w-8 h-8 text-gray-400 hidden md:block"></i>
+  <i data-lucide="arrow-down" class="w-8 h-8 text-gray-400 md:hidden"></i>
+  <div class="bg-yellow-100 px-6 py-4 rounded-xl text-center">
+    <i data-lucide="shield-check" class="w-8 h-8 text-yellow-600 mx-auto mb-2"></i>
+    <div class="font-bold">チェック</div>
+  </div>
+  <i data-lucide="arrow-right" class="w-8 h-8 text-gray-400 hidden md:block"></i>
+  <i data-lucide="arrow-down" class="w-8 h-8 text-gray-400 md:hidden"></i>
+  <div class="bg-green-100 px-6 py-4 rounded-xl text-center">
+    <i data-lucide="check-circle" class="w-8 h-8 text-green-600 mx-auto mb-2"></i>
+    <div class="font-bold">完了</div>
+  </div>
+</div>
+```

sample/majiai-diagram/.claude/skills/diagram-maji/references/term-dictionary.md

@@ -0,0 +1,100 @@
+# 技術用語→やさしい言葉 変換辞書
+
+## 変換の原則
+
+1. **機能で命名する**: 「何をするものか」で名前をつける
+2. **身近な比喩を添える**: 日常生活での類似物を示す
+3. **初出時に解説ボックス**: 最初に出てきたとき必ず説明
+
+---
+
+## よく使う変換表
+
+### プログラミング基礎
+
+| 技術用語 | やさしい言葉 | たとえ |
+|---------|------------|--------|
+| コールバック関数 | チェック係 | 「何かあったら呼んでね」と登録しておく処理。電話の折り返しと同じ |
+| API | 窓口 | 銀行の窓口。決まった書類を出すと、決まったサービスを受けられる |
+| インターフェース | 約束事 | 「この形式で頼めば対応します」というルール |
+| パラメータ | 指示内容 | 注文票に書く内容 |
+| 引数 | 渡す情報 | 窓口に提出する書類 |
+| 戻り値 | 受け取る結果 | 窓口から返ってくる書類 |
+| 変数 | 名前付きの箱 | ラベルを貼った引き出し |
+| 関数 | 処理の塊 | 自動販売機（入れると出てくる） |
+
+### 非同期・イベント
+
+| 技術用語 | やさしい言葉 | たとえ |
+|---------|------------|--------|
+| 非同期処理 | 待たずに進む処理 | レストランで注文後、席で待つ。厨房の前で立ち尽くさない |
+| イベント | きっかけ | ドアベルが鳴る、ボタンを押す |
+| リスナー | 見張り役 | インターホンの前で待機している人 |
+| トリガー | 発動条件 | 「このボタンを押したら」という条件 |
+| フック | 割り込みポイント | 会社のセキュリティゲート |
+| ハンドラ | 対応係 | イベントが起きたとき対応する担当者 |
+
+### データ・構造
+
+| 技術用語 | やさしい言葉 | たとえ |
+|---------|------------|--------|
+| JSON | データの書き方 | 住所録の書式 |
+| オブジェクト | 情報のまとまり | 名刺1枚（名前、電話番号、住所がセット） |
+| 配列 | 順番付きリスト | 番号札のついた待合室の椅子 |
+| スキーマ | 設計図 | 入力フォームの項目一覧 |
+| バリデーション | 入力チェック | 書類の不備確認 |
+
+### セキュリティ・権限
+
+| 技術用語 | やさしい言葉 | たとえ |
+|---------|------------|--------|
+| 認証 | 本人確認 | パスポートを見せる |
+| 認可 | 許可 | 「この部屋に入っていいですよ」というOK |
+| トークン | 入場券 | 映画のチケット |
+| セッション | 接続状態 | 電話がつながっている間 |
+| パーミッション | 権限 | 「閲覧OK、編集NG」のような許可レベル |
+
+### AI・エージェント
+
+| 技術用語 | やさしい言葉 | たとえ |
+|---------|------------|--------|
+| プロンプト | 指示文 | AIへの依頼書 |
+| ストリーミング | 逐次表示 | 手紙を1文字ずつ読み上げる |
+| コンテキスト | 文脈・前提情報 | 会話の流れ、今までの話 |
+| エージェント | 自動で動くAI | 自分で判断して動く秘書 |
+| ツール | AIが使える道具 | 秘書が使えるファイル、電話、パソコン |
+
+---
+
+## 用語解説ボックスの書き方
+
+```html
+<div class="term-explain">
+  <div class="flex items-start gap-4">
+    <i data-lucide="lightbulb" class="w-8 h-8 text-purple-500"></i>
+    <div>
+      <div class="term-word text-xl font-bold">「コールバック関数」とは？</div>
+      <div class="term-meaning text-lg mt-2">
+        難しそうな名前ですが、要は<span class="font-bold text-purple-600">「呼び出されたときに実行される処理」</span>のこと。<br>
+        電話の「コールバック（折り返し電話）」と同じで、「何かあったら呼んでね」と登録しておく処理です。<br>
+        <span class="font-bold">この図解では「チェック係」と呼びます。</span>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+### CSS
+
+```css
+.term-explain {
+  background: linear-gradient(135deg, #f3e8ff 0%, #e9d5ff 100%);
+  border-left: 4px solid #9333ea;
+  padding: 1.5rem;
+  border-radius: 0.75rem;
+  margin: 1.5rem 0;
+}
+.term-word {
+  color: #7c3aed;
+}
+```