@cakejp/design-system 0.3.0

package/AGENTS.md

@@ -0,0 +1,144 @@
+# Cake.jp Design System — AGENTS.md（Codex向け）
+
+## このDSについて
+
+Cake.jp のフロントエンドとデザインシステムを正式に接続する統合デザインシステム。
+EC / BtoC / コマース向け。**3-tier 構造で 104 コンポーネント**:
+- foundations: 46個（shadcn ベース汎用 UI）
+- primitives: 35個（業界汎用パターン・jobboard 等他事業でも再利用可）
+- ec: 23個（Cake.jp / EC 事業特化）
+
+---
+
+## 必須: セッション開始時に読み込むファイル
+
+Codex はファイルを自動読み込みしないため、**タスク開始前に以下を明示的に読み込むこと**:
+
+```
+1. contracts/rules.json        # 禁止パターン・アクセシビリティ要件
+2. contracts/components.json   # 全104コンポーネント定義（3-tier）
+3. tokens.json                 # カラー・タイポグラフィ・スペーシングトークン
+```
+
+本番実装・新規コンポーネント作成の場合はさらに:
+```
+4. CLAUDE_PRODUCTION.md        # 本番参照ルール・Figmaチェックリスト
+```
+
+---
+
+## 技術スタック
+
+- React 19 + TypeScript
+- Vite（ビルド）
+- **Tailwind CSS v4**（`@import "tailwindcss"` 構文。`@tailwind base` / `@tailwind components` は v3 記法で**使用禁止**）
+- shadcn/ui（Radix UI ベース、Cake.jp テーマ適用済み）
+- Storybook（`@storybook/react-vite`）
+- CVA（class-variance-authority）でバリアント管理
+- **Lucide React + iconsax-react**（アイコン。`heroicons` `phosphor-icons` への置き換え禁止）
+
+---
+
+## ディレクトリ構成
+
+```
+src/
+├── components/
+│   ├── foundations/ # shadcn ベース汎用 UI（46個・全事業共通）
+│   ├── primitives/  # 業界汎用パターン（35個・jobboard等他事業でも再利用可）
+│   ├── ec/          # Cake.jp / EC 事業特化（23個・商品・配送・クーポン等）
+│   └── pages/       # ページ単位のストーリー
+├── prototypes/      # /mock スキルで生成されたプロトタイプ
+├── lib/
+│   └── utils.ts     # cn() ユーティリティ
+└── index.css        # カラートークン定義 + Tailwind 設定
+```
+
+### 3層構造の依存ルール
+
+```
+ec/         ← Cake.jp 特化（最上位）
+  ↓
+primitives/ ← 業界汎用パターン
+  ↓
+foundations/ ← shadcn ベース（最下位）
+```
+
+- `foundations/` は他層に依存しない
+- `primitives/` は `foundations/` のみ参照可
+- `ec/` は `foundations/` と `primitives/` を参照可
+- **逆方向の依存は禁止**（`bash scripts/check-deps.sh` で検証）
+
+---
+
+## ❌ スクラッチコード禁止ルール（強制）
+
+### 書く前ゲート
+
+以下のいずれかを書こうとしたら**手を止めて** `contracts/components.json` と Storybook で同等パターンを探すこと:
+
+| 書こうとしているもの | 確認先 |
+|-------------------|--------|
+| `::before` / `::after` 装飾（バー・ドット・矢印） | SectionHeader, Chip, Badge, ListItem の variants |
+| `rgba(...)` / `#xxxxxx` ハードコードカラー | `tokens.json` のトークン名を使う |
+| `box-shadow: ...` カスタム影 | `tokens.json` の `shadow.*` |
+| `border-radius: ...px` カスタム角丸 | `tokens.json` の `radius.*` |
+| カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` |
+
+DSに存在しない場合のみカスタム実装を許可。その場合はコメントで理由を記載すること。
+
+### 書いた後ゲート（強制）
+
+**.tsx / .css / .module.css を編集したら必ず実行**:
+
+```bash
+bash scripts/lint-scratch.sh
+```
+
+エラーが出たら修正してから次のタスクに進むこと。**エラーありのまま完了報告禁止。**
+
+**コンポーネントを追加・削除したら必ず実行**:
+
+```bash
+bash scripts/check-drift.sh   # contracts と実ファイルの一致を検証
+bash scripts/check-deps.sh    # 3-tier 依存方向違反を検出
+```
+
+`contracts/components.json` の `meta.counts` と実ファイル数が一致していること、
+foundations → primitives → ec の依存方向が正しいことを確認すること。
+
+---
+
+## コンポーネント追加時のチェックリスト
+
+- [ ] `src/index.tsx` にエクスポートを追加
+- [ ] `contracts/components.json` にコンポーネント定義を追加
+- [ ] `contracts/components.json` の `meta.counts` を更新
+- [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
+- [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成
+
+---
+
+## ドキュメント構成
+
+| ファイル | 内容 |
+|---------|------|
+| **AGENTS.md**（本ファイル） | Codex向け。セッション開始時の読み込み指示・編集後コマンドを明記 |
+| **CLAUDE.md** | Claude Code向け概要（フック自動実行） |
+| **contracts/components.json** | 全104コンポーネントの構造化定義（3-tier・バリアント・アクセシビリティ要件） |
+| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・タイポグラフィ定義 |
+| **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
+| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト（Cake.jp固有） |
+
+---
+
+## 重要な制約（AI生成コードの典型的な誤り）
+
+`contracts/rules.json` の `aiPatterns` セクションで詳細を確認すること。主な注意点:
+
+- **価格表記**: `¥{数字,区切り}（税込）` — `円` `税込み` `(税込)` は禁止
+- **日付表記**: `M月D日（曜日）` — `YYYY/MM/DD` や英語表記禁止
+- **aria-label**: 日本語で記述 — 英語 aria-label 禁止
+- **input type="date"**: 使用禁止 — PopoverとCalendarを組み合わせる
+- **Tag に onClick**: 禁止 — 押せるものは Chip を使う
+- **SectionHeader 手書き**: 禁止 — `SectionHeader` コンポーネントを使う

package/CHANGELOG.md

@@ -0,0 +1,115 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+---
+
+## [0.3.0] - 2026-05-04 (Unreleased)
+
+### 🚨 Breaking Changes
+
+> v0.2.x で動いていたコードは **後方互換 alias で動き続けます** が、新名へのマイグレーションを推奨。
+> 詳細は [MIGRATION.md](./MIGRATION.md) を参照。
+>
+> ```bash
+> # 自動移行
+> npx @cakejp/design-system codemod v0.2-to-v0.3 ./src
+> ```
+
+#### コンポーネント rename
+
+業界標準命名に揃えました。旧名は `@deprecated` alias として v1.0 まで動作します。
+
+| Before | After | 理由 |
+|---|---|---|
+| `TopAppBar` | `Header` | Material 固有用語 → HTML semantic |
+| `BottomNavigation` | `BottomTabBar` | Material 固有 → iOS / Bootstrap 慣習 |
+| `BottomAction` | `StickyActionBar` | 用途不明 → Web 慣習 |
+| `Balloon` | `CoachMark` | 日本語圏特有 → Atlassian / Pendo 標準 |
+| `NavigationRibbon` | `SubNav` | MS Office 用語 → GitHub Primer 標準 |
+| `CategoryIconStrip` | `CategoryShortcuts` | 曖昧 → Shopify / Ant Design 慣習 |
+| `MypageSidebar` | `SideNav` + `mypageMenuGroups` | 汎用化 + データ分離 |
+| `mypageSidebarDefaultGroups` | `mypageMenuGroups` | 命名整理 |
+| `Banner` | `Alert` (bordered variant + prop-based API) | Alert と機能重複していたため統合 |
+
+#### ディレクトリ構造変更（社内開発のみ影響）
+
+```
+Before:                     After:
+src/components/             src/components/
+├── ui/         (46個)      ├── foundations/  (46個・shadcn ベース)
+└── cake/       (57個)      ├── primitives/   (35個・業界汎用)
+                            └── ec/           (23個・Cake.jp 特化)
+```
+
+外部 npm 利用側はバレル export 経由なので影響なし。社内コードで `@/components/ui/` `@/components/cake/` を直接 import している場合のみ更新が必要。
+
+### ✨ Added
+
+- **`Alert` の bordered variant に prop-based API 追加**
+  - `<Alert variant="warning" title="..." description="..." action={<Button />} />` と書ける
+  - children を渡さない場合は prop-based レンダリング（旧 Banner の使い勝手）
+  - children があれば従来通り composable 形式
+  - 自動アイコン: variant に応じて Warning2 / InfoCircle / TickCircle / CloseCircle
+  - 旧 `Banner` を Alert 既存スタイル（白bg + 色枠 + ring）に統合
+  - **Banner は削除**（codemod は Banner 利用検出時に警告のみ、手動移行推奨）
+- **3-tier 構造**: `foundations/` → `primitives/` → `ec/` の依存階層を明確化
+- **`SideNav`**: 汎用サイドナビ（jobboard 等の他事業でも再利用可能）
+- **`mypageMenuGroups`**: Cake.jp マイページの 17 項目メニューデータ
+- **`Header.logo` prop**: `<Header logo={<CakeLogo />} variant="logo" />` のように logo を明示
+- **依存方向 Lint** (`scripts/check-deps.sh`): `npm run check` で自動検証
+- **Codemod スクリプト**: `npx @cakejp/design-system codemod v0.2-to-v0.3` で自動移行
+- **MIGRATION.md**: 詳細な移行ガイド
+- **runtime deprecation 警告**: 旧 API 利用時に dev mode で console.warn
+
+### 🐛 Fixed
+
+- `collapsible.stories.tsx` で未 import の `ChevronDown` を `ArrowDown2` に修正
+- `CheckboxGroup` で `<Label asChild>` による React.Children.only エラーを修正
+- v0.2.0 で 12 個のコンポーネントが barrel export 漏れだった問題を v0.2.1 で部分修正、v0.3.0 で完全対応
+- 数件の relative import パス漏れを修正（refactor 後の追従）
+
+### 📦 Changed
+
+- `MypageSidebar` の API: `groups` を必須化し、汎用 `SideNav` に分離（旧 API は wrapper で維持）
+- `Header` から `CakeLogo` の自動 fallback を削除（`logo` prop で明示）
+- `pages/cake/` で `Header` 利用箇所すべてに `logo={<CakeLogo />}` を追加
+
+### 🛡 Internal
+
+- `scripts/check-drift.sh` を 3-tier 構造に対応
+- `scripts/check-deps.sh` を新規追加（依存方向 Lint）
+- `scripts/generate-component-lookup.mjs` を 3-tier 構造に対応
+- `contracts/components.json` を 3-tier 構造に再編成
+- `mcp-server/data/components.json` の filePath 37 件を更新
+- `.storybook/main.ts` の glob パターンを 3-tier に対応
+
+---
+
+## [0.2.2] - 2026-05-03
+
+### 🐛 Fixed
+
+- 12 個のコンポーネントが barrel export から漏れていた問題を修正
+  - DataTable, AnniversaryCard, BannerCarousel, BottomAction, BulkActionBar, ErrorState, MypageSidebar, ProductCarousel など
+  - cake-api/frontend で `import { CategoryScroll } from '@cakejp/design-system'` がエラーになる問題を解消
+
+---
+
+## [0.2.1] - 2026-04-29
+
+### 🐛 Fixed
+
+- CategoryScroll / CategoryIconStrip / Spinner を public API に追加（barrel export 漏れの部分修正）
+
+---
+
+## [0.2.0] - 2026-03-18
+
+### ✨ Added
+
+- npm パッケージとして DS を配布可能にする初版リリース
+- 91 個のコンポーネントを barrel export

package/CLAUDE.md

@@ -0,0 +1,188 @@
+# Cake.jp Design System — 設計ルールブック
+
+## 目的
+
+Cake.jp のフロントエンドとデザインシステムを正式に接続する。
+PdM や社長が AI（Claude 等）で HTML モックを作る際、このリポジトリを参照して高精度なモックを生成できるようにする。
+デザイナー・フロントエンドがいなくても、モック → バックエンド開発へそのまま移行できる品質を目指す。
+
+---
+
+## 重要: コードを書く前に必ず読むこと
+
+**コードを1行でも書く前に、以下のファイルを必ず読み込むこと。**
+
+| ファイル | 内容 | いつ読むか |
+|---------|------|----------|
+| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・ライティングルール | **コード生成前に必ず** |
+| **contracts/components.json** | 全103コンポーネントの定義（variants・rules・accessibility） | コンポーネント作成・修正時 |
+| **tokens.json** | カラー・タイポグラフィ・スペーシング・影・角丸 | トークン値を参照する時 |
+| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト・本番サイト対応表 | 本番再現・新規コンポーネント作成時 |
+
+> ※ Codex を使う場合は **AGENTS.md** を参照すること（明示的なファイル読み込み手順を記載）。
+
+---
+
+## ❌ スクラッチコード禁止ルール（強制）
+
+> 「読みます」ではなく「書く前にブロックする」ゲートとして運用すること。
+
+### 書く前ゲート（以下のパターンを書こうとしたら必ずDSを確認すること）
+
+下記のいずれかを CSS または JSX に追加しようとした場合、**書く手を止めて** `contracts/components.json` と Storybook で同等パターンを探すこと:
+
+| 追加しようとしているもの | DSで確認すること |
+|------------------------|----------------|
+| `::before` / `::after` で装飾（色付きバー・ドット・矢印等） | SectionHeader, Chip, Badge, ListItem の variants |
+| カスタムカラー（`rgba(...)` / `#xxxxxx` / ハードコード） | `tokens.json` のトークン名を使う。存在しないトークンは使わない |
+| カスタムシャドウ（`box-shadow: ...`） | `tokens.json` の `shadow.*` を使う |
+| カスタムボーダー半径（`border-radius: ...px`） | `tokens.json` の `radius.*` を使う |
+| カスタムフォントサイズ・ウェイト | `tokens.json` の `typography.*` を使う |
+| 新しい `<div>` ラッパーでレイアウト構造を作る | Card, Section, Stack 等のコンポーネントに置き換えられないか確認 |
+
+**確認手順:**
+1. `contracts/components.json` で該当コンポーネントを検索
+2. Storybook（`npm run storybook`）で実際の見た目を確認
+3. DSに存在しない場合のみ、カスタム実装を許可（その場合はコメントで理由を記載）
+
+### 書いた後ゲート（強制）
+
+`.tsx` `.css` `.module.css` を**1ファイルでも編集したら必ず実行**:
+
+```bash
+bash scripts/lint-scratch.sh
+```
+
+エラーが出た場合: **そのエラーを修正するまで次のタスクに進んではならない。**
+
+> lint-scratch.sh が通っていないコードは未完成扱い。
+
+---
+
+## ドキュメント構成
+
+| ファイル | 内容 |
+|---------|------|
+| **CLAUDE.md**（本ファイル） | 概要・技術スタック・コマンド（Claude Code用） |
+| **AGENTS.md** | 同上（Codex用。セッション開始時の読み込み指示・編集後コマンドを明記） |
+| **contracts/components.json** | 全103コンポーネントの構造化定義（バリアント・アクセシビリティ要件） |
+| **contracts/rules.json** | 禁止パターン・アクセシビリティ要件・タイポグラフィ定義 |
+| **tokens.json** | カラー・スペーシング・シャドウトークンの機械可読定義 |
+| **CLAUDE_PRODUCTION.md** | 本番実装参照ルール・Figmaチェックリスト（Cake.jp固有） |
+
+---
+
+## デザインリソース
+
+| リソース | URL |
+|---------|-----|
+| Figma Design System | https://www.figma.com/design/ExHuJOWJChJtk0qiskqEsI/Cake.jp-Design-System?node-id=18168-44099 |
+
+---
+
+## 技術スタック
+
+- React 19 + TypeScript
+- Vite（ビルド）
+- Tailwind CSS v4（`@import "tailwindcss"` 構文。`@tailwind base` は v3 記法で使用禁止）
+- shadcn/ui（Radix UI ベース、Cake.jp テーマ適用済み）
+- Storybook（`@storybook/react-vite`）
+- CVA（class-variance-authority）でバリアント管理
+- Lucide React + iconsax-react（アイコン）
+
+---
+
+## ディレクトリ構成
+
+```
+src/
+├── components/
+│   ├── foundations/ # shadcn ベース汎用 UI（46個・全事業共通）
+│   ├── primitives/  # 業界汎用パターン（35個・jobboard等他事業でも再利用可）
+│   ├── ec/          # Cake.jp / EC 事業特化（23個・商品・配送・クーポン等）
+│   └── pages/       # ページ単位のストーリー
+├── prototypes/      # /mock スキルで生成されたプロトタイプ
+├── lib/
+│   └── utils.ts     # cn() ユーティリティ
+└── index.css        # カラートークン定義 + Tailwind 設定
+```
+
+### 3層構造の依存ルール
+
+```
+ec/         ← Cake.jp 特化（最上位）
+  ↓
+primitives/ ← 業界汎用パターン
+  ↓
+foundations/ ← shadcn ベース（最下位）
+```
+
+- `foundations/` は他層に依存しない
+- `primitives/` は `foundations/` のみ参照可
+- `ec/` は `foundations/` と `primitives/` を参照可
+- **逆方向の依存は禁止**（primitives から ec を import する等）
+
+---
+
+## コマンド
+
+```bash
+# 開発サーバー（Storybook）
+npm run storybook
+
+# プロトタイプビューアー
+npm run dev
+# → http://localhost:5173/prototypes
+
+# ビルド
+npm run build-storybook
+
+# パッケージビルド（npm install 時に自動実行）
+npm run build:lib
+
+# 型チェック
+npx tsc --noEmit
+
+# リント
+npm run lint
+
+# スクラッチ検出（実装後に必ず実行）
+bash scripts/lint-scratch.sh
+
+# コンポーネント再利用チェック
+bash scripts/check-story-reuse.sh
+
+# ドリフト検出（コンポーネント追加後に実行）
+bash scripts/check-drift.sh
+
+# 全チェック一括実行
+npm run check
+```
+
+---
+
+## カラートークン早見表
+
+| 用途 | トークン |
+|------|---------|
+| 背景（白） | `var(--color-white)` |
+| ブランド色（メイン） | `var(--color-brand-500)` |
+| テキスト（強） | `var(--color-gray-900)` |
+| テキスト（中） | `var(--color-gray-600)` |
+| テキスト（弱） | `var(--color-gray-400)` |
+| エラー | `var(--color-red-500)` |
+| 成功 | `var(--color-green-500)` |
+
+詳細は `tokens.json` を参照。
+
+---
+
+## コンポーネント追加時のチェックリスト
+
+新しいコンポーネントを追加したら、以下を必ず更新:
+
+- [ ] `src/index.tsx` にエクスポートを追加
+- [ ] `contracts/components.json` にコンポーネント定義を追加
+- [ ] `contracts/components.json` の `meta.counts` を更新
+- [ ] `bash scripts/check-drift.sh` を実行して乖離がないことを確認
+- [ ] Storybook のストーリーファイル（`.stories.tsx`）を作成

package/CLAUDE_PRODUCTION.md

@@ -0,0 +1,121 @@
+# Cake.jp DS — 本番実装・Figma 参照ルール
+
+> CLAUDE.md から分割。本番テンプレート・CSS・CDN アセットの参照ルール、Figma チェックリスト。
+
+## 本番実装の参照ルール（最重要）
+
+新しいコンポーネントの作成・既存コンポーネントの改善時は、**必ず本番の実装を最初に確認する**。
+ゼロから再現するのではなく、**本番のアセット・パターンを再利用する**ことを第一とする。
+
+### 参照先ディレクトリ
+
+| リソース | パス | 内容 |
+|---------|------|------|
+| 本番テンプレート | `/Users/okunokeisuke/Desktop/www-test-htdocs/app/views/elements/2023/` | CTP テンプレート（HTML構造の参考） |
+| 本番CSS | `/Users/okunokeisuke/Desktop/www-test-htdocs/app/webroot/css/2023/cakejp.css` | 本番のスタイル定義 |
+| 本番画像 | `/Users/okunokeisuke/Desktop/www-test-htdocs/app/webroot/img/` | ローカル画像アセット |
+| 管理画面 | `/Users/okunokeisuke/Desktop/admin-test-htdocs/` | 管理画面の実装参考 |
+| CDN | `https://assets.cake.jp/` | 本番で配信されている画像・アイコン |
+
+### 必須フロー
+
+1. **本番テンプレートを確認**: `www-test-htdocs/app/views/elements/2023/` で該当する CTP ファイルを探す
+2. **本番CSSを確認**: `cakejp.css` で該当クラスのスタイル定義を読む
+3. **アセットの再利用**: 本番で `assets.cake.jp` や `/img/` から読み込んでいる画像・アイコンは、**ダウンロードせずにそのまま同じ URL を参照する**
+4. **差分だけ実装**: 本番と同じ見た目・構造をベースに、React コンポーネント化する
+
+### 再現タスクのゲートルール（コード生成前に必ず実行）
+
+ページ・コンポーネント・セクションの「再現」「作成」「モック」を依頼された場合、**コードを1行も書く前に**以下を完了すること。これは省略不可の前提条件であり、「本番を見なくても作れそう」という判断は禁止。
+
+1. **本番テンプレートを検索して読む** — 該当する `.ctp` ファイルを特定し、HTML 構造・セクション順序・クラス名を把握する
+2. **本番 CSS で該当クラスを読む** — `cakejp.css` からスタイル定義（幅・高さ・余白・色・レイアウト）を把握する
+3. **CDN アセット URL を収集する** — テンプレート内の `assets.cake.jp` や `/img/` の URL をそのまま使う準備をする
+4. **把握した内容をコメントとしてストーリーファイルの冒頭に残す** — どの `.ctp` / CSS クラスを参照したかを記録する（後から検証可能にするため）
+
+```tsx
+// 参照元:
+// - www-test-htdocs/app/views/elements/2023/m_top_xxx.ctp
+// - cakejp.css: .m-top-xxx { ... }
+// - CDN: https://assets.cake.jp/img/xxx/...
+```
+
+**このゲートを通過していないコードは、どんなに見た目が良くても不合格とする。**
+
+### 禁止事項
+
+| # | やらないこと | 理由 | 正しい対応 |
+|---|------------|------|-----------|
+| P1 | 本番を確認せずにコンポーネントを新規作成する | 本番に既にある実装と乖離する | まず `www-test-htdocs` を検索する |
+| P2 | 本番の CDN 画像を SVG やコードで再現する | 見た目が異なり、メンテ不能になる | `assets.cake.jp` の URL をそのまま使う |
+| P3 | CDN アセットをダウンロードしてローカルに置く | 本番更新時に追従できなくなる | CDN URL を直接参照する |
+| P4 | 本番の CSS クラス名・バリアントを無視して独自命名する | 本番との対応が取れなくなる | 本番のバリアント体系を尊重する |
+
+### 確認コマンド例
+
+```bash
+# 本番テンプレートで商品カード関連を探す
+ls www-test-htdocs/app/views/elements/2023/m_card_*
+
+# 本番CSSで特定クラスを検索
+grep -n "m-card-item" www-test-htdocs/app/webroot/css/2023/cakejp.css
+
+# 本番テンプレートでCDNアセットの使い方を確認
+grep -r "assets.cake.jp" www-test-htdocs/app/views/elements/2023/
+```
+
+---
+
+
+## Figma コンポーネント実装チェックリスト
+
+新規コンポーネントを実装する際、またはFigmaのデザインを反映する際に**必ず**以下のステップを踏むこと。
+推測で値を決めない。
+
+### 1. Figma APIで実際のプロパティ値を取得する
+
+Figma MCP の `get_design_context` を使って、実際のノードのプロパティを確認する。
+MCP が使えない場合は REST API で取得:
+
+```bash
+curl -s -H "X-Figma-Token: <PAT>" \
+  "https://api.figma.com/v1/files/<fileKey>/nodes?ids=<nodeId>&depth=3"
+```
+
+### 2. 確認すべきプロパティ
+| プロパティ | 確認方法 | 間違いやすいポイント |
+|-----------|---------|-------------------|
+| **cornerRadius** | Figma API `cornerRadius` フィールド | トークン一覧の値と実際のコンポーネントで使われている値は異なる場合がある |
+| **fills / colors** | Figma API `fills` フィールド | Variables で alias されている場合、解決後の値を確認 |
+| **fontSize** | Figma API `style.fontSize` | typo-* のどれに対応するか照合 |
+| **padding** | Figma API `paddingLeft/Right/Top/Bottom` | — |
+| **height** | Figma API `absoluteBoundingBox.height` | — |
+
+### 3. トークン定義と実際のコンポーネント値が食い違った場合
+- **コンポーネントの実際の値を優先する**（トークンはパレットであり、全てが使われるわけではない）
+- 食い違いが見つかったらこの CLAUDE.md に明記して、次回以降の混乱を防ぐ
+
+---
+
+
+## Cake.jp 本番サイトとの対応
+
+| 本番パターン | DS コンポーネント |
+|------------|----------------|
+| 商品一覧グリッド | `ProductCard` (vertical) |
+| 商品一覧リスト | `ProductCard` (horizontal) |
+| カート商品行 | `CartItem` (`ListItem variant="cart"` のラッパー) |
+| 検索バー | `SearchBar` |
+| 人気キーワード | `Chip` (filled) |
+| ボトムナビ | `BottomTabBar` |
+| カテゴリフィルター | `FilterBar` |
+| クーポン | `CouponCard` |
+| 商品画像ギャラリー | `ImageGallery` |
+| ランキング表示 | `ProductCard` (ranking prop) |
+| お届け日表示 | `DeliveryCalendar` |
+| 注文ステップ | `ProgressSteps` |
+| ショップカード | `ShopCard` |
+| 評価表示 | `RatingStars` + `ReviewSummary` |
+
+---
+