Slidev のデザインシステムを CSS変数と CLAUDE.md で作る：移植が簡単

/* style.css：色・サイズ・余白を「変数」で一箇所に集める（これが土台の全部） */
:root {
  /* ブランド色 */
  --navy-900: #0B1F3A;   /* メインの濃いネイビー */
  --navy-700: #1B3357;
  --navy-300: #93A8C4;
  --bg-white: #FFFFFF;
  --bg-light: #F6F8FB;
  --text-primary:   #1E293B;
  --text-secondary: #475569;
  --text-muted:     #64748B;
  --accent:      #C2410C;   /* 抑えた朱。強調はこの1色だけ */
  --accent-soft: rgba(194, 65, 12, 0.10);
  --border-light: #E2E8F0;

  /* Notice 用の「意味の色」 */
  --info:    #1D4ED8;  --info-bg:    #EFF4FF;
  --warning: #B45309;  --warning-bg: #FFF7ED;
  --success: #15803D;  --success-bg: #ECFDF3;
  --danger:  #B91C1C;  --danger-bg:  #FEF2F2;

  /* コード表示（ネイビー地。暗地は朱が沈むので明色を別建て） */
  --code-bg: var(--navy-900);  --code-bar: var(--navy-700);
  --code-text: #E8EEF6;  --code-comment: #93A8C4;  --code-accent: #FFB27A;

  /* サイズ・余白 */
  --font-body:    20px;   /* 本文。19px は下回らない */
  --font-lead:    24px;
  --font-heading: 35px;
  --space-sm: 8px;  --space-md: 16px;  --space-lg: 24px;
}

/* 全スライド共通の「地」。.slidev-layout に一度だけ当てる */
.slidev-layout {
  font-family: 'Noto Sans JP', sans-serif;
  background: var(--bg-white);
  color: var(--text-primary);
  font-size: var(--font-body);
  line-height: 1.6;
}

<!-- layouts/centered.vue：縦中央そろえ。UnoCSS だけ、scoped CSS なし -->
<template>
  <div class="slidev-layout h-full flex flex-col justify-center px-14 py-10">
    <slot />
  </div>
</template>

<!-- layouts/fixed-header.vue：上部固定ヘッダ＋本文。複雑なので <style> で構造を組む -->
<script setup>
defineProps({ heading: String, kicker: String })
</script>

<template>
  <div class="slide-with-fixed-header">
    <header class="slide-fixed-header">
      <h2 class="header-heading">{{ heading }}</h2>
      <span class="header-kicker">{{ kicker }}</span>
    </header>
    <main class="slide-body"><slot /></main>
  </div>
</template>

<style>
.slide-with-fixed-header { height: 100%; display: flex; flex-direction: column; }

/* 上部に固定する帯。色は当然トークン参照（生 HEX は書かない） */
.slide-fixed-header {
  height: 64px;
  background: linear-gradient(90deg, var(--navy-900), var(--navy-700));
  color: #fff;
  display: flex; align-items: center; padding: 0 40px;
}

/* 残りを本文に。flex:1 で高さを埋める＝縦の中身を扱いやすくなる */
.slide-body { flex: 1; padding: 36px 44px; font-size: var(--font-body); }
</style>

---
layout: fixed-header
heading: 監視の3本柱
kicker: basics
---

<!-- components/PointCard.vue：scoped CSS は書かず UnoCSS。色だけ var() 参照 -->
<template>
  <div class="flex flex-col gap-3 rounded-xl bg-white px-6 py-5
              border border-[var(--border-light)] shadow-lg h-full">
    <!-- ラベルの背景色も、トークンから選ぶだけ（朱 or ネイビー） -->
    <span :class="tone === 'accent' ? 'bg-[var(--accent)]' : 'bg-[var(--navy-900)]'">
      {{ label }}
    </span>
    <div class="text-[var(--text-primary)]"><slot /></div>
  </div>
</template>

---
layout: fixed-header
heading: 監視の3本柱
kicker: basics
---

<div class="flex-1 flex flex-col justify-center">
<div class="grid grid-cols-3 gap-6">

<PointCard label="Logs" tone="navy">

「何が起きたか」の記録。まずはエラーログを1か所に集約する

</PointCard>

<PointCard label="Metrics" tone="accent">

「どれくらいか」の数値。レイテンシ・エラー率・飽和度を継続観測

</PointCard>

<PointCard label="Traces" tone="navy">

「どこで遅いか」の経路。リクエストをサービス横断で追う

</PointCard>

</div>
</div>

# スライド作成ルール（Slidev デザインシステム）

このプロジェクトのスライドは、**1つの統一されたデザインシステム**の内側だけで作る。
AI（Claude Code）はスライドを生成・編集するとき、**必ず以下のルールに従う**こと。
このファイルごと渡せば、別プロジェクトにも同じシステムを移植できる（それが狙い）。

---

## 0. 大原則：自由に書かせない（制約が速さを生む）

- 色・サイズ・余白・アイコンを**その場で勝手に決めない**。下のトークン／ルールの中からだけ選ぶ。
- 「いい感じに」ではなく「**この枠の中で**」。選択肢を絞るほど出力は安定する。
- 迷ったら**増やさず減らす**。強調は1色、レイアウトは既存の型を優先。

## 1. 色（トークン）

- 色は `style.css` の `:root` で定義した **CSS変数だけ**を使う。生 HEX の直書きは**禁止**。
- 必ず `var(--xxx)` 経由で指定する（UnoCSS なら `bg-[var(--accent)]` のように arbitrary value で参照）。
- 使える色：
  - 背景：`--bg-white` / `--bg-light`
  - 文字：`--text-primary` / `--text-secondary` / `--text-muted`
  - ネイビー：`--navy-900` / `--navy-700` / `--navy-300`
  - 強調：`--accent`（抑えた朱）/ `--accent-soft`
  - 罫線：`--border-light`
  - コード（ネイビー地）：`--code-bg` / `--code-bar` / `--code-text` / `--code-comment` / `--code-accent`（暗地は朱が沈むので強調は明るい朱橙の `--code-accent` を使う）
- **強調色は3色まで**。基本は朱 `--accent` の1色で十分。色数を増やすと「どこが大事か」が消える。

## 2. サイズ・余白（トークン）

- フォントサイズは `--font-*` を使う。**本文は `--font-body`（19px は下回らない）**。投影・配信で読めるラインを守る。
  - `--font-body` / `--font-lead` / `--font-heading`
- 余白は `--space-*`（`--space-sm` / `--space-md` / `--space-lg`）を使う。刻みを揃える。
- UnoCSS を使う場合は既製スケールに乗ってよい（**本文は `text-xl` 以上（＝20px。`text-lg` は 18px で下限割れ）**、余白は `gap-4` / `p-4` など）。
- 色・サイズ・余白は**すべて変数 or ユーティリティ経由**。マジックナンバーの直書きをしない。

## 3. アイコン

- アイコンは **Material Icons に一本化**する：`<span class="material-icons">名前</span>`。
- **絵文字（🚀✨✅ など）は使わない**。エクスポート（PNG/PDF）で消える・豆腐化するため。

## 4. 型（layouts/）と 部品（components/）

- 繰り返す構造は**型**（`layouts/`）、繰り返すパーツは**部品**（`components/`）にして、`layout:` / タグで呼ぶ。
- 新規スライドは**まず既存の型・部品から組む**。無いときだけ新しく作る（§7 の作り方に従う）。
- レイアウトの実装は**1つの使い分けルール**で選ぶ：
  - **構造が単純** → `centered.vue` のように **UnoCSS ユーティリティのみ**（scoped CSS を書かない）。
  - **構造が複雑**（ヘッダ固定・本文枠など）→ `fixed-header.vue` のように **`<style>` の構造CSS**。
- **コンテンツ枚は基本 `fixed-header`（上部固定ヘッダ）で統一**。「課題」「まとめ」等のセクションも heading に入れてヘッダー化する（地味に効く統一感）。
- **横並び（columns）**：ヘッダ付きの中での横並びは fixed-header の本文を Tailwind の `grid grid-cols-2 gap-10` で割る。ヘッダ無しの全面2カラムが要るときだけ `two-col.vue`。`.columns` のような global ユーティリティは作らない。
- 縦中央に伸ばす（旧 content-expand）は **Tailwind の `flex-1 flex flex-col justify-center`** で閉じる。global クラスにしない。
- 部品の色は**必ずトークン参照**（`bg-[var(--accent)]` 等）。部品が増えても色が割れないようにする。
- **フロー（ステップを矢印でつなぐ／§7 の推奨形）**：`PointCard` を `flex items-stretch gap-3` の行に `flex-1` で並べ（カードは等高に揃える）、各カードには `card-class="justify-center"` を渡して**本文を縦中央寄せ**にし、間の矢印 `<span class="material-icons text-4xl">arrow_forward</span>`（`items-center` で挟む）と視線の高さを合わせる。矢印は専用部品を作らず Material Icons＋トークン色（`text-[var(--navy-300)]`）で閉じる（独自の矢印SVG・生HEXは使わない）。※カード本文を縦中央寄せにしないと、本文が上寄りのとき矢印だけがカード縦中央＝テキストより下に取り残されて見える。

## 5. 「どこに書くか」（CSS の置き場所）

判断は1つ：**「どのスライドでも必ず効いてほしいか？」**

- **全スライド共通の土台**（トークン、ベースのフォント・色・背景）→ `style.css`。
- **その型・部品の中だけの見た目** → その `layouts/` `components/` の中に閉じ込める。
- **この1枚だけ** → そのスライドに `<style>`（常に scoped・他に漏れない）。

書き方の作法：

- `style.css` の共通スタイルは **`.slidev-layout` の配下に書く**（素の `h1 {}` は発表者モードUIにまで漏れる）。
- **`!important` は基本使わない**。効かないときは置き場所・継承（§6）を疑う。（Slidev 組み込みの高優先度スタイルとどうしても競合する箇所＝固定ヘッダの見出し等だけ、そこに限って許容する）

## 6. ★ 最重要の罠：自作レイアウトは `.slidev-layout` を継承しない

- 組み込みレイアウト（default / two-cols 等）は、その template 内で **自分で** `class="slidev-layout"` を付けている（Slidev が自動で付けるわけではない）。だから `style.css` の共通スタイルが効く。
- **自作レイアウトは自分で `class="slidev-layout"` を付けないと、`style.css` の共通スタイル（トークン・見出し色・kicker・マーカー）が一切効かない**。見出しが素の小さい黒文字に戻る。
- 対処（どちらか）：
  1. 型の wrapper に `class="slidev-layout"` を足す。
  2. 型の中身を UnoCSS で完結させる（共通スタイルに依存しない）。

## 7. AIっぽさの回避（必ず守る）

| やりがち（AIっぽい） | 代わりにこうする |
|---|---|
| Inter / Poppins フォント | Noto Sans JP に寄せる |
| 紫〜青のグラデ背景 | 単色（ネイビー/白）＋必要なら薄いノイズ |
| 完全対称なレイアウト | わざと少し非対称に（scale / opacity の差） |
| 同じカードを3枚横並び | 矢印でつなぐフロー形式に |
| 角丸カードで全面を埋める | レイアウトを複数種類使い分ける |

- **1つの図・1枚のスライドに1メッセージ**。詰め込まない。
- 配信向けは可読性最優先（本文を十分大きく。目安 24px 以上）。

## 8. 仕上げ（必ず）

- ルールに書いた＝画面でその通り出てる、とは限らない。**最後は必ず PNG にエクスポートして、画像を目で見て確認**する。
  - `cd application/slides && npx slidev export src/<name>/slides.md --format png --per-slide --output src/<name>/export/slide`
- 崩れていたら §5・§6（置き場所・継承）をまず疑う。

---

## このプロジェクトの現物

**原則：global は「地」だけ。構造は layouts/、装飾は components/、細部は Tailwind(UnoCSS) で閉じる。**

| 種類 | ファイル | 中身 |
|---|---|---|
| 地（global） | `style.css` | `:root` トークン＋ `.slidev-layout` の地（font・色・背景・size・h1・インラインcode）だけ |
| 型：タイトル | `layouts/title.vue` | ダークネイビーのヒーロー。`.slidev-layout` を付けず型内で完結（閉じる） |
| 型：縦中央 | `layouts/centered.vue` | UnoCSS のみ（scoped CSS ゼロ） |
| 型：固定ヘッダ | `layouts/fixed-header.vue` | 上部固定ヘッダ＋本文（構造CSS）。props `heading` / `kicker` |
| 型：横並び | `layouts/two-col.vue` | 自作 two-col（UnoCSS grid）。本文＝左、`::right::`＝右 |
| 罠デモ | `layouts/trap.vue` | あえて `.slidev-layout` を付けない（§6 の実演用） |
| 部品：見出しラベル | `components/Kicker.vue` | 朱の縦バー。slot |
| 部品：箇条書き | `components/Points.vue` | 朱ひし形マーカー。slot に markdown リスト |
| 部品：Notice | `components/NoticeBox.vue` | `type`（info/warning/success/danger）+ `title` + slot。Material Icon・色はセマンティックトークン |
| 部品：カード | `components/PointCard.vue` | `label` / `tone` + slot。色はトークン参照 |
| 部品：ルール箱 | `components/RuleBox.vue` | ルール提示ボックス。slot |
| 部品：コードブロック | `components/CodeBlock.vue` | ネイビー地のコードパネル。`file` / `lang` props。装飾は scoped で閉じ、色は `--code-*` トークン参照 |

- **コードブロックは `CodeBlock.vue` で閉じる**：slot に素の `<pre>` を入れ、強調は `<span class="c">`（コメント）/`<span class="k">`（キー）の2色だけ。Slidev の ` ``` ` フェンス（Shiki）は生成色＝非トークンの色が混ざるので、地が暗いコード掲載には使わない。

- 横並び＝`two-col.vue` を使う（`.columns` のような global ユーティリティは作らない）。
- 縦中央に伸ばす（旧 content-expand）＝ Tailwind の `flex-1 flex flex-col justify-center` で閉じる（global クラスにしない）。
- 装飾の色は**すべてトークン参照**（`var(--x)` / `bg-[var(--x)]`）。生 HEX 直書きはしない。

このデッキに、複数のステップを矢印でつなぐ「フロー」のスライドを1枚追加して。
- まず同じディレクトリの CLAUDE.md を読んで、そのルールに必ず従うこと。
- 既存の型（layouts/）と部品（components/）を使い、トーンに合わせる。
- 矢印やステップの色もトークンに合わせる。生 HEX の直書きはしない。
- 追加したら PNG にエクスポートして、見た目が崩れてないか自分で確認して。
- ルールに無い要素や崩れが出たら、その場しのぎで直さず CLAUDE.md に1行足す形で対応して（＝育てる）。

7枚目のフローを「縦積み」レイアウトに作り替えて。CLAUDE.md のルールに従い、CLAUDE.md 自体は変更しないこと。
- 4ステップを上から下へ縦に積む。各ステップは横長の1バンド。
- 左に「番号＋短いタイトル」、右に説明文（左右で分離）。横幅が広いので1行に収まる。
- ステップ間は下向き矢印でつなぐ。
- 直したら PNG で7枚目を必ず目で見て、溢れてないか確認して。

application/slides/src/git-branching/ に、Slidev のデッキを「一から」作ってほしい。
- このディレクトリには CLAUDE.md だけが置いてある。まずそれを読み、必ず従うこと。
- style.css / layouts/ / components/ / slides.md はまだ無い。CLAUDE.md のルールに沿って自分で新規に作る。
- ★重要：他のデッキ（特に blog-design-system/）の style.css・layouts・components は
  絶対に開かない・参照しない。手元の CLAUDE.md だけを唯一の根拠にすること。
- ブランド色は元（ネイビー＋朱）とは別系統にする（例：ダークグリーン＋抑えた琥珀）。
  生 HEX を置くのは style.css の :root だけ。利用側は var() 参照。
- 題材は「Git ブランチ戦略入門」。タイトル / アジェンダ / 課題 / 比較カード /
  Notice / コマンド例 / 導入フロー / まとめ を含む 6〜8 枚。
- できたら PNG にエクスポートして、崩れてないか自分で確認して。
- ルールに無い要素や崩れが出たら、その場しのぎで直さず CLAUDE.md に1行足す形で対応して（＝育てる）。