mikeneko-ui 1.0.0

package/templates/components.json

@@ -0,0 +1,451 @@
+{
+  "meta": {
+    "name": "mikeneko UI Design System",
+    "version": "2.0.0",
+    "base": "shadcn/ui",
+    "totalComponents": 45
+  },
+  "components": [
+    {
+      "name": "Accordion",
+      "category": "disclosure",
+      "shadcnPath": "ui/accordion",
+      "variants": ["single", "multiple"],
+      "subComponents": ["AccordionItem", "AccordionTrigger", "AccordionContent"],
+      "props": {
+        "type": "single | multiple",
+        "collapsible": "boolean"
+      }
+    },
+    {
+      "name": "Alert",
+      "category": "feedback",
+      "shadcnPath": "ui/alert",
+      "variants": ["default", "destructive"],
+      "subComponents": ["AlertTitle", "AlertDescription"],
+      "props": {
+        "variant": "default | destructive"
+      },
+      "meltaNote": "info/success/warning は default variant + カスタムクラスで表現"
+    },
+    {
+      "name": "AlertDialog",
+      "category": "overlay",
+      "shadcnPath": "ui/alert-dialog",
+      "variants": ["default"],
+      "subComponents": ["AlertDialogTrigger", "AlertDialogContent", "AlertDialogHeader", "AlertDialogFooter", "AlertDialogTitle", "AlertDialogDescription", "AlertDialogAction", "AlertDialogCancel"],
+      "props": {}
+    },
+    {
+      "name": "AspectRatio",
+      "category": "layout",
+      "shadcnPath": "ui/aspect-ratio",
+      "variants": ["1:1", "16:9", "4:3", "3:2"],
+      "subComponents": [],
+      "props": {
+        "ratio": "number"
+      }
+    },
+    {
+      "name": "Avatar",
+      "category": "data-display",
+      "shadcnPath": "ui/avatar",
+      "variants": ["image", "fallback"],
+      "subComponents": ["AvatarImage", "AvatarFallback"],
+      "props": {}
+    },
+    {
+      "name": "Badge",
+      "category": "data-display",
+      "shadcnPath": "ui/badge",
+      "variants": ["default", "secondary", "destructive", "outline"],
+      "subComponents": [],
+      "props": {
+        "variant": "default | secondary | destructive | outline"
+      }
+    },
+    {
+      "name": "Breadcrumb",
+      "category": "navigation",
+      "shadcnPath": "ui/breadcrumb",
+      "variants": ["default"],
+      "subComponents": ["BreadcrumbList", "BreadcrumbItem", "BreadcrumbLink", "BreadcrumbPage", "BreadcrumbSeparator", "BreadcrumbEllipsis"],
+      "props": {}
+    },
+    {
+      "name": "Button",
+      "category": "action",
+      "shadcnPath": "ui/button",
+      "variants": ["default", "destructive", "outline", "secondary", "ghost", "link"],
+      "sizes": ["default", "sm", "lg", "icon"],
+      "subComponents": [],
+      "props": {
+        "variant": "default | destructive | outline | secondary | ghost | link",
+        "size": "default | sm | lg | icon",
+        "disabled": "boolean",
+        "asChild": "boolean"
+      },
+      "meltaNote": "default=primary-500, outline=bordered sub button, ghost=subtle"
+    },
+    {
+      "name": "Calendar",
+      "category": "input",
+      "shadcnPath": "ui/calendar",
+      "variants": ["single", "range"],
+      "subComponents": [],
+      "props": {
+        "mode": "single | range",
+        "selected": "Date | DateRange"
+      }
+    },
+    {
+      "name": "Card",
+      "category": "layout",
+      "shadcnPath": "ui/card",
+      "variants": ["default"],
+      "subComponents": ["CardHeader", "CardTitle", "CardDescription", "CardContent", "CardFooter"],
+      "props": {},
+      "meltaNote": "shadow-sm がデフォルト。shadow-lg/2xl 禁止"
+    },
+    {
+      "name": "Carousel",
+      "category": "data-display",
+      "shadcnPath": "ui/carousel",
+      "variants": ["horizontal", "vertical"],
+      "subComponents": ["CarouselContent", "CarouselItem", "CarouselPrevious", "CarouselNext"],
+      "props": {
+        "orientation": "horizontal | vertical"
+      }
+    },
+    {
+      "name": "Chart",
+      "category": "data-display",
+      "shadcnPath": "ui/chart",
+      "variants": ["area", "bar", "line", "pie", "radar", "radial"],
+      "subComponents": ["ChartContainer", "ChartTooltip", "ChartTooltipContent", "ChartLegend", "ChartLegendContent"],
+      "props": {}
+    },
+    {
+      "name": "Checkbox",
+      "category": "input",
+      "shadcnPath": "ui/checkbox",
+      "variants": ["unchecked", "checked", "indeterminate", "disabled"],
+      "subComponents": [],
+      "props": {
+        "checked": "boolean | 'indeterminate'",
+        "disabled": "boolean",
+        "onCheckedChange": "(checked: boolean) => void"
+      }
+    },
+    {
+      "name": "Collapsible",
+      "category": "disclosure",
+      "shadcnPath": "ui/collapsible",
+      "variants": ["default"],
+      "subComponents": ["CollapsibleTrigger", "CollapsibleContent"],
+      "props": {
+        "open": "boolean",
+        "onOpenChange": "(open: boolean) => void"
+      }
+    },
+    {
+      "name": "Command",
+      "category": "input",
+      "shadcnPath": "ui/command",
+      "variants": ["default"],
+      "subComponents": ["CommandInput", "CommandList", "CommandEmpty", "CommandGroup", "CommandItem", "CommandSeparator"],
+      "props": {}
+    },
+    {
+      "name": "ContextMenu",
+      "category": "overlay",
+      "shadcnPath": "ui/context-menu",
+      "variants": ["default"],
+      "subComponents": ["ContextMenuTrigger", "ContextMenuContent", "ContextMenuItem", "ContextMenuSeparator", "ContextMenuSub", "ContextMenuSubTrigger", "ContextMenuSubContent"],
+      "props": {}
+    },
+    {
+      "name": "Dialog",
+      "category": "overlay",
+      "shadcnPath": "ui/dialog",
+      "variants": ["default"],
+      "subComponents": ["DialogTrigger", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "DialogClose"],
+      "props": {
+        "open": "boolean",
+        "onOpenChange": "(open: boolean) => void"
+      },
+      "meltaNote": "旧 Modal コンポーネントの置き換え"
+    },
+    {
+      "name": "Drawer",
+      "category": "overlay",
+      "shadcnPath": "ui/drawer",
+      "variants": ["default"],
+      "subComponents": ["DrawerTrigger", "DrawerContent", "DrawerHeader", "DrawerFooter", "DrawerTitle", "DrawerDescription", "DrawerClose"],
+      "props": {}
+    },
+    {
+      "name": "DropdownMenu",
+      "category": "overlay",
+      "shadcnPath": "ui/dropdown-menu",
+      "variants": ["default"],
+      "subComponents": ["DropdownMenuTrigger", "DropdownMenuContent", "DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel", "DropdownMenuGroup", "DropdownMenuSub", "DropdownMenuSubTrigger", "DropdownMenuSubContent"],
+      "props": {},
+      "meltaNote": "旧 Dropdown コンポーネントの置き換え"
+    },
+    {
+      "name": "HoverCard",
+      "category": "overlay",
+      "shadcnPath": "ui/hover-card",
+      "variants": ["default"],
+      "subComponents": ["HoverCardTrigger", "HoverCardContent"],
+      "props": {}
+    },
+    {
+      "name": "Input",
+      "category": "input",
+      "shadcnPath": "ui/input",
+      "variants": ["default", "disabled", "error"],
+      "subComponents": [],
+      "props": {
+        "type": "string",
+        "placeholder": "string",
+        "disabled": "boolean"
+      },
+      "meltaNote": "旧 TextField コンポーネントの置き換え"
+    },
+    {
+      "name": "InputOTP",
+      "category": "input",
+      "shadcnPath": "ui/input-otp",
+      "variants": ["default"],
+      "subComponents": ["InputOTPGroup", "InputOTPSlot", "InputOTPSeparator"],
+      "props": {
+        "maxLength": "number"
+      }
+    },
+    {
+      "name": "Label",
+      "category": "input",
+      "shadcnPath": "ui/label",
+      "variants": ["default"],
+      "subComponents": [],
+      "props": {
+        "htmlFor": "string"
+      }
+    },
+    {
+      "name": "Menubar",
+      "category": "navigation",
+      "shadcnPath": "ui/menubar",
+      "variants": ["default"],
+      "subComponents": ["MenubarMenu", "MenubarTrigger", "MenubarContent", "MenubarItem", "MenubarSeparator", "MenubarSub", "MenubarSubTrigger", "MenubarSubContent"],
+      "props": {}
+    },
+    {
+      "name": "NavigationMenu",
+      "category": "navigation",
+      "shadcnPath": "ui/navigation-menu",
+      "variants": ["default"],
+      "subComponents": ["NavigationMenuList", "NavigationMenuItem", "NavigationMenuTrigger", "NavigationMenuContent", "NavigationMenuLink"],
+      "props": {}
+    },
+    {
+      "name": "Pagination",
+      "category": "navigation",
+      "shadcnPath": "ui/pagination",
+      "variants": ["default"],
+      "subComponents": ["PaginationContent", "PaginationItem", "PaginationLink", "PaginationPrevious", "PaginationNext", "PaginationEllipsis"],
+      "props": {}
+    },
+    {
+      "name": "Popover",
+      "category": "overlay",
+      "shadcnPath": "ui/popover",
+      "variants": ["default"],
+      "subComponents": ["PopoverTrigger", "PopoverContent"],
+      "props": {}
+    },
+    {
+      "name": "Progress",
+      "category": "feedback",
+      "shadcnPath": "ui/progress",
+      "variants": ["default", "indeterminate"],
+      "subComponents": [],
+      "props": {
+        "value": "number"
+      }
+    },
+    {
+      "name": "RadioGroup",
+      "category": "input",
+      "shadcnPath": "ui/radio-group",
+      "variants": ["default"],
+      "subComponents": ["RadioGroupItem"],
+      "props": {
+        "value": "string",
+        "onValueChange": "(value: string) => void"
+      },
+      "meltaNote": "旧 Radio コンポーネントの置き換え"
+    },
+    {
+      "name": "ScrollArea",
+      "category": "layout",
+      "shadcnPath": "ui/scroll-area",
+      "variants": ["default"],
+      "subComponents": ["ScrollBar"],
+      "props": {}
+    },
+    {
+      "name": "Select",
+      "category": "input",
+      "shadcnPath": "ui/select",
+      "variants": ["default"],
+      "subComponents": ["SelectTrigger", "SelectValue", "SelectContent", "SelectItem", "SelectGroup", "SelectLabel", "SelectSeparator"],
+      "props": {
+        "value": "string",
+        "onValueChange": "(value: string) => void"
+      }
+    },
+    {
+      "name": "Separator",
+      "category": "layout",
+      "shadcnPath": "ui/separator",
+      "variants": ["horizontal", "vertical"],
+      "subComponents": [],
+      "props": {
+        "orientation": "horizontal | vertical",
+        "decorative": "boolean"
+      },
+      "meltaNote": "旧 Divider コンポーネントの置き換え"
+    },
+    {
+      "name": "Sheet",
+      "category": "overlay",
+      "shadcnPath": "ui/sheet",
+      "variants": ["top", "right", "bottom", "left"],
+      "subComponents": ["SheetTrigger", "SheetContent", "SheetHeader", "SheetFooter", "SheetTitle", "SheetDescription", "SheetClose"],
+      "props": {
+        "side": "top | right | bottom | left"
+      }
+    },
+    {
+      "name": "Sidebar",
+      "category": "navigation",
+      "shadcnPath": "ui/sidebar",
+      "variants": ["default", "compact", "floating", "inset"],
+      "subComponents": ["SidebarProvider", "SidebarTrigger", "SidebarHeader", "SidebarContent", "SidebarFooter", "SidebarGroup", "SidebarGroupLabel", "SidebarGroupContent", "SidebarMenu", "SidebarMenuItem", "SidebarMenuButton"],
+      "props": {
+        "side": "left | right",
+        "variant": "sidebar | floating | inset",
+        "collapsible": "offcanvas | icon | none"
+      }
+    },
+    {
+      "name": "Skeleton",
+      "category": "feedback",
+      "shadcnPath": "ui/skeleton",
+      "variants": ["default"],
+      "subComponents": [],
+      "props": {}
+    },
+    {
+      "name": "Slider",
+      "category": "input",
+      "shadcnPath": "ui/slider",
+      "variants": ["single", "range"],
+      "subComponents": [],
+      "props": {
+        "value": "number[]",
+        "min": "number",
+        "max": "number",
+        "step": "number"
+      }
+    },
+    {
+      "name": "Sonner",
+      "category": "feedback",
+      "shadcnPath": "ui/sonner",
+      "variants": ["success", "error", "warning", "info"],
+      "subComponents": ["Toaster"],
+      "props": {},
+      "meltaNote": "旧 Toast コンポーネントの置き換え。toast() 関数で呼び出し"
+    },
+    {
+      "name": "Switch",
+      "category": "input",
+      "shadcnPath": "ui/switch",
+      "variants": ["on", "off", "disabled"],
+      "subComponents": [],
+      "props": {
+        "checked": "boolean",
+        "onCheckedChange": "(checked: boolean) => void",
+        "disabled": "boolean"
+      },
+      "meltaNote": "旧 Toggle (switch) コンポーネントの置き換え"
+    },
+    {
+      "name": "Table",
+      "category": "data-display",
+      "shadcnPath": "ui/table",
+      "variants": ["default"],
+      "subComponents": ["TableHeader", "TableBody", "TableFooter", "TableHead", "TableRow", "TableCell", "TableCaption"],
+      "props": {}
+    },
+    {
+      "name": "Tabs",
+      "category": "navigation",
+      "shadcnPath": "ui/tabs",
+      "variants": ["default"],
+      "subComponents": ["TabsList", "TabsTrigger", "TabsContent"],
+      "props": {
+        "value": "string",
+        "defaultValue": "string",
+        "onValueChange": "(value: string) => void"
+      }
+    },
+    {
+      "name": "Textarea",
+      "category": "input",
+      "shadcnPath": "ui/textarea",
+      "variants": ["default", "disabled"],
+      "subComponents": [],
+      "props": {
+        "placeholder": "string",
+        "disabled": "boolean"
+      }
+    },
+    {
+      "name": "Toggle",
+      "category": "input",
+      "shadcnPath": "ui/toggle",
+      "variants": ["default", "outline"],
+      "subComponents": [],
+      "props": {
+        "variant": "default | outline",
+        "size": "default | sm | lg",
+        "pressed": "boolean"
+      }
+    },
+    {
+      "name": "ToggleGroup",
+      "category": "input",
+      "shadcnPath": "ui/toggle-group",
+      "variants": ["single", "multiple"],
+      "subComponents": ["ToggleGroupItem"],
+      "props": {
+        "type": "single | multiple",
+        "variant": "default | outline"
+      }
+    },
+    {
+      "name": "Tooltip",
+      "category": "overlay",
+      "shadcnPath": "ui/tooltip",
+      "variants": ["default"],
+      "subComponents": ["TooltipProvider", "TooltipTrigger", "TooltipContent"],
+      "props": {},
+      "meltaNote": "TooltipProvider でアプリ全体をラップ必須"
+    }
+  ]
+}

package/templates/prohibited.md

@@ -0,0 +1,196 @@
+# Prohibited Patterns
+
+> このファイルがすべての禁止パターンの正規版（SSOT）です。他ファイルからはここを参照してください。
+
+---
+
+## カラー
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `text-black` | 純黒はコントラストが強すぎて長時間の利用で目が疲れる | `text-slate-900`（#0f172a） |
+| `bg-gray-300` 以上の暗い背景 | テキストのコントラスト確保が困難になる | `bg-gray-50` 〜 `bg-gray-200` |
+| `bg-primary-400`（薄いアクセント） | CTAとして弱く、目立たない | `bg-primary-500` |
+| `text-gray-400` for body text | WCAG不適合（コントラスト比不足） | `text-body`（#3d4b5f） |
+| `border-gray-100` | 薄すぎて境界が見えない | `border-slate-200`（#e2e8f0） |
+| `bg-green-*` | emeraldで統一する | `bg-emerald-*` |
+| `bg-yellow-*` | amberで統一する | `bg-amber-*` |
+| `bg-rose-*` | redで統一する | `bg-red-*` |
+| `text-blue-*` for links | primaryで統一する | `text-primary-500` |
+| 色だけで情報伝達 | 色覚多様性への非対応。アクセシビリティ違反 | アイコン/テキストを必ず併用 |
+
+---
+
+## 哲学由来の禁止（melta UI）
+
+> 全項目は `foundations/design_philosophy.md` の「Avoid」セクションを参照。以下は実装上とくに重要な項目のみ抜粋。
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| 過剰なアニメーション（常時ループ等） | 操作の邪魔になり、認知コストを増加させる | 150〜300ms の状態変化フィードバックに限定 |
+
+---
+
+## モーション
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `duration-500` 以上 | 操作が鈍く感じる（Progress フィルバーは例外） | `duration-300` 以下 |
+| `prefers-reduced-motion` 無視 | アクセシビリティ違反 | メディアクエリで対応 |
+
+---
+
+## タイポグラフィ
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `tracking-tight` | 日本語の可読性が低下する | `tracking-normal` 以上（本文2%、見出し1%） |
+| `text-xs` for body text | 本文には小さすぎて読みづらい | `text-base`（16px） |
+| `font-light`（300） | 細すぎて可読性が低い | `font-normal`（400）以上 |
+| プレースホルダーのみでラベル省略 | 入力開始で消え、目的がわからなくなる | `<label>` を必ず使用 |
+
+---
+
+## スペーシング・レイアウト
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `rounded-none` on cards | UIの統一感を損なう | `rounded-xl`（12px） |
+| `shadow-lg` / `shadow-2xl` | 影が強すぎてノイズになる | `shadow-sm` 〜 `shadow-md`（オーバーレイ: `shadow-xl`） |
+| `py-0.5` for buttons | タップターゲットが小さすぎる | `h-8` 以上（S: `h-8` / M: `h-10` / L: `h-12`） |
+| `p-0` on cards | コンテンツが窮屈になる | `p-5` 以上 |
+| `gap-0` between sections | セクションの区切りが不明瞭 | `gap-6` 以上 |
+| `m-0` for page content | ページ端にコンテンツが張り付く | `px-6 py-8` 以上 |
+| サイドバーに暗い背景色 | メインコンテンツとのコントラストが強すぎる | `bg-white` + ボーダー |
+| サイドバー幅の非標準値（`w-60` 等） | 実装ごとにバラつきが出る | `w-64`（標準）or `w-16`（コンパクト） |
+| ナビアイテムの `rounded-xl` | ボタン等他コンポーネントとの一貫性を損なう | `rounded-lg` |
+| ナビアイコン `w-7 h-7` 以上 | DS標準アイコンサイズからの逸脱 | `w-5 h-5` |
+| Drawer のフォーカストラップ省略 | キーボードユーザーが背面要素を操作してしまう | フォーカストラップを実装 |
+| `aria-current="page"` 省略 | スクリーンリーダーが現在ページを識別できない | Active ナビアイテムに必ず付与 |
+| 3列以上の複雑なレイアウト | 認知負荷が高い | サイドバー + メインの2列 |
+
+---
+
+## AI生成パターンの排除
+
+> AI（LLM）がUIを生成する際に頻出する「それっぽい」装飾パターンを明示的に禁止する。人間がデザインしたUIとの差別化を図り、melta UI の「静謐・精緻・温もり」を守るためのセクション。
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| カード上部/左部のカラーバー（`border-t-4` や色付き `div`） | AI生成UIの典型パターン。装飾過剰で汎用性が低い | ボーダー（`border border-slate-200`）のみでカードを構成する |
+| 左端/上端のカラーストライプ（`border-l-4 border-*-500`） | Alert含め全コンポーネントで禁止 | `border border-*-200 rounded-lg` で全周ボーダー |
+
+---
+
+## コンポーネント
+
+### ボタン
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| 同一スタイルボタンの並列配置 | 重要度の区別がつかない（Neutralのみ例外） | 階層の異なるボタンを組み合わせる |
+| Lighted Buttonの単独使用 | トグル状態の対比がないと意味不明 | Neutralとペアで使用する |
+| `aria-label` なしのアイコンボタン | 操作内容がスクリーンリーダーに伝わらない | `aria-label="閉じる"` 等を付与 |
+| 44px未満のタップ領域 | 操作困難（インラインテキストリンクを除く） | パディングでタップ領域を確保 |
+
+### フォーム
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `<select>` の `appearance-none` 省略 | ネイティブ矢印はブラウザ間で位置・余白が不安定 | `appearance-none` + `pr-10` + カスタムSVGシェブロン（`absolute right-3 top-1/2 -translate-y-1/2`） |
+| ラベルなしのフォーム入力 | スクリーンリーダーが目的を読み上げられない | `<label>` を `for` 属性で関連付け |
+| ラベルの横配置 | モバイルで破綻し、視線移動が増える | ラベルは入力欄の上 |
+| グループ時の `<fieldset>` / `<legend>` の省略 | グループの目的が伝わらない | 必ず使用する |
+| エラーメッセージの自動非表示 | ユーザーが読む前に消える | 修正されるまで表示 |
+| 色のみによるエラー状態の伝達 | 色覚多様性への非対応 | ボーダー色 + エラーアイコン + テキスト |
+| カード直下の `<fieldset>` + `<legend>` | `<legend>` のブラウザデフォルト描画がカードの `border` と干渉し、見出しがボーダー上に浮いて視覚的に破綻する | カードレベルのセクション見出しは `<div>` + `<h2>` を使用。`<fieldset>` / `<legend>` はカード内部のフォームコントロールグループに限定する |
+| 日付セレクト（年月日）の均等幅（`grid-cols-3` 等） | 月・日セレクトが不必要に広くなり選択しにくい | `flex` レイアウトで年 `w-28`、月・日 `w-20` に固定。年/月/日のサフィックスラベル付与を推奨 |
+| チェックのみで確定する設計 | 意図しない確定が起きる | 確認ボタンを必ず配置 |
+| 入力途中の自動フォーカス移動 | ユーザーを混乱させる | ユーザー操作に任せる |
+| 離れた位置のエラー表示 | フィールドとの対応がわからない | フィールド直下に表示 |
+
+### モーダル
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| フォーカストラップなしのモーダル | キーボードユーザーがモーダル外に出てしまう | Tab/Shift+Tabがモーダル内を循環 |
+| Escキーで閉じられないモーダル | ユーザーが脱出できない | Escキーで閉じる |
+| 閉じる手段がないモーダル | ユーザーが操作を中断できない | 閉じるボタン + Esc + オーバーレイクリック |
+| `role="dialog"` の省略 | スクリーンリーダーがモーダルを認識できない | 必ず付与 |
+| オーバーレイなしのモーダル | 背景との分離が不明確 | `bg-black/50` のオーバーレイ |
+| 2階層以上のモーダルネスト | UXが複雑になりすぎる | 設計を見直す |
+
+### リスト
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| テキスト行数と合わない固定高さ | テキストが切れる or 余白が不均等 | 可変高さにする |
+| 色のみによる選択状態の伝達 | 色覚多様性への非対応 | ボーダー太さ + 背景スタイルを併用 |
+| ジェスチャー操作のみで代替手段がない | キーボード/スクリーンリーダーで操作不可 | ボタンによる代替操作を提供 |
+| アイコン/サムネイル間にボーダー配置 | 情報の断絶を誤解させる | ボーダーはアイテム間のみ |
+
+### テーブル
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| レイアウト目的での `<table>` 使用 | セマンティクス違反 | `flex` / `grid` を使う |
+| `<th>` の `scope` 省略 | ヘッダーとデータの関係が不明確 | `scope="col"` を付与 |
+
+### タグ・チップ
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| ×ボタンなしの削除可能タグ | キーボードのみでは削除操作を発見できない | ×ボタンを必ず表示する |
+| 24px 未満の×ボタンタップ領域 | 操作困難。モバイルで誤タップが頻発する | `p-0.5` + SVG `w-3 h-3`（実質24px以上を確保） |
+| `aria-label` なしの×ボタン | スクリーンリーダーがボタンの目的を読み上げられない | `aria-label="{タグ名}を削除"` を付与 |
+| Filter Chip の `aria-selected` 省略 | 選択状態がスクリーンリーダーに伝わらない | `aria-selected="true"` / `"false"` を付与 |
+| Badge と Tag の混同使用 | Badge はステータス表示（単方向）、Tag はユーザー管理メタデータ（双方向） | 用途に応じて `badge.md` / `tag.md` を使い分ける |
+
+### ディバイダー
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `<div>` + `border-b` で水平区切り | セマンティクス違反。支援技術が区切りを認識できない | `<hr>` or `role="separator"` |
+| `border-gray-100` でディバイダー | 薄すぎて境界が見えない | `border-slate-200` |
+| `border-slate-400` 以上の区切り線 | 線が強すぎてノイズになる | `border-slate-200`（標準）/ `border-slate-300`（強調） |
+
+### ステッパー
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| 色だけでステップ状態を区別 | 色覚多様性への非対応 | アイコン + ボーダー + 背景色を併用 |
+| `aria-current="step"` の省略 | スクリーンリーダーが現在ステップを識別できない | Active ステップに必ず付与 |
+| Indicator `w-6 h-6` 未満のサイズ | タップターゲットが小さすぎる | `w-8 h-8`（標準）/ `w-6 h-6`（コンパクト最小） |
+| Connector に `bg-slate-400` 以上 | 線が強すぎてノイズになる | `bg-primary-500`（完了区間）/ `bg-slate-200`（未着手区間） |
+
+### Date Picker
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `<input type="date">` のネイティブ表示 | ブラウザ間で表示が不統一 | カスタム Date Picker を使用 |
+| カレンダーポップアップに `shadow-lg` 以上 | 影が強すぎてノイズになる | `shadow-md` |
+| `z-20` 以外の z-index | Dropdown レイヤーの統一が崩れる | `z-20`（Dropdown レイヤー） |
+| 色だけで Today を表示 | 色覚多様性への非対応 | `font-semibold` を併用 |
+| キーボードナビゲーション省略 | キーボードユーザーが操作不可 | 矢印 + Enter + Escape を実装 |
+| 曜日ヘッダー省略 | 日付の曜日が判別できない | 日〜土のラベルを必ず表示 |
+
+### スケルトン・ローディング
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| スケルトンに `bg-slate-200` 以外の色 | DS統一から外れる | `bg-slate-200` 固定 |
+| 常時回転スピナーのみの全画面表示 | 進捗が伝わらず不安を与える | スケルトン or プログレスバーを併用 |
+| `aria-busy="true"` の省略 | スクリーンリーダーがローディング状態を認識できない | コンテナに `aria-busy="true"` + `role="status"` |
+| 実コンテンツ到着後の `aria-busy` 未解除 | ローディング完了が伝わらない | `aria-busy="false"` に変更する |
+
+---
+
+## アクセシビリティ（全般）
+
+| 禁止 | 理由 | 代替 |
+|------|------|------|
+| `outline: none` without ring | フォーカスインジケーターが消える | `focus:ring-2 focus:ring-primary-500/50` |
+| `tabindex` > 0 | フォーカス順序が混乱する | DOM順に従い、`tabindex="0"` or `-1` のみ使用 |
+| 時間制限のある操作 | ユーザーが操作を完了できない可能性 | 時間制限を設けない |
+| 装飾的アニメーションの多用 | 動きに敏感なユーザーへの配慮不足 | 状態変化のフィードバックのみ |
+| 200%拡大時のテキスト切り詰め | コンテンツにアクセスできなくなる | レスポンシブに対応 |