@squadbase/vantage-template 0.1.1-dev1.35f56e8 → 0.1.1-dev1.39049f4

package/README.md

@@ -14,7 +14,7 @@ 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`, 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.
+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 `agents/`, when the framework ships per-type knowledge files) and `.squadbase/skills/` — and installs dependencies.
 
 ```bash
 npx @squadbase/vantage-template init

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

@@ -1,28 +1,31 @@
 ---
 name: vantage-design
-description: Vantage(@squadbase/vantage)アプリの見た目の意図 `DESIGN.md` と、実際の値を持つ `styles.css` をまとめて作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料・外部の DESIGN.md に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」「DESIGN.md を作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system", "DESIGN.md" で起動。
+description: Vantage(@squadbase/vantage)アプリのテーマ(色・チャートの色・書体・角丸)を、`styles.css` とテーマコマンドで作る / 更新する手順。配色・ブランドカラー・テーマ・チャートの色・フォント・角丸・トーンを変えたいとき、既存サイトやロゴ・資料に合わせたいとき、プロジェクト作成時の初期デザイン(テーマ neutral / ocean / forest / sunset / violet / rose / mono)を決めるときに使う。「色を変えて」「ブランドに合わせて」「このサイトに合わせて」「落ち着いた感じに」「フォントを変えて」「テーマを作って」、"change the colors", "match our brand", "match this website", "theme", "color palette", "font", "design system" で起動。
 ---
 
-# DESIGN.md と styles.css をまとめて更新する
+# テーマと styles.css を更新する
 
-Vantage アプリの見た目は 2 つのファイルで決まる。
+Vantage アプリの色・書体・角丸の値と色の割り当ては、SquadKit のテーマだけが持つ。
 
-| ファイル | 持つもの | 所有者 |
-| --- | --- | --- |
-| `DESIGN.md`(プロジェクトルート) | 意図とルール。**トークン名だけ**を書き、色コードは書かない(150 行以内) | ユーザー |
-| `styles.css`(ページと同じ側。通常 `src/styles.css`) | トークンの実際の値(`:root` と `.dark`) | ユーザー |
+| 手段 | 何を決めるか |
+| --- | --- |
+| ThemeDialog / `theme <id>` / `chart <preset>`(CLI) | 出発点のテーマとチャートの配色 |
+| `styles.css`(ページと同じ側。通常 `src/styles.css`)の `/* squadkit-theme:end */` より後ろ | ブランド色・書体など、テーマに無い値の上書き |
 
-**2 つは必ず同じステップで更新する。** 片方だけ直すと、次にページを書くエージェントが古い意図に
-従ってしまう。デザイン変更の依頼をページ単位の `className` 修正で済ませない。
+デザイン変更の依頼(「もっと落ち着いた色に」など)は、**テーマの切り替えかスタイルシートの上書きで完結させる。**
+`DESIGN.md` へは記録しない。今のテーマ名は `styles.css` の `/* theme: <name> */` マーカーから読む。
+ページ単位の `className` 修正で済ませない。
 
-一般規約(トークンで色を書く・設定ファイルを作らない)は `AGENTS.md` が正本。ここでは手順だけを扱う。
+見た目の規則(意味トークンの使い分け・カードで包む・KPI → チャート → 表など)は `AGENTS.md` の
+「見た目の規約」節が正本。ここでは手順だけを扱い、規則は重複させない。
+任意の `DESIGN.md`(ユーザー固有の意図を書くファイル)は、ユーザーが望んだときだけ扱う(`references/format.md`)。
 
 ## リファレンス
 
 | ファイル | 読む場面 |
 | --- | --- |
-| `references/format.md` | `DESIGN.md` を書く / 直すとき(書式・節の順番・雛形) |
-| `references/extract.md` | URL・画像・pptx/pdf・言葉・外部 DESIGN.md から色と書体を取り出すとき |
+| `references/format.md` | ユーザーが任意の `DESIGN.md` を望んだとき(位置づけと優先順位) |
+| `references/extract.md` | URL・画像・pptx/pdf・言葉から色と書体を取り出すとき |
 | `references/presets.md` | テーマ(`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)の選び方と `theme` コマンド。旧プリセット id の読み替え |
 | `scripts/contrast.mjs` | 文字色と背景色のコントラスト比を確かめるとき |
 
@@ -30,24 +33,23 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 
 ### 1. 入力を集める
 
-- 何に合わせるのか(URL・ロゴ画像・資料・言葉・外部の `DESIGN.md`)を確認し、
+- 何に合わせるのか(URL・ロゴ画像・資料・言葉)を確認し、
   `references/extract.md` の該当する節の手順で色・書体・トーンを取り出す。
-- 既存の `DESIGN.md` と `styles.css` を読む。既にあるルールで今回触らないものは残す。
+- 既存の `styles.css` を読み、マーカーから今のテーマ名を確かめる。今回触らない上書きは残す。
+- プロジェクトルートに `DESIGN.md` があれば読む(ユーザー所有。書き換えない)。色の割り当てはテーマが優先。
 - スライド(`*.slide.tsx`)があるかを `ls` / `vantage routes` で確認しておく。
 
 ### 2. 提案して確認を取る
 
 書き込む前に、次の 2 つをユーザーに見せて確認を取る。
 
-- **役割 → トークンの対応表**(主色・強調・良い/悪い/注意・背景の段階・文字・チャート 5 色・書体)。
+- **役割 → トークンの対応表**(主色・背景の段階・文字・チャート 5 色・書体。良い/悪い/注意/情報/中立はテーマの意味トークンに任せる)。
   各行に「何に合わせてその色にしたか」を 1 語添える。
-- **トーンの説明**(2〜3 行。`DESIGN.md` の「全体のトーン」にそのまま入る文)。
+- **トーンの説明**(2〜3 行)。
 
 テーマで足りる場合はテーマ id(`references/presets.md`)で提案してよい。旧プリセット id(`default` / `calm` / `vivid` / `mono`)で頼まれたら新 id に読み替える。
 
-### 3. styles.css と DESIGN.md を同じステップで書く
-
-`styles.css`:
+### 3. テーマを当て、styles.css を書く
 
 - **テーマ範囲・チャート範囲のマーカーの中は手で編集しない。** 色・角丸・書体の出発点は 7 テーマ
   (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)から選び、コマンドで当てる:
@@ -100,10 +102,6 @@ Vantage アプリの見た目は 2 つのファイルで決まる。
 長い表(ダッシュボード): カードに `max-h-*` + `overflow-y-auto` の縦スクロール領域を作らず、
 ページング付きの `DataTablePreset`(`enablePagination`)にする(ホイールや End キーがページに届かなくなるため)。
 
-`DESIGN.md`: `references/format.md` の書式で書く。**色コードを書かない**(トークン名だけ)。
-150 行を超えない(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を出す)。ロゴなどの素材は
-`public/brand/logo.svg` のように `public/` 配下のパスで「ブランド素材」行に書く。
-
 ### 4. コントラストを確かめる
 
 主な文字色 / 背景色の組を、**ライトとダークの両方で**確かめる。
@@ -133,11 +131,11 @@ node <このスキルの場所>/scripts/contrast.mjs '<文字色>' '<背景色>'
 npx vantage check
 ```
 
-`HARDCODED_COLOR`(ページ内の色コード)や `DESIGN_MD_TOO_LONG` が出たらその場で直す。
+`HARDCODED_COLOR`(ページ内の色コード)などが出たらその場で直す。
 
 ### 7. 完了を報告する
 
-報告には、更新したファイル(`DESIGN.md` / `styles.css`)に加えて次を**必ず**入れる。
+報告には、更新したファイル(`styles.css` など)と当てたテーマ名に加えて次を**必ず**入れる。
 
 - プレビューページのパスと URL(`src/design-preview.tsx` → `/design-preview`)。
 - 「ホームなど既存の画面は一部の色しか使っていないので、変更が見えないことがある。配色はプレビュー
@@ -145,5 +143,5 @@ npx vantage check
 
 ## 会話中の指示との関係
 
-- 会話中の個別の指示(「このグラフだけ赤で」)は `DESIGN.md` より優先する。そのページだけ直せばよい。
-- 同じ指示が 2 回以上出たら、`DESIGN.md` への反映を提案する(反映するときはこの手順の 2 から)。
+- 会話中の個別の指示(「このグラフだけ赤で」)はテーマより優先する。そのページだけ直せばよい。
+- 同じ指示が 2 回以上出たら、`styles.css` の上書きへ反映することを提案する(この手順の 2 から)。

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

@@ -44,7 +44,7 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 - SPA で HTML がほぼ空のときは、`<script>` より先に CSS の `<link>` を探す。それも無ければ
   ユーザーにスクリーンショットかブランドカラーを聞く(推測で埋めない)。
 - 取得できない(認証・ボット対策)ときは、その旨を伝えてスクリーンショットをもらう。
-- ロゴを使うなら `public/brand/` に保存し、`DESIGN.md` の「ブランド素材」行にパスを書く。
+- ロゴを使うなら `public/brand/` に保存する。
 
 ## 画像・ロゴ
 
@@ -83,12 +83,10 @@ grep -oE 'font-family:[^;]+' /tmp/site.css | sort | uniq -c | sort -rn | head
 
 ## 外部の DESIGN.md(Stitch などが書いたもの)
 
-外部の DESIGN.md は YAML frontmatter や本文に**値**(hex・px・フォント名)を持っていることが多い。
-Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ移し、`DESIGN.md` をトークン参照に
-書き直す**。
+外部の DESIGN.md が値(hex・px・フォント名)を持っているときは、値だけを拾って**テーマ側**へ移す。
+Vantage に `DESIGN.md` は作らない。
 
-1. 値を拾う: primary / secondary / surface / background / on-* / error / success / warning、
-   フォント、角丸。
+1. 値を拾う: primary / secondary / surface / background / on-* / error、フォント、角丸。
 2. 対応づける:
 
    | 外部の名前 | Vantage のトークン |
@@ -98,15 +96,14 @@ Vantage の `DESIGN.md` は値を持たないので、**値を `styles.css` へ
    | 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` に書く |
+   | error | `--destructive`(意味トークンの negative) |
+   | success / warning | テーマの意味トークン(positive / warning)に任せる。チャートの色には割り当てない |
    | radius / corner | `--radius` |
    | display / headline font | `--slide-font-display`(+ ページの見出しなら `--font-sans`) |
    | body font | `--font-sans`(ページ本文)と `--slide-font-body` |
 
 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`)、ユーザーに確認して削除する。
+   (チャート色・書体の書き方は SKILL.md の手順 3)。外部にダークの値が無ければ、ライトの色相を保って
+   明度だけ反転した値を作り、コントラストを確かめる。
+4. 外部のトーン・Do/Don't・コンポーネントのルールは、ユーザーが望んだときだけ任意の `DESIGN.md`
+   (`format.md`)に要約して残す。値は書かない。

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

@@ -1,173 +1,12 @@
-# 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-*` の中から割り当てるか、「専用トークンなし」と書く。
-- ページ本文の書体は `--font-sans`(`styles.css` の `body` が `font-family: var(--font-sans)` で参照する。
-  テーマを当てると `--font-sans` もテーマの値になる。変えるときはテーマ範囲のマーカーの後ろで上書きする)。
-- `--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 theme <id>` を使う
-  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
-  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
-
-## 書体 (Typography)
-
-| 用途 | 指定 | 備考 |
-| --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | 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 チャート・円グラフの多用・装飾目的のグラデーション。
-````
+# 任意の DESIGN.md
+
+`DESIGN.md` は、プロジェクトルートに置く**ユーザー所有の任意のファイル**。新規プロジェクトには作らない。
+ユーザーが望んだときだけ、ユーザー固有の意図(密度・スライドの見出し方針・ブランド素材など)を書く。
+
+- 色・書体・角丸の値と色の割り当ては書かない。テーマ(`styles.css`、ThemeDialog、CLI の `theme` / `chart`)が持つ。
+  デザイン変更の依頼を `DESIGN.md` に記録しない。
+- 見た目の規則は `AGENTS.md` の「見た目の規約」節が正本。`DESIGN.md` はそれに**加えて**従われる。
+  色の割り当てが食い違うときはテーマを優先する。
+- 既存の `DESIGN.md` は消さない。`vantage upgrade` も `vantage add agents` も書き換えない。
+- 150 行以内(超えると `vantage check` が `DESIGN_MD_TOO_LONG` を警告する)。YAML frontmatter は付けない。
+- ロゴ・画像は `public/` 配下のパスで参照する(`public/brand/logo.svg`)。

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

@@ -48,13 +48,3 @@ npx @squadbase/vantage-template theme ocean --reset-chart   # chart コマンド
 **`/* squadkit-theme:end */`(チャート範囲があればその終端)より後ろ**に、変えたいトークンだけ
 `:root` と `.dark, [data-theme="dark"]` の**両方**に書く。前に書くとテーマに負ける。
 `scripts/contrast.mjs` で `--primary-foreground` / `--primary` をライトとダークで確かめる。
-
-## DESIGN.md
-
-`format.md` の雛形から作り、選んだテーマに合わせて次の行だけ書き換える。
-
-- 「全体のトーン」: 上の表のトーンを 2〜3 行に。
-- 主色の行: テーマの主色の色味(「青」「橙」など。**色コードは書かない**)。
-- チャートの色味: テーマの `--chart-1..5` の並び(適用後の `styles.css` を見る)。
-- 良い / 悪い / 注意: 専用トークンは無い。`--chart-*` から割り当てるか「専用トークンなし」と書く。
-  `--destructive` を普通の系列色に使わない。

package/base-template/AGENTS.md

@@ -7,8 +7,8 @@
 > このファイルと `agents/*.md` は、いずれも **Vantage フレームワークが所有する正本**の
 > コピーです。手で書き換えても、`vantage upgrade` を実行するとフレームワーク同梱の正本から
 > 再同期されて上書きされます。アプリ固有のメモは別ファイル(例: `README.md`)に書いてください。
-> 例外はプロジェクトルートの `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
-> `vantage add agents` も触らない。→「デザインの意図(DESIGN.md)」)。
+> 例外はプロジェクトルートの任意の `DESIGN.md` で、これは**ユーザーが所有**します(`vantage upgrade` も
+> `vantage add agents` も触らない。→「見た目の規約」)。
 >
 > 手順を伴う踏み込んだワークフローは、同梱の Claude Code Skill に分かれています。このファイルは
 > 「地図」、`agents/*.md` は「種類ごとの静的リファレンス」、Skill は「手順書」という役割分担です。
@@ -102,7 +102,7 @@ root/
 | `@squadbase/vantage/markdown` | `MarkdownRenderer`(Shiki を隔離するための専用サブパス) |
 | `@squadbase/vantage/server` | `ApiContext`・`ApiHandler`・`HttpError`・`isHttpError`・`json`(server/ 側でのみ使う) |
 
-**KPI は `KpiCard`、増減は `Delta`(`comparison` と `polarity` を渡す)。** 向き・率・色は値から計算
+**KPI は `KpiCard`、増減は `Delta`(`comparison` を渡し、下がって良い指標は `betterWhen="down"`)。** 向き・率・色は値から計算
 されるので手で渡さない。`TrendIndicator` は非推奨(`direction` を手で渡すので値と食い違いうる)。props は
 `vantage docs kpi-card` / `vantage docs delta` を引く。
 
@@ -125,17 +125,30 @@ import { KpiCard, Delta } from "@squadbase/vantage/components";
 - `server/` が**無い** → 外部 API を直接叩くなら `useQuery`(→ `agents/page.md`)。自前の API が
   要るようになったら `server/api/*.ts` を足すだけでよい(設定変更は不要)。
 
-## デザインの意図(DESIGN.md)
+## 見た目の規約
 
-プロジェクトルートに `DESIGN.md` があれば、**UI(ページ・スライド・コンポーネント)を書く前に
-読む。** 色・チャート・書体・レイアウトの使い分けがトークン名で書いてあるので、それに従って
-トークンで書く(値は `styles.css` にあり、`DESIGN.md` には色コードを書かない)。
+色・書体・角丸などの**値と色の割り当ては、テーマ(`styles.css` の `/* theme: <name> */` マーカー以降の
+上書き)だけが持つ。** ここには値を書かず、使い分けの規則だけを置く。UI(ページ・スライド・
+コンポーネント)はこの規則に従い、色は必ずトークンで指定する(色コード・素のパレットクラスは書かない)。
 
-- **会話中の指示は `DESIGN.md` より優先する。** 同じ指示が繰り返されたら、`DESIGN.md` への
-  反映をユーザーに提案する。
-- **「色を変えて」「ブランドに合わせて」などデザイン全体の変更は、ファイルごとに直さない。**
-  Skill `vantage-design` の手順で `DESIGN.md` と `styles.css` をまとめて更新する。
-- `DESIGN.md` はユーザーの持ち物。`vantage upgrade` は書き換えない。
+- **意味トークン:** 良い = `positive`、悪い = `negative`、注意 = `warning`、情報 = `info`、
+  中立 = `neutral`。系列色は `chart-1`〜`chart-5` を番号順に使う(5 系列まで。超えるなら「その他」に
+  まとめる)。増減の良否は指標の性質(コスト減・解約率減は良い)で決めて
+  positive / negative に分け(`KpiCard` / `Delta` の `betterWhen`。下がって良い指標は `betterWhen="down"`)、向きは ▲▼ や符号で表す。
+- **レイアウト:** 内容はカードで包む。順序は KPI → チャート → 表。値が 1 つなら KPI にする
+  (1 本の棒グラフにしない)。強調は 1 画面(スライドは 1 枚)に 1 か所。数値には単位と比較対象を添える。
+- **Do:** トークンで色を指定する / 色の意味をアプリ全体でそろえる / チャートのタイトルに結論を書く。
+- **Don't:** 色コードや素のパレットクラスを書く / `dark:` を並べる / 3D・装飾目的のグラデーション・
+  円グラフの多用 / 同じチャートで `negative` を普通の系列色に使う。
+- スライド固有の規則は `agents/slide.md`。
+
+**任意の `DESIGN.md`:** プロジェクトルートにあれば読んで従う(密度・スライドの見出し方針・
+ブランド素材などユーザー固有の意図)。AGENTS.md の規則に加えて従うが、**色の割り当てはテーマを優先**
+する。新規には作らない。ユーザーの持ち物で、`vantage upgrade` は書き換えも削除もしない。
+
+**デザイン変更の依頼**(「もっと落ち着いた色に」「ブランドに合わせて」など)は、ファイルごとに
+直さず、テーマの切り替えかスタイルシートの上書きで完結させる。`DESIGN.md` には記録しない。今のテーマ名は
+`styles.css` の `/* theme: <name> */` マーカーから読む。手順は Skill `vantage-design`。
 
 ## 何を書くか → どのファイルを読むか
 
@@ -212,7 +225,7 @@ body・レスポンスの status と形)まで出る。`vantage check --json` /
 - **`vantage-app`** — アプリを一から作る / 構成を広げるときの進め方と検証の順序
 - **`vantage-add-feature`** — 既存アプリに page / api / ui を 1 つ足す定型
 - **`vantage-slide`** — `.slide.tsx` でスライドデッキを書く(キャンバスの予算・段階表示・pptx 書き出し)
-- **`vantage-design`** — `DESIGN.md` と `styles.css` をまとめて作る / 直す(配色・書体・ブランド合わせ)
+- **`vantage-design`** — テーマの切り替え・`styles.css` の上書きで見た目を直す(配色・書体・ブランド合わせ)
 - **`vantage-pitfalls`** — Base UI(≠ Radix)の癖など、静かに壊れる落とし穴のリファレンス
 - **`project-storage`** — Squadbase の Project Storage(アップロード済みファイル)をブラウザから読み書きする
 

package/base-template/agents/page.md

@@ -4,7 +4,7 @@
 (ダッシュボード)を書くときに読んでください。前提となる不変条件・ディレクトリ構造は
 `AGENTS.md` を先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで配色・書体・レイアウトの規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
 
 ## 最小アプリ(2 ファイル)
 

package/base-template/agents/slide.md

@@ -4,7 +4,13 @@
 スライドデッキを書くときに読んでください。不変条件・ディレクトリ構造は `AGENTS.md` を
 先に読んでいる想定です。
 
-プロジェクトルートに `DESIGN.md` があれば、書き始める前に読んで「スライド」の節と配色・書体の規則に従う。
+書き始める前に `AGENTS.md` の「見た目の規約」(と、あればプロジェクトルートの `DESIGN.md`)に従う。
+スライド固有の規則:
+
+- 1 枚に 1 メッセージ。見出しに結論を書く。
+- 色は `--slide-bg` / `--slide-fg` / `--slide-accent` / `--slide-muted` を使う(既定では
+  `--background` / `--foreground` / `--primary` / `--muted-foreground` に連動)。
+- 強調色は 1 枚につき 1 か所まで。
 
 ## スライドは `.slide.tsx` で書く
 

package/base-template/bun.lock

@@ -6,8 +6,8 @@
       "name": "vibe-app",
       "dependencies": {
         "@squadbase/react": "^0.1.0",
-        "@squadbase/vantage": "0.6.2-dev1.b40ce36",
-        "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
+        "@squadbase/vantage": "0.6.2-dev1.48b34e1",
+        "@squadbase/vantage-sdk": "0.1.1-dev1.c070adc",
         "date-fns": "^4.1.0",
         "lucide-react": "^0.468.0",
         "react": "^19.3.1",
@@ -196,9 +196,9 @@
 
     "@squadbase/react": ["@squadbase/react@0.1.0", "", { "dependencies": { "zod": "^4.3.6" }, "peerDependencies": { "@types/react": "17.x || 18.x || 19.x", "react": "17.x || 18.x || 19.x" }, "optionalPeers": ["@types/react"] }, "sha512-k+Dpyj7eH+Yjydw54iEluCjYDae086d12hWgBjNMpw4wLbQGz3CrJ6Yipodg8n1cKUt7zvwddlcTHd79bgKsXg=="],
 
-    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.b40ce36", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-+9YmgzKeO6yeTcG2/oejTVl55xZFczPeklP8DA4JbSeWiffq0Cx4ZNl9iVUtyMTIx/roaW1bRF3sgSkLeNeTmQ=="],
+    "@squadbase/vantage": ["@squadbase/vantage@0.6.2-dev1.48b34e1", "", { "dependencies": { "@base-ui/react": "^1.6.0", "@hono/node-server": "^2.1.5", "@streamdown/code": "^1.1.1", "@tailwindcss/vite": "^4.3.3", "@tanstack/react-query": "^5.101.2", "@tanstack/react-router": "^1.170.17", "@tanstack/react-table": "^8.21.3", "@vitejs/plugin-react": "^6.1.2", "class-variance-authority": "^0.7.1", "clsx": "^2.1.1", "cmdk": "^1.1.1", "date-fns": "^4.1.0", "echarts": "^6.0.0", "esbuild": "0.28.1", "fflate": "^0.8.3", "hono": "^4.13.13", "html-to-image": "^1.11.13", "lucide-react": "^0.468.0", "papaparse": "^5.7.0", "picocolors": "^1.1.1", "react-day-picker": "^10.0.1", "read-excel-file": "^9.3.10", "shiki": "3.23.0", "streamdown": "^2.5.0", "tailwind-merge": "3.6.0", "tailwindcss": "^4.3.3", "tw-animate-css": "^1.0.0", "vite": "^8.3.4" }, "peerDependencies": { "react": ">=18.2.0", "react-dom": ">=18.2.0", "typescript": ">=5.0.0" }, "optionalPeers": ["typescript"], "bin": { "vantage": "dist/cli.js" } }, "sha512-Frh0QYr74VHPMN9ZkWSccAZgdaT41/aOSxboxJMYwYA89fc5GRyNqWoEzyNUhyazKnGpmT8yXEqhJ4qBhrn0VA=="],
 
-    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.3bf8f69", "", {}, "sha512-uCvBiPZH6d/mnZjS1u6g/XN0yuZS7K+/p5pqYK3qXAiHK3tM8jCMKFfHFrmc+G8wSpM7glNW/cawdlsGOCaNBQ=="],
+    "@squadbase/vantage-sdk": ["@squadbase/vantage-sdk@0.1.1-dev1.c070adc", "", {}, "sha512-tB1/cQfBa9YJrU0J/+WGcX9pttVV8dbHIg8TSImQaZ0F2mnkpeeHQ1jVi3YUwc/84fEcoyGLbJbtJHZAvjuY4Q=="],
 
     "@streamdown/code": ["@streamdown/code@1.1.1", "", { "dependencies": { "shiki": "^3.19.0" }, "peerDependencies": { "react": "^18.0.0 || ^19.0.0" } }, "sha512-i7HTNuDgZWb+VdrNVOam9gQhIc5MSSDXKWXgbUrn/4vSRaSMM+Rtl10MQj4wLWPNpF7p80waJsAqFP8HZfb0Jg=="],
 

package/base-template/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@squadbase/react": "^0.1.0",
-    "@squadbase/vantage": "0.6.2-dev1.b40ce36",
-    "@squadbase/vantage-sdk": "0.1.1-dev1.3bf8f69",
+    "@squadbase/vantage": "0.6.2-dev1.48b34e1",
+    "@squadbase/vantage-sdk": "0.1.1-dev1.c070adc",
     "date-fns": "^4.1.0",
     "lucide-react": "^0.468.0",
     "react": "^19.3.1",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@squadbase/vantage-template",
-  "version": "0.1.1-dev1.35f56e8",
+  "version": "0.1.1-dev1.39049f4",
   "description": "CLI tool for initializing and customizing Squadbase Vantage projects.",
   "keywords": [
     "squadbase",
@@ -50,7 +50,7 @@
     "@ai-sdk/openai": "2.0.122",
     "ai": "^5.0.52"
   },
-  "gitHead": "35f56e88a8ab89c59891335dcb4811895f729f4e",
+  "gitHead": "39049f4ebd9dda9d29e83b229e99f0b155dee613",
   "scripts": {
     "sync-base": "rsync -a --delete --exclude='node_modules' --exclude='dist' --exclude='.vantage' --exclude='*.tsbuildinfo' --exclude='*.log' template/ base-template/ && mv base-template/.gitignore base-template/_gitignore",
     "build": "pnpm run sync-base && tsup",

package/base-template/DESIGN.md

@@ -1,109 +0,0 @@
-<!--
-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` | 主要ボタン、選択中の状態。既定(テーマ `neutral`)は青 |
-| 強調 (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`
-  (現在はテーマ `neutral`: 青 → 黄緑 → 赤紫 → ティール → 紫)。
-- 1 系列だけを目立たせるときは、その系列を `--chart-1`、残りをすべて `--chart-5` にする。
-- 良い / 悪いを色で塗り分けるときは `--chart-2` / `--destructive`。色だけに頼らず ▲▼ や符号も添える。
-- 系列は 5 つまで。それ以上はグループ化するか「その他」にまとめる。
-- 禁止: 同じチャートで `--destructive` を普通の系列色として使う(悪い値に見える)。
-- 禁止: 隣り合う系列に `--chart-3` と `--chart-4` を並べて細い線で描く(見分けにくい)。
-- 配色を丸ごと変えるときは `npx @squadbase/vantage-template theme <id>` を使う
-  (`neutral` / `ocean` / `forest` / `sunset` / `violet` / `rose` / `mono`)。チャートだけ別の配色にするときは
-  `chart <preset>`(`blue` / `ocean` / `sunset` / `forest` / `berry` / `mono`)。
-
-## 書体 (Typography)
-
-| 用途 | 指定 | 備考 |
-| --- | --- | --- |
-| 見出し・本文 | 日本語を含むシステムフォント(`--font-sans`) | 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 チャート・円グラフの多用・装飾目的のグラデーション。