@squadbase/vantage-template 0.1.0-dev.c40b771 → 0.1.0-dev1.23da1b2

package/README.md

@@ -14,25 +14,25 @@ npx @squadbase/vantage-template <command> [options]
 
 #### `init`
 
-Initialize a new Vantage project in the current directory. Copies the base template — `src/index.tsx`, `src/_layout.tsx`, `src/_404.tsx`, `src/_error.tsx`, `src/styles.css`, `server/api/`, `tsconfig.json`, `squadbase.yml`, plus the agent guidance in `AGENTS.md` and `.squadbase/skills/` — and installs dependencies.
+Initialize a new Vantage project in the current directory. Copies the base template — `src/index.tsx`, `src/_layout.tsx`, `src/_404.tsx`, `src/_error.tsx`, `src/styles.css`, `server/api/`, `tsconfig.json`, `squadbase.yml`, a starter `DESIGN.md` (the design intent, by token name — user-owned; the `vantage-design` skill keeps it in step with `src/styles.css`), plus the agent guidance in `AGENTS.md` (and `agents/`, when the framework ships per-type knowledge files) and `.squadbase/skills/` — and installs dependencies.
 
 ```bash
 npx @squadbase/vantage-template init
 npx @squadbase/vantage-template init --force                  # Overwrite existing files
-npx @squadbase/vantage-template init --skip-install           # Skip npm install
+npx @squadbase/vantage-template init --skip-install           # Skip dependency install (bun, or npm if bun is absent)
 npx @squadbase/vantage-template init --chart sunset           # Apply a chart preset during init
 ```
 
-After initialization:
+After initialization (the template ships `bun.lock` and declares `package_manager: bun` in `squadbase.yml`; `npm run` works too once dependencies are installed):
 
 ```bash
-npm run dev      # vantage dev --no-overlay — dev server + API on :5173
-npm run build    # vantage build → dist/
-npm run check    # vantage check — static diagnostics
-npm run routes   # vantage routes — page/API route map
+bun run dev      # vantage dev --no-overlay — dev server + API on :5173
+bun run build    # vantage build → dist/
+bun run check    # vantage check — static diagnostics
+bun run routes   # vantage routes — page/API route map
 ```
 
-There is no `vite.config.ts`, no `main.tsx`, and no route table: adding a file under `src/` adds a route (`src/index.tsx` → `/`, `src/sales/[id].tsx` → `/sales/:id`), and `src/_layout.tsx` builds the nav from `useRoutes()`.
+There is no `vite.config.ts`, no `main.tsx`, and no route table: adding a file under `src/` adds a route (`src/index.tsx` → `/`, `src/sales/[id].tsx` → `/sales/:id`), and `src/_layout.tsx` builds the nav from `useRoutes()`. The layout passes Vantage's `useNavigate()` to the header page selector so selecting a page updates the route without reloading the app.
 
 Since `@squadbase/vantage` v0.3.0, `src/` is the page-scan root and does not appear in URLs. `server/` and `public/` stay at the project root — `src/server/` is never scanned.
 

package/base-template/.squadbase/skills/vantage-app/SKILL.md

@@ -14,7 +14,7 @@ description: Vantage(@squadbase/vantage)ダッシュボードアプリを一か
 
 ## 全体の流れ
 
-1. **骨組み** — `pnpm dev` が上がるところまで
+1. **骨組み** — `bun run dev` が上がるところまで
 2. **ルートを決める** — ページファイルを置き、`vantage routes` で URL を確認
 3. **データを繋ぐ** — 外部 API か、自前の `server/api` か
 4. **仕上げ** — `check` → `build` → `preview`
@@ -52,7 +52,7 @@ exit 1 になる。
 ```
 
 `index.tsx` はデフォルトエクスポートの React コンポーネント 1 つ(これが `/` になる)。あとは
-`pnpm install && pnpm dev` で http://localhost:5173 が上がる。
+`bun install && bun run dev` で http://localhost:5173 が上がる(このプロジェクトの package manager は bun。`bun.lock` を持つ)。
 
 **既存アプリに合流したときは、作る前に現状を読む:**
 
@@ -105,10 +105,10 @@ vantage add skill  # 配置済みの skill(このファイルの仲間)と、そ
 ## Step 4 — 仕上げ
 
 ```bash
-pnpm check     # エラーが残っていないか(exit 1 なら残っている)
-pnpm routes    # 公開される URL の最終確認
-pnpm build     # dist/ に client(+ server)+ vantage-manifest.json
-pnpm preview   # 本番ビルドをローカルで動かす
+bun run check     # エラーが残っていないか(exit 1 なら残っている)
+bun run routes    # 公開される URL の最終確認
+bun run build     # dist/ に client(+ server)+ vantage-manifest.json
+bun run preview   # 本番ビルドをローカルで動かす
 ```
 
 `vantage-manifest.json` の `mode` は `server/` の有無から自動で決まる(手で書かない)。

package/base-template/.squadbase/skills/vantage-design/SKILL.md

@@ -0,0 +1,137 @@
+---
+name: vantage-design
+description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(プリセット default / calm / vivid / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
+---
+
+# DESIGN.md と styles.css をまとめて更新する
+
+Vantage アプリの見た目は 2 つのファイルで決まる。
+
+| ファイル | 持つもの | 所有者 |
+| --- | --- | --- |
+| `DESIGN.md`(プロジェクトルート) | 意図とルール。**トークン名だけ**を書き、色コードは書かない(150 行以内) | ユーザー |
+| `styles.css`(ページと同じ側。通常 `src/styles.css`) | トークンの実際の値(`:root` と `.dark`) | ユーザー |
+
+**2 つは必ず同じステップで更新する。** 片方だけ直すと、次にページを書くエージェントが古い意図に
+従ってしまう。デザイン変更の依頼をページ単位の `className` 修正で済ませない。
+
+一般規約(トークンで色を書く・設定ファイルを作らない)は `AGENTS.md` が正本。ここでは手順だけを扱う。
+
+## リファレンス
+
+| ファイル | 読む場面 |
+| --- | --- |
+| `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
+| `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
+| `references/presets.md` | プロジェクト作成時の初期デザイン(`default` / `calm` / `vivid` / `mono`) |
+| `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
+
+## 手順
+
+### 1. 入力を集める
+
+- 何に合わせるのか(URL・ロゴ画像・資料・言葉・外部の `DESIGN.md`)を確認し、
+  `references/extract.md` の該当する節の手順で色・書体・トーンを取り出す。
+- 既存の `DESIGN.md` と `styles.css` を読む。既にあるルールで今回触らないものは残す。
+- スライド(`*.slide.tsx`)があるかを `ls` / `vantage routes` で確認しておく。
+
+### 2. 提案して確認を取る
+
+書き込む前に、次の 2 つをユーザーに見せて確認を取る。
+
+- **役割 → トークンの対応表**(主色・強調・良い/悪い/注意・背景の段階・文字・チャート 5 色・書体)。
+  各行に「何に合わせてその色にしたか」を 1 語添える。
+- **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
+
+プリセットで足りる場合はプリセット名(`references/presets.md`)で提案してよい。
+
+### 3. styles.css と DESIGN.md を同じステップで書く
+
+`styles.css`:
+
+- **マーカーブロックの中は手で編集しない。**
+  ``/* vantage-template:chart-preset — regenerated by `chart`; edits here are lost */`` 〜
+  `/* vantage-template:chart-preset:end */` の間はコマンドが丸ごと書き換える生成物で、手で直した
+  値は次の適用で消える。
+- チャートの 5 色は必ずコマンドで選ぶ: `npx @squadbase/vantage-template chart <preset>`
+  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`。プロジェクトルートで実行。
+  `--dry-run` で書き込まずに結果を見られる)。マーカーの中だけが置き換わり、他の記述は残る。
+- プリセットに無いチャート色(ブランド色を `--chart-1` にしたいなど)は、マーカーブロックの**後ろ**に
+  別の `:root { --chart-1: …; }` と `.dark, [data-theme="dark"] { --chart-1: …; }` を足して上書きする
+  (後に書いた方が勝つ)。上書きするのは変えたい番号だけにし、残りはプリセットに任せる。
+- `--primary` / `--primary-foreground` / `--radius` などチャート以外のトークンは、マーカーの**外**
+  (ファイル先頭の `:root` ブロック)に書く。色は `:root` と `.dark, [data-theme="dark"]` の
+  **両方**に書く。片方だけだとダークモードで既定に戻る。値は `oklch()` か Tailwind のパレット変数
+  (`var(--color-sky-600)`)で書く。
+- 書体は既定でシステムフォント。**ページの書体を決めるのは `body` セレクタの `font-family`**
+  (フレームワークの `theme.css` が `body` にシステムフォントを直接指定しているため、`:root` や
+  `html` に `font-family` を書いても本文には効かない)。スライドの書体は `:root` の
+  `--slide-font-display`(見出し)/ `--slide-font-body`(本文)で決まる。Web フォントを使うときの
+  レシピ:
+  1. Google Fonts の CSS
+     (`curl -A '<ブラウザの User-Agent>' 'https://fonts.googleapis.com/css2?family=<Font>:wght@400;600&display=swap'`)
+     から使う subset の `@font-face` ブロックだけを `styles.css` の先頭に貼る。
+     **`@import url(...)` は使わない** ― `styles.css` はテーマの後ろに連結されるので
+     「@import rules must precede all rules」の警告とともにビルドで捨てられる。
+  2. マーカーの外に次を書く(フォールバックは `theme.css` の既定と同じ並び):
+
+     ```css
+     body {
+       font-family: "<Font>", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
+     }
+     :root {
+       --slide-font-display: "<Font>", system-ui, -apple-system, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
+       --slide-font-body: var(--slide-font-display);
+     }
+     ```
+
+  日本語の Web フォントは face が 100 を超えるので原則使わない(pptx 書き出しも壊れる。
+  `vantage-slide` の `references/tokens.md` 参照)。
+
+`DESIGN.md`: `references/format.md` の書式で書く。**色コードを書かない**(トークン名だけ)。
+150 行を超えない(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を出す)。ロゴなどの素材は
+`public/brand/logo.svg` のように `public/` 配下のパスで「ブランド素材」行に書く。
+
+### 4. コントラストを確かめる
+
+主な文字色 / 背景色の組を、**ライトとダークの両方で**確かめる。
+
+```bash
+node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
+# 例: node .squadbase/skills/vantage-design/scripts/contrast.mjs 'oklch(0.985 0 0)' 'oklch(0.55 0.2 260)'
+```
+
+最低限の組: `--foreground` / `--background`、`--primary-foreground` / `--primary`、
+`--muted-foreground` / `--card`、`--destructive` / `--background`。本文は AA(4.5:1)、大きな数字・
+見出しだけに使う色は 3:1 以上。`var(--color-*)` で書いた値は Tailwind の `oklch()` 値に直してから渡す。
+落ちたら明度を調整して、提案に戻らずに直してよい(直したことは報告する)。
+
+### 5. プレビューを見せる(省略しない)
+
+- **必ず**使い捨てページ `src/design-preview.tsx`(`src/` が無ければルート直下)を作る: KPI カード
+  3〜4 枚、`EChart` の棒または折れ線 1 つ(5 系列)、主要ボタン・破壊的ボタン、補足の文字。すべて
+  トークンで書く。既存ページやホームで代用しない ― ホームなどの画面はチャートやボタンを持たないことが
+  多く、変更後の色が見えない。
+- スライドがあるなら既存のデッキの URL を案内する(プレビュー用のデッキは作らない)。
+- **ユーザーが承認したら `src/design-preview.tsx` を削除する。** 残すとナビに出る。
+
+### 6. 検証する
+
+```bash
+npx vantage check
+```
+
+`HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
+
+### 7. 完了を報告する
+
+報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
+
+- プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
+- 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
+  ページで確認してほしい」という一言。
+
+## 会話中の指示との関係
+
+- 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。
+- 同じ指示が 2 回以上出たら、`DESIGN.md` への反映を提案する(反映するときはこの手順の 2 から)。

package/base-template/.squadbase/skills/vantage-design/references/extract.md

@@ -0,0 +1,110 @@
+# 入力から色・書体・トーンを取り出す
+
+どの入力でも、最終的に欲しいのは次の 4 つだけ。取り出したら SKILL.md の手順 2(提案)へ戻る。
+
+1. **主色**(ブランドの色。ボタン・リンク・ロゴの色)と、あれば**副色**
+2. **背景の明暗**(白基調か、暗い基調か)
+3. **書体**(見出しと本文の `font-family`。システムフォントで足りるか)
+4. **トーン**(2〜3 語: 「落ち着いた」「明るい」「堅い」…)
+
+チャートの 5 色は、主色から直接作るより**主色に最も近いチャートプリセット**を選び、
+`npx @squadbase/vantage-template chart <preset>` で適用する方が安全(5 色の明度差・色覚多様性への
+配慮が済んでいる)。`styles.css` の `vantage-template:chart-preset` マーカーブロックの中は
+**手で編集しない**(次の適用で消える)。主色を `--chart-1` に入れたいときだけ、マーカーブロックの
+**後ろ**に `:root` と `.dark, [data-theme="dark"]` の `--chart-1` 上書きを足し、残り 4 色は
+プリセットに任せる。`--primary` や `--radius` もマーカーの外に書く。
+
+## URL(既存サイトに合わせる)
+
+ブラウザは要らない。手元にある取得手段(`curl`、Web fetch ツール)で HTML と CSS を読む。
+
+```bash
+curl -sL <URL> -o /tmp/site.html
+grep -oiE '<meta[^>]+theme-color[^>]*>' /tmp/site.html          # ブラウザの UI 色 = 主色の有力候補
+grep -oiE '<link[^>]+stylesheet[^>]*>' /tmp/site.html            # 読むべき CSS
+grep -oiE '<link[^>]+(icon|logo)[^>]*>|<img[^>]+logo[^>]*>' /tmp/site.html   # ロゴ
+curl -sL <CSSのURL> -o /tmp/site.css                             # 相対パスは URL と結合する
+grep -oE -- '--[a-zA-Z0-9-]+:\s*[^;]+' /tmp/site.css | head -80   # CSS カスタムプロパティ
+grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
+```
+
+読む順番:
+
+1. **CSS カスタムプロパティ**。`--primary` `--brand` `--color-primary` `--accent` などの名前が
+   あれば、それが最も信頼できる。
+2. **`<meta name="theme-color">`**。
+3. **ボタン・リンクの色**: `a {` `.btn` `button` `[class*=primary]` のセレクタの `color` /
+   `background-color`。出現回数の多い有彩色が主色。
+4. **背景**: `body` / `html` の `background`。暗ければ「暗い基調」。
+5. **書体**: `body` の `font-family`。Google Fonts の `<link>` があればその family 名。
+
+注意:
+
+- SPA で HTML がほぼ空のときは、`<script>` より先に CSS の `<link>` を探す。それも無ければ
+  ユーザーにスクリーンショットかブランドカラーを聞く(推測で埋めない)。
+- 取得できない(認証・ボット対策)ときは、その旨を伝えてスクリーンショットをもらう。
+- ロゴを使うなら `public/brand/` に保存し、`DESIGN.md` の「ブランド素材」行にパスを書く。
+
+## 画像・ロゴ
+
+- 画像を見て、背景を除いた**面積の大きい有彩色 1〜2 色**を主色 / 副色とする。
+  黒・白・灰は背景の明暗の判断にだけ使う。
+- SVG のロゴなら中身の `fill` / `stroke` を読めば正確な値が取れる。
+- 写真やスクリーンショットは色が揺れるので、近い Tailwind パレット(`var(--color-sky-700)` など)に
+  丸めて提案する。
+
+## pptx / pdf / 既存の資料
+
+- **pptx** は zip。`unzip -p <file>.pptx ppt/theme/theme1.xml` で `<a:clrScheme>`(`accent1`〜
+  `accent6`・`dk1`/`lt1` の `srgbClr val`)と `<a:fontScheme>`(`majorFont` = 見出し、
+  `minorFont` = 本文。日本語は `<a:ea typeface>`)が取れる。`accent1` が主色、`accent1..5` を
+  チャートの候補にできる。
+- **pdf** は色の抽出が難しい。ページを画像として見て「画像・ロゴ」と同じ手順にする。書体は
+  `pdffonts` があれば一覧が取れる(無ければ見た目で「明朝 / ゴシック」程度に留める)。
+- **docx / xlsx** も zip で、`word/theme/theme1.xml` / `xl/theme/theme1.xml` に同じ形の
+  テーマがある。
+
+## 言葉だけ(「落ち着いた感じに」)
+
+形容詞を `presets.md` の 4 つに寄せ、そのうえで主色だけを調整する。
+
+| 言われたこと | 出発点 |
+| --- | --- |
+| 落ち着いた・信頼感・堅い・経営向け・青系 | `calm` |
+| 明るい・元気・勢い・暖かい・営業向け | `vivid` |
+| シンプル・モノクロ・印刷する・資料に貼る | `mono` |
+| 特に無し・標準・おまかせ | `default` |
+| 自然・環境・緑 | `default` の構成でチャートを `forest` に |
+| 華やか・ポップ・紫やピンク | `default` の構成でチャートを `berry` に |
+
+当てはまらない言葉は、2 案(例: `calm` と `default`)を並べて選んでもらう。
+
+## 外部の DESIGN.md(Stitch などが書いたもの)
+
+外部の DESIGN.md は YAML frontmatter や本文に**値**(hex・px・フォント名)を持っていることが多い。
+Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ移し、`DESIGN.md` をトークン参照に
+書き直す**。
+
+1. 値を拾う: primary / secondary / surface / background / on-* / error / success / warning、
+   フォント、角丸。
+2. 対応づける:
+
+   | 外部の名前 | Vantage のトークン |
+   | --- | --- |
+   | primary / on-primary | `--primary` / `--primary-foreground` |
+   | secondary / tertiary | `--chart-2` / `--chart-3` など(チャートで使うなら)。面の色なら `--secondary` |
+   | background / surface / surface-container | `--background` / `--card` / `--muted` |
+   | on-background / on-surface / on-surface-variant | `--foreground` / `--card-foreground` / `--muted-foreground` |
+   | outline | `--border` |
+   | error | `--destructive` |
+   | success / warning | 専用トークンなし → `--chart-*` のどれかに割り当てて `DESIGN.md` に書く |
+   | radius / corner | `--radius` |
+   | display / headline font | `--slide-font-display`(+ ページの見出しなら `body` の font-family) |
+   | body font | `body` セレクタの font-family と `--slide-font-body`(`:root` の font-family は効かない) |
+
+3. `styles.css` のマーカーブロックの外に、`:root` と `.dark, [data-theme="dark"]` の両方で書く
+   (チャート色・書体の書き方は SKILL.md の手順 3)。外部の DESIGN.md に
+   ダークの値が無ければ、ライトの色相を保って明度だけ反転した値を作り、コントラストを確かめる。
+4. `DESIGN.md` を `format.md` の節の順番で書き直す。外部の文章(トーン・Do/Don't・コンポーネントの
+   ルール)は活かし、値だけをトークン名に置き換える。150 行に収まらない分は要約する。
+5. 元のファイルは消さずに残すか(例: `docs/design-source.md`)、ユーザーに確認して削除する。

package/base-template/.squadbase/skills/vantage-design/references/format.md

@@ -0,0 +1,172 @@
+# DESIGN.md の書式
+
+`DESIGN.md` はプロジェクトルートに置く、**ユーザーが所有する**ファイル。アプリの見た目の意図と
+使い分けのルールを、エージェントが UI を書く前に読める形で残す。`vantage upgrade` も
+`vantage add agents` も書き換えない。
+
+## 原則
+
+- **値を書かない。トークン名だけを書く。** 色コード(`#…`・`oklch(…)`・`rgb(…)`・`hsl(…)`)や
+  px 値の色・書体の実値は `styles.css` の持ち物。`DESIGN.md` には `--primary` のようなトークン名と、
+  Tailwind のセマンティッククラス(`text-muted-foreground`)・サイズの段階(`text-2xl`)だけを書く。
+  パレット名で色味を説明するのは可(「青 → ティール → …」)。
+- **150 行以内。** 超えると `vantage check` が `DESIGN_MD_TOO_LONG` を警告する。エージェントが
+  毎回全文を読むファイルなので、網羅より判断に効くルールを優先する。
+- **YAML frontmatter は付けない。** 先頭は下の「冒頭のコメント」から始める。
+- **会話中の指示が優先。** `DESIGN.md` は既定値であって、個別の依頼を拒む根拠にしない。
+- ロゴ・画像は `public/` 配下のパスで参照する(`public/brand/logo.svg`)。画像を埋め込まない。
+
+## 節の順番と見出し
+
+見出しは日本語 + 英語の括弧書き(外部の DESIGN.md — Stitch など — の節と対応づけやすくするため)。
+この順番を崩さない。無い情報の節は消さずに「特になし」と書く。
+
+| # | 見出し | 書くこと |
+| --- | --- | --- |
+| 0 | 冒頭のコメント(`<!-- … -->`) | 何のファイルか / 値は styles.css / 会話の指示が優先 / 「このサイトに合わせて」で更新できること / upgrade が触らないこと |
+| 1 | `## 全体のトーン (Overview)` | 2〜4 行のトーン。最後に「ブランド素材:」行(任意。`public/` のパス) |
+| 2 | `## 色 (Colors)` | 役割 → トークンの表。行は **主色 / 強調 / 良い / 悪い / 注意 / 背景の段階 / 境界 / 文字**。専用トークンが無い役割は「専用トークンなし」+ 代替 |
+| 3 | `## チャート (Charts)` | 系列の順番(`--chart-1..5` とその色味)、1 系列だけ強調するときの色、良い / 悪いの色、禁止の組み合わせ、プリセット名 |
+| 4 | `## 書体 (Typography)` | 見出し / 本文 / 数字 / スライドの書体(`--slide-font-display` / `--slide-font-body`)と、サイズの段階(Tailwind クラス・`--slide-size-*`) |
+| 5 | `## レイアウトと密度 (Layout)` | カード・余白(`gap-*`)・`--radius`・並べ方・密度 |
+| 6 | `## 成果物の種類ごとの規則 (Per-artifact)` | `### ダッシュボード` と `### スライド` の小節(他の種類があれば小節を足す) |
+| 7 | `## Do / Don't` | 3 つずつ程度 |
+
+外部の DESIGN.md の対応: Overview / Colors / Typography / Layout(Spacing・Elevation 含む)/
+Components → 「成果物の種類ごとの規則」/ Do's and Don'ts。値は `styles.css` へ移す
+(→ `extract.md` の「外部の DESIGN.md」)。
+
+## 使えるトークン
+
+| 系統 | トークン |
+| --- | --- |
+| 面と文字 | `--background` `--foreground` `--card` `--card-foreground` `--popover` `--popover-foreground` |
+| 主色など | `--primary` `--primary-foreground` `--secondary` `--secondary-foreground` `--accent` `--accent-foreground` `--muted` `--muted-foreground` `--destructive` `--destructive-foreground` |
+| 境界 | `--border` `--input` `--ring` |
+| チャート | `--chart-1` 〜 `--chart-5` |
+| 形 | `--radius` |
+| サイドバー | `--sidebar` `--sidebar-foreground` `--sidebar-primary` … |
+| スライド | `--slide-bg` `--slide-fg` `--slide-accent` `--slide-muted` `--slide-radius` `--slide-font-display` `--slide-font-body` `--slide-size-hero` `--slide-size-body` |
+
+- `--muted` `--accent` `--secondary` `--border` は背景・境界用。文字色の役割に割り当てない。
+- 良い / 注意の専用トークンは無い。`--chart-*` の中から割り当てるか、「専用トークンなし」と書く。
+- ページ本文の書体はトークンではなく `body` の `font-family`(`styles.css` の `body` セレクタで上書きする。
+  `:root` / `html` に書いても `theme.css` の `body` 指定に負けて効かない)。
+- `--slide-bg` などは既定で `--background` などの別名。`.dark` に書き直す必要は無い。
+
+## 雛形(中立の既定テーマ)
+
+ベーステンプレート(`packages/vantage-template/template/DESIGN.md`)と**同じ内容**。どちらかを
+直したらもう片方も合わせること。既定テーマ(無彩色の `--primary`、チャートは `blue` プリセット)を
+そのまま説明しているので、新規に作るときはこれを写して、変えた役割の行だけを書き換える。
+
+````markdown
+<!--
+DESIGN.md — このアプリの「見た目の意図」を書くファイルです。
+
+- 実際の色・角丸・書体の値は src/styles.css にあります。ここにはトークン名(--primary など)と
+  使い分けのルールだけを書き、色コードは書きません。
+- エージェントはページ・スライド・コンポーネントを書く前にこのファイルを読みます。
+  会話の中での指示はこのファイルより優先されます。
+- 「このサイトに合わせて」「色を落ち着いた感じに」と頼めば、このファイルと styles.css を
+  まとめて更新します。
+- このファイルはあなたのものです。`vantage upgrade` が書き換えることはありません。
+-->
+
+# デザイン
+
+## 全体のトーン (Overview)
+
+- 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。
+- 装飾より読みやすさを優先する。影・グラデーション・アニメーションは最小限。
+- 数字が主役。1 画面で伝えたいことを 1 つに絞り、補足は小さく添える。
+- ブランド素材: なし(ロゴを使う場合は `public/brand/logo.svg` のように `public/` 配下のパスで書く)
+
+## 色 (Colors)
+
+色は必ずトークン(Tailwind のセマンティッククラス)で指定する。素のパレット(`bg-blue-600` など)や
+色コードを直接書かない。
+
+| 役割 | トークン | 使う場所 |
+| --- | --- | --- |
+| 主色 (Primary) | `--primary` / `--primary-foreground` | 主要ボタン、選択中の状態。既定は無彩色 |
+| 強調 (Accent) | `--chart-1` | 1 つだけ目立たせたい数値・系列・リンク的な強調 |
+| 良い (Positive) | `--chart-2` | 前期比のプラスなど、良い変化の小さな印 |
+| 悪い (Negative) | `--destructive` | 前期比のマイナス、エラー、削除操作 |
+| 注意 (Warning) | 専用トークンなし | 文言とアイコンで示し、色は `--muted-foreground` |
+| 背景の段階 | `--background` → `--card` → `--muted` | ページ → カード → カード内の区画・ホバー |
+| 境界 | `--border` / `--input` / `--ring` | 罫線、入力欄、フォーカス |
+| 文字 | `--foreground` / `--muted-foreground` | 本文 / 補足・ラベル・単位 |
+
+- `--muted`・`--accent`・`--secondary`・`--border` は背景・境界用。文字色に使わない。
+- 増減(▲▼・前期比)は向きで色を分ける: 増加・プラスは `--chart-2`(または `--primary`)、
+  減少・マイナスは `--destructive`。下向きの矢印やマイナスを `--primary` で塗らない。
+- ライトとダークの両方がトークンで決まるので `dark:` を並べない。
+
+## チャート (Charts)
+
+- 系列の順番は `--chart-1` → `--chart-2` → `--chart-3` → `--chart-4` → `--chart-5`
+  (現在はプリセット `blue`: 青 → ティール → フクシア → バイオレット → グレー)。
+- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5`(グレー)にする。
+- 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
+- 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
+- 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
+- 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
+- 配色を丸ごと変えるときは `npx @squadbase/vantage-template chart <preset>` を使う
+  (`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
+
+## 書体 (Typography)
+
+| 用途 | 指定 | 備考 |
+| --- | --- | --- |
+| 見出し・本文 | システムフォント(`body` の `font-family`) | Web フォントは使わない |
+| 数字 | 同上 + `tabular-nums` | 桁がそろうように必ず付ける |
+| スライドの見出し | `--slide-font-display` | 既定は日本語を含むシステムフォント |
+| スライドの本文 | `--slide-font-body` | 既定は見出しと同じ |
+
+サイズの段階(ダッシュボード):
+
+- ページ見出し: `text-2xl font-bold`
+- カード見出し・ラベル: `text-sm font-medium text-muted-foreground`
+- KPI の数値: `text-3xl font-semibold tabular-nums`
+- 本文・表: `text-sm`
+- 注釈・出典: `text-xs text-muted-foreground`
+
+スライドのサイズは `--slide-size-hero`(表紙・大きな数字)と `--slide-size-body`(本文)を基準にする。
+
+## レイアウトと密度 (Layout)
+
+- 情報はカード(`bg-card` + `border-border`)で区切る。角丸は `--radius` に従う(個別に変えない)。
+- グリッドの間隔は `gap-4`。セクション間は `gap-6` 程度。
+- KPI は 1 行に 2〜4 枚。その下にチャート、最後に明細の表。
+- 密度は「中」。余白を削って詰め込むより、ページを分ける。
+
+## 成果物の種類ごとの規則 (Per-artifact)
+
+### ダッシュボード
+
+- 先頭に KPI カード、次にトレンドのチャート、最後に明細の表。
+- 各 KPI には比較対象(前月比・目標比など)を 1 つ添える。
+- チャートのタイトルは結論を書く(「売上推移」より「売上は 3 か月連続で増加」)。
+
+### スライド
+
+- 1 枚に 1 メッセージ。見出しに結論を書く。
+- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う
+  (既定では `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
+- 強調色は 1 枚につき 1 か所まで。
+
+## Do / Don't
+
+Do:
+
+- トークンと Tailwind のセマンティッククラスで色を指定する。
+- 数値には単位と比較対象を付ける。
+- 色の意味(良い / 悪い / 強調)をアプリ全体でそろえる。
+
+Don't:
+
+- 色コードや素のパレットクラスを直接書く。
+- 1 画面で強調色を何か所にも使う。
+- 3D チャート・円グラフの多用・装飾目的のグラデーション。
+````

package/base-template/.squadbase/skills/vantage-design/references/presets.md

@@ -0,0 +1,110 @@
+# 初期デザインのプリセット
+
+プロジェクト作成時に選ぶ 4 つの出発点。**id(`default` / `calm` / `vivid` / `mono`)はプロジェクト
+作成のワークフローが参照するので変えないこと。** どれも「チャートのプリセット 1 つ + `--primary` +
+`DESIGN.md` の差分」でできている。**`--primary` はどのプリセットでも必ず書く**(無彩色のプリセットも
+値を明示する)。チャートだけ変えるとホームのような色の少ない画面では見た目が変わらず、別のプリセットから
+切り替えたときに前の `--primary` が残るため。
+
+適用の手順は共通:
+
+1. `npx @squadbase/vantage-template chart <チャートのプリセット>` で `styles.css` のマーカーブロックを
+   差し替える。**マーカーブロックの中(`--chart-1..5`)は手で編集しない** ― コマンドの生成物で、
+   次の適用で消える。
+2. 各プリセットの `--primary` / `--primary-foreground` を、`styles.css` のマーカーの**外**(先頭の
+   `:root` ブロック)に `:root` と `.dark, [data-theme="dark"]` の両方で書く。既にある `--primary` は置き換える。
+3. `DESIGN.md` を `format.md` の雛形から作り、下の「DESIGN.md の差分」の行だけを書き換える。
+4. `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
+
+| id | トーン | チャートのプリセット | `--primary` |
+| --- | --- | --- | --- |
+| `default` | 無彩色のベース。色を持つのはデータ(`blue` チャート)だけ | `blue` | 無彩色(`theme.css` の既定値を明示) |
+| `calm` | 落ち着いた寒色。報告書・経営向け | `ocean` | 深い青(スカイ 700 / 300) |
+| `vivid` | 明るい暖色。営業・マーケティング向け | `sunset` | 濃いオレンジ(オレンジ 700 / 400) |
+| `mono` | モノクロ。印刷・資料への貼り付け向け | `mono` | ジンク 900 / 200 |
+
+## `default`
+
+- トーン: 落ち着いた無彩色のベースに、データだけが色を持つ業務ダッシュボード。装飾より読みやすさ。
+- チャート: `blue`(青 → ティール → フクシア → バイオレット → グレー)。
+- `--primary`(フレームワークの既定と同じ無彩色。他のプリセットから戻すときのために明示する):
+
+  ```css
+  :root {
+    --primary: oklch(0.205 0 0);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: oklch(0.922 0 0);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
+- `DESIGN.md`: 雛形そのまま(`format.md` の雛形は `default` を説明している)。
+
+## `calm`
+
+- トーン: 寒色でまとめた静かな画面。強調は控えめにし、数字と罫線で読ませる。
+- チャート: `ocean`(スカイ → シアン → インディゴ → ティール → スレート)。
+- `--primary`(チャートのスカイに揃えた深い青):
+
+  ```css
+  :root {
+    --primary: var(--color-sky-700);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: var(--color-sky-300);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
+- `DESIGN.md` の差分: 「全体のトーン」を上の文に。チャートの色味を「スカイ → シアン → インディゴ →
+  ティール → スレート」に。良い = `--chart-4`(ティール)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
+  禁止: `--chart-1` と `--chart-2` を隣り合う細い線で並べる(どちらも明るい青系)。
+
+## `vivid`
+
+- トーン: 明るく勢いのある暖色。KPI とトレンドを大きく見せ、強調色をはっきり使う。
+- チャート: `sunset`(オレンジ → アンバー → ローズ → イエロー → ストーン)。
+- `--primary`(オレンジ 600 は白文字で 4.5:1 に届かないので 700 を使う):
+
+  ```css
+  :root {
+    --primary: var(--color-orange-700);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: var(--color-orange-400);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
+- `DESIGN.md` の差分: トーンを上の文に。主色の行を「濃いオレンジ」に。良い = 専用色なし(▲ と
+  `--foreground`)、悪い = `--destructive`。禁止: `--chart-3`(ローズ)と `--destructive` を同じ
+  チャートに置く(悪い値と区別できない)。1 系列の強調は `--chart-1` + 残り `--chart-5`。
+
+## `mono`
+
+- トーン: 白黒と灰色だけ。色で意味を運ばず、太さ・順番・ラベルで読ませる。
+- チャート: `mono`(ジンク 900 → 200。ダークでは反転)。
+- `--primary`(チャートの両端と同じジンク):
+
+  ```css
+  :root {
+    --primary: var(--color-zinc-900);
+    --primary-foreground: oklch(0.985 0 0);
+  }
+  .dark,
+  [data-theme="dark"] {
+    --primary: var(--color-zinc-200);
+    --primary-foreground: oklch(0.205 0 0);
+  }
+  ```
+
+- `DESIGN.md` の差分: トーンを上の文に。強調 = `--chart-1`(最も濃い灰)。良い = 専用色なし(▲ と
+  符号)、悪い = `--destructive`(**画面で唯一の有彩色**として使う)。チャートは系列を 3 つまでにし、
+  それ以上は直接ラベルを付ける。禁止: 隣り合う `--chart-4` と `--chart-5`(明度差が小さい)。