@cakejp/design-system 0.12.0 → 0.14.0

package/contracts/rules.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "Cake.jp Design System — Rules Contracts",
-    "version": "0.1.0",
+    "version": "0.14.0",
     "description": "禁止パターン・アクセシビリティ要件・ライティングルールの構造化定義。lint-scratch.sh と check-drift.sh で自動検証。"
   },
   "prohibited": [
@@ -38,7 +38,14 @@
       "severity": "warning",
       "category": "typography",
       "pattern": "font-bold|font-semibold|font-medium|font-light",
-      "excludes": [".stories.", "cva", "variants", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        "cva",
+        "variants",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "text-sm font-bold 等の個別クラス組み合わせ禁止",
       "fix": "typo-label-md 等 typo-* クラスを使う"
     },
@@ -63,7 +70,9 @@
       "severity": "warning",
       "category": "typography",
       "pattern": "text-\\[[0-9]+px\\]|leading-\\[[0-9.]+\\]",
-      "excludes": [".stories."],
+      "excludes": [
+        ".stories."
+      ],
       "message": "px直書き・leading直書き禁止",
       "fix": "typo-body-md 等 typo-* クラスを使う"
     },
@@ -80,7 +89,12 @@
       "severity": "warning",
       "category": "color",
       "pattern": "text-gray-|text-orange-|text-red-|text-green-|text-blue-|bg-gray-|bg-orange-|bg-red-|bg-green-|bg-blue-",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "Tailwind標準色クラス禁止",
       "fix": "text-[var(--Text-High-Emphasis)] 等セマンティックトークンを使う"
     },
@@ -89,7 +103,12 @@
       "severity": "warning",
       "category": "color",
       "pattern": "bg-orange-[0-9]+|text-orange-[0-9]+",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "Primitiveカラー直接使用禁止",
       "fix": "bg-[var(--Brand-Cake-Orange)] 等セマンティックトークンを使う"
     },
@@ -98,7 +117,16 @@
       "severity": "warning",
       "category": "color",
       "pattern": "#[0-9A-Fa-f]{6}",
-      "excludes": [".stories.", ".css", "shadow", "fill=\"", "stroke=\"", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        ".css",
+        "shadow",
+        "fill=\"",
+        "stroke=\"",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "HEXハードコード禁止（例外: サードパーティブランドロゴの SVG fill/stroke — 例 Amazon #FF9900、Google 4色。出典コメント推奨）",
       "fix": "var(--Brand-Cake-Orange) 等セマンティックトークンを使う"
     },
@@ -114,7 +142,9 @@
       "severity": "warning",
       "category": "color",
       "pattern": "text-black\\b",
-      "excludes": [".stories."],
+      "excludes": [
+        ".stories."
+      ],
       "message": "text-black (#000) 禁止",
       "fix": "text-[var(--Text-High-Emphasis)]（#1C1A1A）"
     },
@@ -123,7 +153,14 @@
       "severity": "warning",
       "category": "color",
       "pattern": "Border-High-Emphasis",
-      "excludes": ["hover:", "focus:", "active:", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "hover:",
+        "focus:",
+        "active:",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "Border-High-Emphasis を静的なカード・コンテナに使用禁止",
       "fix": "通常枠は Border-Medium-Emphasis。hover時のみ hover:border-[var(--Border-High-Emphasis)]"
     },
@@ -168,7 +205,9 @@
       "severity": "warning",
       "category": "elevation",
       "pattern": "shadow-(xl|2xl)\\b",
-      "excludes": [".stories."],
+      "excludes": [
+        ".stories."
+      ],
       "message": "DS定義外シャドウ禁止（shadow-xl/2xl）",
       "fix": "shadow-xs/sm/md/lg を使う（preset.css が --shadow-md/lg を DS 値に再定義済み）。オーバーレイは用途別トークン shadow-menu/tooltip/dialog/modal/overlay を推奨。フローティング UI の強い影（md/lg）は意図された正規仕様"
     },
@@ -185,7 +224,13 @@
       "severity": "error",
       "category": "component",
       "pattern": "<button\\b",
-      "excludes": ["data-slot", ".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "data-slot",
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "生の <button> 禁止",
       "fix": "<Button variant='...' size='...'> を使う"
     },
@@ -194,7 +239,15 @@
       "severity": "error",
       "category": "component",
       "pattern": "<input\\b",
-      "excludes": ["data-slot", ".stories.", "type=\"search\"", "type=\"file\"", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "data-slot",
+        ".stories.",
+        "type=\"search\"",
+        "type=\"file\"",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "生の <input> 禁止",
       "fix": "<Input> コンポーネントを使う"
     },
@@ -218,7 +271,11 @@
       "severity": "warning",
       "category": "component",
       "pattern": "`\\$\\{.*\\?.*\\}`",
-      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "テンプレートリテラルでclassNameを組み立てない",
       "fix": "cn(base, active && 'bg-red') を使う"
     },
@@ -234,7 +291,12 @@
       "severity": "warning",
       "category": "spacing",
       "pattern": "<Card(?:\\s[^>]*)?>\\s*(?:\\{/\\*[\\s\\S]*?\\*/\\}\\s*)?<[^>]*className\\s*=\\s*[\"'`][^\"'`]*(^|\\s)(mt|mb|my|space-y)-",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "Card直下の子に mt-/mb-/my-/space-y- を足さない（縦間隔はCard本体の flex-col gap-4=16px が一括管理。二重がけで間延びする）",
       "fix": "余白クラスを外し Card の gap-4 に委ねる。丸アイコンは IconBadge を使う（外側marginを持たない）",
       "note": "limitation: この正規表現はJSXソース文字列のみを見る。別CSS/module.cssファイルに書かれた margin（実バグの主因）は検出不可。あくまでJSXにTailwindで直書きした場合の補助で、本命は components.json の Card 縦間隔ルール（正典）と IconBadge 部品化"
@@ -244,7 +306,15 @@
       "severity": "error",
       "category": "image",
       "pattern": "<img\\b",
-      "excludes": ["AspectRatio", "aspect-ratio", ".stories.", "components/foundations/", "components/primitives/", "components/ec/", "object-cover"],
+      "excludes": [
+        "AspectRatio",
+        "aspect-ratio",
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/",
+        "object-cover"
+      ],
       "message": "裸の <img> 禁止（CLS発生）",
       "fix": "<AspectRatio ratio={1}> で囲む"
     },
@@ -260,7 +330,11 @@
       "severity": "warning",
       "category": "accessibility",
       "pattern": "alt=\"\"",
-      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "alt='' 禁止（スクリーンリーダーが読めない）",
       "fix": "alt='苺のショートケーキ' のように日本語で内容を書く"
     },
@@ -291,7 +365,9 @@
       "severity": "error",
       "category": "component",
       "pattern": "<select\\b",
-      "excludes": ["components/foundations/"],
+      "excludes": [
+        "components/foundations/"
+      ],
       "message": "HTMLネイティブの <select> 禁止",
       "fix": "<Select> コンポーネントを使う"
     },
@@ -307,7 +383,9 @@
       "severity": "error",
       "category": "modal",
       "pattern": "fixed inset-0",
-      "excludes": ["components/foundations/"],
+      "excludes": [
+        "components/foundations/"
+      ],
       "message": "div.fixed.inset-0 で自作モーダル禁止",
       "fix": "<Dialog> or <Sheet> を使う（ESC・Tab・背景スクロールを自動処理）"
     },
@@ -352,7 +430,11 @@
       "severity": "warning",
       "category": "layout",
       "pattern": "position:\\s*absolute",
-      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "position: absolute で要素を並べない",
       "fix": "Flexbox / Grid を使う"
     },
@@ -376,7 +458,12 @@
       "severity": "warning",
       "category": "component",
       "pattern": "border-l-4|border-t-4|border-r-4|border-b-4",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        ".stories.",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "トーストに左ボーダーで状態色を付けない",
       "fix": "背景色全体で状態を表現（!bg-[var(--Surface-Caution-Light)]）"
     },
@@ -408,7 +495,11 @@
       "severity": "warning",
       "category": "accessibility",
       "pattern": "aria-label=\"[A-Z][a-z]",
-      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "aria-labelを英語で書かない（cake.jpは日本語サービス）",
       "fix": "aria-label='閉じる'（'Close'にしない）"
     },
@@ -417,7 +508,12 @@
       "severity": "error",
       "category": "accessibility",
       "pattern": "outline-none\\b",
-      "excludes": ["focus-visible", "components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "focus-visible",
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "outline-none でフォーカスリングを消す禁止",
       "fix": "focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
     },
@@ -426,78 +522,28 @@
       "severity": "error",
       "category": "accessibility",
       "pattern": "<div.*onClick|<span.*onClick",
-      "excludes": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "excludes": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "message": "<div onClick> でクリック処理禁止",
       "fix": "<button> か <a> を使う"
     },
-    {
-      "id": "AI1",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "border-t-4 border-.*-[0-9]+",
-      "message": "AI生成パターン: カード上部カラーバー禁止",
-      "fix": "border border-[var(--Border-Low-Emphasis)] で全周ボーダー"
-    },
-    {
-      "id": "AI2",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "border-l-4 border-.*-[0-9]+",
-      "message": "AI生成パターン: 左端カラーストライプ禁止（Alert含む）",
-      "fix": "border rounded-lg で全周ボーダー"
-    },
     {
       "id": "B1",
       "severity": "error",
       "category": "component",
       "scope": "designSystemInternal",
-      "appliesTo": ["components/foundations/", "components/primitives/", "components/ec/"],
+      "appliesTo": [
+        "components/foundations/",
+        "components/primitives/",
+        "components/ec/"
+      ],
       "pattern": "border 幅ユーティリティ（border / border-b / border-l 等）に色クラスが同居していない",
       "message": "DSコンポーネントで色指定のない border を使わない。Tailwind v4 の border-color 既定は currentColor。消費アプリが preset.css のグローバル base リセット（* { @apply border-border }）を取り込まない場合、罫線が要素の文字色に化ける（例: テーブル行に text-[var(--Text-High-Emphasis)] を付けると罫線が黒 #1C1A1A になる）。コンポーネントはグローバルリセットに依存せず自前で border 色を持つこと。",
       "fix": "同じ className 内に border-[var(--Border-Medium-Emphasis)] 等を明示する（透明が意図なら border-transparent）。検査: npm run lint:border（scripts/check-border-color.mjs）"
     },
-    {
-      "id": "AI5",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "message": "文脈非依存違反: text色/背景/アイコン色を明示せず親の継承や Tailwind v4 既定（border/ring/outline=currentColor）に委ねる。消費側が濃色テキストや色付き背景を敷くと文字・アイコン・枠が化ける。サーフェス（カード/オーバーレイ等）が bg 未指定だと親背景が透ける。",
-      "fix": "テキスト要素に text-[var(--Text-*)]、サーフェスに bg-[var(--Surface-*)] を明示。Content/オーバーレイ系ラッパは text-popover-foreground 等で子を隔離する。Storybook ツールバーの『Hostile ctx』を loud にして漏れ（マゼンタ化・背景透け）を目視確認する。"
-    },
-    {
-      "id": "AI3",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "bg-gradient-to-",
-      "excludes": [".stories.", "components/foundations/", "components/primitives/", "components/ec/"],
-      "message": "AI生成パターン: グラデーション背景禁止",
-      "fix": "セマンティックトークンの単色背景"
-    },
-    {
-      "id": "AI4",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "tracking-tight",
-      "message": "AI生成パターン: tracking-tight禁止（日本語の可読性が著しく低下）",
-      "fix": "typo-* クラスに含まれる値を使う"
-    },
-    {
-      "id": "AI6",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "animate-spin|animate-bounce|animate-ping",
-      "excludes": [".stories.", "components/foundations/"],
-      "message": "AI生成パターン: 常時ループアニメーション禁止",
-      "fix": "スケルトンのpulseのみ許可"
-    },
-    {
-      "id": "AI7",
-      "severity": "warning",
-      "category": "ai-pattern",
-      "pattern": "rounded-(3xl|4xl)\\b|rounded-\\[[0-9]",
-      "excludes": [".stories."],
-      "message": "AI生成パターン: DS定義外の角丸禁止（rounded-3xl/4xl・任意値 rounded-[Npx]）",
-      "fix": "DSトークンスケールのみ使用: rounded-xs(2)/sm(6)/md(8)/lg(10)/xl(14)/2xl(18px)/full（--radius=10px 基準）。目安: メニュー・小型コントロール=md、ボタン・入力=lg（Button lg/xl は xl）、コンパクトカード=xl、標準カード・ダイアログ=2xl。例外は lint-scratch-allow コメントで理由を明記"
-    },
     {
       "id": "R44",
       "severity": "warning",
@@ -549,7 +595,7 @@
       "category": "component",
       "pattern": "<input type=\"file\"|<input type='file'",
       "message": "ネイティブ <input type='file'> を直接使わない",
-      "fix": "汎用の添付（PDF/CSV/画像混在）は <FileInput />（foundations）を使う。プレビュー付きの画像管理（並び替え・複数サムネイル）は <ImageUploader />（primitives）を使う"
+      "fix": "汎用の添付（PDF/CSV/画像混在）は <FileInput />（foundations）を使う。画像1枚の入力（プレビュー+形式/サイズ検証+値のバインド）は <ImageInput />（primitives）、複数枚のグリッド管理は <ImageUploader />（primitives）を使う"
     },
     {
       "id": "R55",
@@ -557,21 +603,60 @@
       "category": "component",
       "message": "画像・メディアの上に載せる操作ボタンを rgba 直書きの半透過下地で手組みしない",
       "fix": "<Button variant='overlay'>（半透過白 Surface-Overlay-Light + shadow-md + backdrop-blur-sm）を使う。ImageCarousel 矢印と同系の意匠。円形は size='icon' + className='rounded-full'"
+    },
+    {
+      "id": "R56",
+      "severity": "error",
+      "category": "component",
+      "pattern": "<Input[^>]+type=[\"']number[\"']",
+      "excludes": ["components/primitives/number-input.tsx"],
+      "message": "Input type='number' を直接使わない",
+      "fix": "数値入力はカート数量・価格・在庫すべて <NumberInput /> を使う（size=\"sm\" コンパクト型 / size=\"md\" サークル型）"
     }
   ],
   "accessibility": {
     "wcag": "2.1 AA",
     "requirements": [
-      { "id": "A001", "rule": "通常テキスト（18px未満）のコントラスト比 4.5:1 以上" },
-      { "id": "A002", "rule": "大テキスト（18px以上bold/24px以上normal）のコントラスト比 3:1 以上" },
-      { "id": "A003", "rule": "UIコンポーネント境界・アイコンのコントラスト比 3:1 以上" },
-      { "id": "A004", "rule": "フォーカスインジケーターのコントラスト比 3:1（隣接色との差）" },
-      { "id": "A005", "rule": "フォーカスリング必須: focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50" },
-      { "id": "A006", "rule": "アイコンのみボタンに日本語のaria-label必須" },
-      { "id": "A007", "rule": "全フォーム入力に <Label> または aria-label を紐付ける" },
-      { "id": "A008", "rule": "フォームエラーは aria-describedby でエラーメッセージを紐付ける" },
-      { "id": "A009", "rule": "動的に変化する情報は aria-live='polite' で通知する" },
-      { "id": "A010", "rule": "セマンティックHTML: nav/main/section/header/footer を適切に使用する" }
+      {
+        "id": "A001",
+        "rule": "通常テキスト（18px未満）のコントラスト比 4.5:1 以上"
+      },
+      {
+        "id": "A002",
+        "rule": "大テキスト（18px以上bold/24px以上normal）のコントラスト比 3:1 以上"
+      },
+      {
+        "id": "A003",
+        "rule": "UIコンポーネント境界・アイコンのコントラスト比 3:1 以上"
+      },
+      {
+        "id": "A004",
+        "rule": "フォーカスインジケーターのコントラスト比 3:1（隣接色との差）"
+      },
+      {
+        "id": "A005",
+        "rule": "フォーカスリング必須: focus-visible:ring-[3px] focus-visible:ring-[var(--Focus-High-Emphasis)]/50"
+      },
+      {
+        "id": "A006",
+        "rule": "アイコンのみボタンに日本語のaria-label必須"
+      },
+      {
+        "id": "A007",
+        "rule": "全フォーム入力に <Label> または aria-label を紐付ける"
+      },
+      {
+        "id": "A008",
+        "rule": "フォームエラーは aria-describedby でエラーメッセージを紐付ける"
+      },
+      {
+        "id": "A009",
+        "rule": "動的に変化する情報は aria-live='polite' で通知する"
+      },
+      {
+        "id": "A010",
+        "rule": "セマンティックHTML: nav/main/section/header/footer を適切に使用する"
+      }
     ]
   },
   "darkMode": {
@@ -584,21 +669,89 @@
   "typography": {
     "rule": "必ず typo-* クラスを使用。text-sm font-bold 等の個別指定禁止。",
     "classes": [
-      { "class": "typo-heading-4xl", "size": "32px", "weight": "bold" },
-      { "class": "typo-heading-3xl", "size": "28px", "weight": "bold" },
-      { "class": "typo-heading-2xl", "size": "24px", "weight": "bold" },
-      { "class": "typo-heading-xl",  "size": "21px", "weight": "bold" },
-      { "class": "typo-heading-lg",  "size": "18px", "weight": "bold" },
-      { "class": "typo-heading-md",  "size": "16px", "weight": "bold" },
-      { "class": "typo-heading-sm",  "size": "14px", "weight": "bold" },
-      { "class": "typo-body-lg",     "size": "16px", "weight": "normal" },
-      { "class": "typo-body-md",     "size": "14px", "weight": "normal" },
-      { "class": "typo-body-sm",     "size": "12px", "weight": "normal" },
-      { "class": "typo-body-xs",     "size": "10px", "weight": "normal" },
-      { "class": "typo-label-lg",    "size": "16px", "weight": "bold" },
-      { "class": "typo-label-md",    "size": "14px", "weight": "bold" },
-      { "class": "typo-label-sm",    "size": "12px", "weight": "semibold" },
-      { "class": "typo-label-xs",    "size": "10px", "weight": "semibold" }
+      {
+        "class": "typo-heading-5xl",
+        "size": "40px",
+        "weight": "bold",
+        "usage": "LP・マーケティング系ヒーローの PC 見出し限定"
+      },
+      {
+        "class": "typo-heading-4xl",
+        "size": "32px",
+        "weight": "bold",
+        "usage": "LP・マーケティング系ヒーローの PC 見出し限定（5xlより抑えた表現）"
+      },
+      {
+        "class": "typo-heading-3xl",
+        "size": "28px",
+        "weight": "bold",
+        "usage": "通常ページの主見出し・ページタイトル。LPではSP側にも使用"
+      },
+      {
+        "class": "typo-heading-2xl",
+        "size": "24px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-heading-xl",
+        "size": "21px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-heading-lg",
+        "size": "18px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-heading-md",
+        "size": "16px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-heading-sm",
+        "size": "14px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-body-lg",
+        "size": "16px",
+        "weight": "normal"
+      },
+      {
+        "class": "typo-body-md",
+        "size": "14px",
+        "weight": "normal"
+      },
+      {
+        "class": "typo-body-sm",
+        "size": "12px",
+        "weight": "normal"
+      },
+      {
+        "class": "typo-body-xs",
+        "size": "10px",
+        "weight": "normal"
+      },
+      {
+        "class": "typo-label-lg",
+        "size": "16px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-label-md",
+        "size": "14px",
+        "weight": "bold"
+      },
+      {
+        "class": "typo-label-sm",
+        "size": "12px",
+        "weight": "semibold"
+      },
+      {
+        "class": "typo-label-xs",
+        "size": "10px",
+        "weight": "semibold"
+      }
     ]
   },
   "tokens": {
@@ -610,12 +763,33 @@
     "touchTarget": {
       "rule": "タッチターゲット最小サイズを守ること",
       "values": [
-        { "element": "Button(CTA)", "min": "40px", "recommended": "48px" },
-        { "element": "Icon button", "min": "40px", "recommended": "44px" },
-        { "element": "Text input", "min": "44px", "recommended": "48px" },
-        { "element": "Chip/Filter", "min": "32px", "recommended": "36px" },
-        { "element": "Navigation item", "min": "44px", "recommended": "48px" }
-      ]
+        {
+          "element": "Button(CTA)",
+          "min": "40px",
+          "recommended": "48px"
+        },
+        {
+          "element": "Icon button",
+          "min": "40px",
+          "recommended": "44px"
+        },
+        {
+          "element": "Text input",
+          "min": "44px",
+          "recommended": "48px"
+        },
+        {
+          "element": "Chip/Filter",
+          "min": "32px",
+          "recommended": "36px"
+        },
+        {
+          "element": "Navigation item",
+          "min": "44px",
+          "recommended": "48px"
+        }
+      ],
+      "utility": "見た目が44px未満の小型操作部品をSPで使う場合は className=\"tap-target\" を付け、透明な疑似要素で実効操作領域を44×44px以上にする。隣接ターゲットと重なる密度では使わず親のgapを広げる"
     }
   },
   "writing": {
@@ -627,5 +801,72 @@
       "お届け日: M月D日（曜日）（例: 8月1日（木））",
       "価格: ¥{数字,区切り}（税込）（例: ¥3,980（税込））"
     ]
+  },
+  "aiPatterns": {
+    "description": "AI生成コードで繰り返し発生する禁止パターン。絶対禁止ルールとは分けて診断する。",
+    "patterns": [
+      {
+        "id": "AI1",
+        "name": "カード上部カラーバー",
+        "pattern": "border-t-4 border-.*-[0-9]+",
+        "description": "AI生成パターン: カード上部カラーバー禁止",
+        "fix": "border border-[var(--Border-Low-Emphasis)] で全周ボーダー"
+      },
+      {
+        "id": "AI2",
+        "name": "左端カラーストライプ",
+        "pattern": "border-l-4 border-.*-[0-9]+",
+        "description": "AI生成パターン: 左端カラーストライプ禁止（Alert含む）",
+        "fix": "border rounded-lg で全周ボーダー"
+      },
+      {
+        "id": "AI5",
+        "name": "文脈非依存違反: text色/背景/アイコン色を明示せず親の継承や Tailwind v4 既定（border/ring/outline=currentColor）に委ねる。消費側が濃色テキストや色付き背景を敷くと文字・アイコン・枠が化ける。サーフェス（カード/オーバーレイ等）が bg 未指定だと親背景が透ける。",
+        "pattern": "",
+        "description": "文脈非依存違反: text色/背景/アイコン色を明示せず親の継承や Tailwind v4 既定（border/ring/outline=currentColor）に委ねる。消費側が濃色テキストや色付き背景を敷くと文字・アイコン・枠が化ける。サーフェス（カード/オーバーレイ等）が bg 未指定だと親背景が透ける。",
+        "fix": "テキスト要素に text-[var(--Text-*)]、サーフェスに bg-[var(--Surface-*)] を明示。Content/オーバーレイ系ラッパは text-popover-foreground 等で子を隔離する。Storybook ツールバーの『Hostile ctx』を loud にして漏れ（マゼンタ化・背景透け）を目視確認する。"
+      },
+      {
+        "id": "AI3",
+        "name": "グラデーション背景",
+        "pattern": "bg-gradient-to-",
+        "description": "AI生成パターン: グラデーション背景禁止",
+        "fix": "セマンティックトークンの単色背景",
+        "excludes": [
+          ".stories.",
+          "components/foundations/",
+          "components/primitives/",
+          "components/ec/"
+        ]
+      },
+      {
+        "id": "AI4",
+        "name": "tracking-tight",
+        "pattern": "tracking-tight",
+        "description": "AI生成パターン: tracking-tight禁止（日本語の可読性が著しく低下）",
+        "fix": "typo-* クラスに含まれる値を使う"
+      },
+      {
+        "id": "AI6",
+        "name": "常時ループアニメーション",
+        "pattern": "animate-spin|animate-bounce|animate-ping",
+        "description": "AI生成パターン: 常時ループアニメーション禁止",
+        "fix": "スケルトンのpulseのみ許可",
+        "excludes": [
+          ".stories.",
+          "components/foundations/"
+        ]
+      },
+      {
+        "id": "AI7",
+        "name": "DS定義外の角丸",
+        "pattern": "rounded-(3xl|4xl)\\b|rounded-\\[[0-9]",
+        "description": "AI生成パターン: DS定義外の角丸禁止（rounded-3xl/4xl・任意値 rounded-[Npx]）",
+        "fix": "DSトークンスケールのみ使用: rounded-xs(2)/sm(6)/md(8)/lg(10)/xl(14)/2xl(18px)/full（--radius=10px 基準）。目安: メニュー・小型コントロール=md、ボタン・入力=lg（Button lg/xl は xl）、コンパクトカード=xl、標準カード・ダイアログ=2xl。例外は lint-scratch-allow コメントで理由を明記",
+        "excludes": [
+          ".stories."
+        ]
+      }
+    ]
   }
 }