sparkle-design-cli 1.3.8 → 1.3.10

package/lib/anti-pattern-rules.js

@@ -0,0 +1,901 @@
+const COMMON_INTRO =
+  '以下は頻繁に発生する誤用パターンです。コンポーネントが提供する専用 props・サブコンポーネントを使ってください。';
+
+function lines(values) {
+  return values.join('\n');
+}
+
+function renderJSDocSection(section) {
+  const output = ['**アンチパターン / Anti-patterns**', ''];
+
+  for (const bullet of section.bullets) {
+    output.push(`- ${bullet.ja}`);
+    output.push(`  en: ${bullet.en}`);
+  }
+
+  if (section.example) {
+    output.push('');
+    output.push('```tsx');
+    output.push(...section.example.split('\n'));
+    output.push('```');
+  }
+
+  return output.map((line) => (line ? ` * ${line}` : ' *')).join('\n');
+}
+
+
+const MANUAL_REVIEW_REMINDERS = [
+  {
+    id: 'badge-tag-semantics',
+    message:
+      'Badge と Tag の使い分けが意味的に正しいか確認してください。数値情報は Badge、ラベリングやステータス表示は Tag を使います。',
+  },
+  {
+    id: 'card-description-typography',
+    message:
+      'CardDescription に typography / color token が明示されているか確認してください。補足テキストには className で token を指定します。',
+  },
+  {
+    id: 'dialog-modal-ux',
+    message:
+      'Dialog が確認用途、Modal が入力・詳細表示用途になっているか確認してください。文脈判断が必要なケースは機械検出されません。',
+  },
+];
+
+const ANTI_PATTERN_GROUPS = [
+  {
+    id: 'card-description',
+    featureSection: lines([
+      '### CardTitle の補足テキストには CardDescription を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<CardHeader>',
+      '  <CardTitle>',
+      '    プロジェクト一覧',
+      '    <CardDescription className="character-3-regular-pro text-text-low">',
+      '      全 12 件',
+      '    </CardDescription>',
+      '  </CardTitle>',
+      '</CardHeader>',
+      '',
+      '// ❌ Wrong — CardTitle 内に span で補足を入れない',
+      '<CardHeader>',
+      '  <CardTitle>',
+      '    プロジェクト一覧',
+      '    <span className="text-sm text-neutral-500">(12件)</span>',
+      '  </CardTitle>',
+      '</CardHeader>',
+      '```',
+      '',
+      'CardTitle 内の補足情報や件数は CardDescription を使い、必要な typography / color token は className で明示する。長い説明文は CardContent に配置する。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'CardDescription',
+        section: {
+          bullets: [
+            {
+              ja: '`CardDescription` は CardTitle 内の短い補足テキスト用です。長い説明文は `CardContent` に配置してください。',
+              en: '`CardDescription` is for short supporting text inside CardTitle. Put long descriptive copy inside `CardContent`.',
+            },
+            {
+              ja: 'Typography や text color は用途に応じて className で明示してください。',
+              en: 'Specify typography and text color explicitly with className based on the use case.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<CardTitle>',
+            '  プロジェクト一覧',
+            '  <CardDescription className="character-3-regular-pro text-text-low">',
+            '    全 12 件',
+            '  </CardDescription>',
+            '</CardTitle>',
+            '',
+            '// ❌ Wrong - 長い説明文を CardTitle 内に入れない',
+            '<CardTitle>',
+            '  プロジェクト一覧',
+            '  <CardDescription>',
+            '    このカードはダッシュボードで重要な進捗と担当者の状態を表示します。',
+            '  </CardDescription>',
+            '</CardTitle>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'size-alignment',
+    featureSection: lines([
+      '### Input / Select と横並びの Button はサイズを揃える',
+      '',
+      '```tsx',
+      '// ✅ Correct — 同じサイズで統一',
+      '<div className="flex gap-2">',
+      '  <Input placeholder="検索..." />',
+      '  <Button size="md">検索</Button>',
+      '</div>',
+      '',
+      '// ❌ Wrong — サイズ不一致で高さが揃わない',
+      '<div className="flex gap-2">',
+      '  <Input placeholder="検索..." />',
+      '  <Button size="sm">検索</Button>',
+      '</div>',
+      '```',
+      '',
+      'Input / Select / Textarea のデフォルトサイズは md。横並びの Button も原則 md に合わせる。省スペース UI では Input と Button を揃えて sm にしてよい。テーブル内アクションなど独立した Button は sm でよい。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/input/index.tsx',
+        targetName: 'Input',
+        section: {
+          bullets: [
+            {
+              ja: 'Input の横にアイコンボタンを手動で配置しないでください。`isTrigger` / `triggerIcon` props を使用してください。',
+              en: 'Do not manually place an IconButton next to Input. Use `isTrigger` / `triggerIcon` props instead.',
+            },
+            {
+              ja: 'Input と横並びの Button は原則同じサイズにしてください。デフォルトの Input には `Button size="md"`、省スペース UI では `Input size="sm"` と `Button size="sm"` を使ってください。',
+              en: 'Keep Button size aligned when placing it next to Input. Use `Button size="md"` with the default Input, or pair `Input size="sm"` with `Button size="sm"` in compact UIs.',
+            },
+            {
+              ja: '無効状態は `isDisabled` を優先して使ってください。HTML 標準の `disabled` も互換のため受け付けますが、Sparkle Design のコードでは `isDisabled` に統一します。',
+              en: 'Prefer `isDisabled` for disabled state. The native `disabled` prop is still supported for compatibility, but Sparkle Design code should standardize on `isDisabled`.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<>',
+            '  <Input',
+            '    isTrigger',
+            '    triggerIcon="search"',
+            '    triggerAriaLabel="検索"',
+            '    onIconButtonClick={() => {}}',
+            '  />',
+            '  <div className="flex gap-2">',
+            '    <Input placeholder="検索..." />',
+            '    <Button size="md">検索</Button>',
+            '  </div>',
+            '  <div className="flex gap-2">',
+            '    <Input size="sm" placeholder="メッセージ" />',
+            '    <Button size="sm">送信</Button>',
+            '  </div>',
+            '  <Input isDisabled placeholder="無効状態" />',
+            '</>',
+            '',
+            '// ❌ Wrong - 手動配置',
+            '<div className="flex">',
+            '  <Input />',
+            '  <IconButton icon="search" aria-label="検索" />',
+            '</div>',
+            '',
+            '// ❌ Wrong - サイズ不一致',
+            '<div className="flex gap-2">',
+            '  <Input placeholder="検索..." />',
+            '  <Button size="sm">検索</Button>',
+            '</div>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/select/index.tsx',
+        targetName: 'Select',
+        section: {
+          bullets: [
+            {
+              ja: '`SelectTrigger` と横並びの Button は原則同じサイズにしてください。デフォルトの `SelectTrigger` に対しては `Button size="md"` を使ってください。',
+              en: 'Keep Button size aligned when placing it next to `SelectTrigger`. Use `Button size="md"` with the default `SelectTrigger` size.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<div className="flex gap-2">',
+            '  <Select>',
+            '    <SelectTrigger size="md" className="w-60">',
+            '      <SelectValue placeholder="選択してください" />',
+            '    </SelectTrigger>',
+            '  </Select>',
+            '  <Button size="md">追加</Button>',
+            '</div>',
+            '',
+            '// ❌ Wrong - 高さが揃わないサイズ不一致',
+            '<div className="flex gap-2">',
+            '  <Select>',
+            '    <SelectTrigger size="md" className="w-60">',
+            '      <SelectValue placeholder="選択してください" />',
+            '    </SelectTrigger>',
+            '  </Select>',
+            '  <Button size="sm">追加</Button>',
+            '</div>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'badge-tag',
+    featureSection: lines([
+      '### Badge と Tag を用途で使い分ける',
+      '',
+      '| コンポーネント | 用途 | 例 |',
+      '| --- | --- | --- |',
+      '| **Badge** | 特定の要素に**数値情報**を付与 | `<Badge>3</Badge>` |',
+      '| **Tag** | 情報の**ラベリング / ステータス付与** | `<Tag status="success">完了</Tag>` |',
+      '',
+      '```tsx',
+      '// ✅ Correct — ステータス表示には Tag を使う',
+      '<Tag variant="outline" status="warning">未紐付け</Tag>',
+      '',
+      '// ❌ Wrong — Badge をステータスラベルに使わない',
+      '<Badge>未紐付け</Badge>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/badge/index.tsx',
+        targetName: 'Badge',
+        section: {
+          bullets: [
+            {
+              ja: 'ステータス表示や分類ラベルには `Badge` を使わず、`Tag` を使ってください。',
+              en: 'Do not use `Badge` for status display or category labels. Use `Tag` instead.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<>',
+            '  <Badge>3</Badge>',
+            '  <Tag status="warning" variant="outline">未紐付け</Tag>',
+            '</>',
+            '',
+            '// ❌ Wrong - ステータスラベルに Badge を使わない',
+            '<Badge>未紐付け</Badge>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/tag/index.tsx',
+        targetName: 'Tag',
+        section: {
+          bullets: [
+            {
+              ja: '通知数や件数などの数値情報には `Tag` を使わず、`Badge` を使ってください。',
+              en: 'Do not use `Tag` for numeric information such as notification counts. Use `Badge` instead.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<>',
+            '  <Tag status="success">完了</Tag>',
+            '  <Badge>3</Badge>',
+            '</>',
+            '',
+            '// ❌ Wrong - 件数表示に Tag を使わない',
+            '<Tag status="info">3件</Tag>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'shadcn-token',
+    check: {
+      description: 'shadcn/ui 既定 token を Sparkle Design 内へ持ち込まない',
+      recommendation:
+        'text-muted-foreground / bg-background / border-border などは Sparkle Design token に置き換えてください。',
+      pattern: /\b(text-muted-foreground|bg-background|border-border)\b/g,
+    },
+    featureSection: lines([
+      '### shadcn/ui 由来の class / token をそのまま使わない',
+      '',
+      '```tsx',
+      '// ✅ Correct — Sparkle Design の typography / color token を使う',
+      '<CardDescription className="character-3-regular-pro text-text-low">',
+      '  全 12 件',
+      '</CardDescription>',
+      '',
+      '// ❌ Wrong — shadcn/ui の既定 token や素の font utility を持ち込まない',
+      '<CardDescription className="text-sm text-muted-foreground">',
+      '  全 12 件',
+      '</CardDescription>',
+      '<CardDescription className="font-medium text-slate-500">',
+      '  全 12 件',
+      '</CardDescription>',
+      '```',
+      '',
+      'shadcn/ui と混在するプロジェクトでも、Sparkle Design のコンポーネント内では `character-*` / `text-text-*` / Sparkle の color token を優先する。',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'button-icons',
+    featureSection: lines([
+      '### Button: prefixIcon / suffixIcon を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Button prefixIcon="check">確定</Button>',
+      '<Button suffixIcon="arrow_forward">次へ</Button>',
+      '',
+      '// ❌ Wrong - Icon を children に入れない（レイアウト崩れ・ローディング時に非表示にならない）',
+      '<Button><Icon icon="check" /> 確定</Button>',
+      '',
+      '// ❌ Wrong - children なしの Button + prefixIcon は IconButton に置き換える',
+      '<Button prefixIcon="close" aria-label="閉じる" />',
+      '',
+      '// ❌ Wrong - asChild では prefixIcon / suffixIcon / isLoading は反映されない',
+      '<Button asChild prefixIcon="add">',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '',
+      '// ✅ Correct',
+      '<IconButton icon="edit" aria-label="編集" />',
+      '<Button asChild>',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '```',
+      '',
+      '> Button は size に応じてアイコンサイズを自動設定する（sm→4, md→5, lg→6）。isLoading 時にアイコンを自動で非表示にする。`asChild` 使用時はアイコンやローディング表現をスロット先で組み立てる。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/button/index.tsx',
+        targetName: 'Button',
+        section: {
+          bullets: [
+            {
+              ja: '`<Icon>` を children として渡さないでください。`prefixIcon` / `suffixIcon` props を使用してください。',
+              en: 'Do not pass `<Icon>` as children. Use `prefixIcon` / `suffixIcon` props instead.',
+            },
+            {
+              ja: 'アイコンのみのボタンには `IconButton` を使用してください。',
+              en: 'Use `IconButton` for icon-only buttons.',
+            },
+            {
+              ja: '`asChild` 使用時は `prefixIcon` / `suffixIcon` / `isLoading` が反映されません。必要ならスロット先でアイコンやローディング表現を構成してください。',
+              en: 'In `asChild` mode, `prefixIcon`, `suffixIcon`, and `isLoading` are ignored. Render icons and loading states inside the slotted child when needed.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<Button prefixIcon="check">確定</Button>',
+            '',
+            '// ❌ Wrong - Icon を children に入れない',
+            '<Button><Icon icon="check" /> 確定</Button>',
+            '',
+            '// ❌ Wrong - children なしの Button + prefixIcon は IconButton に置き換える',
+            '<Button prefixIcon="close" aria-label="閉じる" />',
+            '',
+            '// ❌ Wrong - asChild では prefixIcon は反映されない',
+            '<Button asChild prefixIcon="add">',
+            '  <Link href="/items/new">新規作成</Link>',
+            '</Button>',
+            '',
+            '// ✅ Correct',
+            '<IconButton icon="edit" aria-label="編集" />',
+            '<Button asChild>',
+            '  <Link href="/items/new">新規作成</Link>',
+            '</Button>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'card-control',
+    featureSection: lines([
+      '### CardHeader: CardControl を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<CardHeader>',
+      '  <CardTitle>タイトル</CardTitle>',
+      '  <CardControl>',
+      '    <Button theme="neutral" variant="outline">キャンセル</Button>',
+      '    <Button>保存</Button>',
+      '  </CardControl>',
+      '</CardHeader>',
+      '',
+      '// ❌ Wrong - 手動 flex を使わない（CardHeader は内部で flex justify-between を適用済み）',
+      '<CardHeader>',
+      '  <div className="flex justify-between">',
+      '    <CardTitle>タイトル</CardTitle>',
+      '    <Button>アクション</Button>',
+      '  </div>',
+      '</CardHeader>',
+      '```',
+      '',
+      '`CardControl` は既定で `flex items-center gap-2` を持つ。複数アクションでも追加の layout class は不要。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'CardHeader',
+        section: {
+          bullets: [
+            {
+              ja: 'CardHeader 内で手動の flex レイアウト（`<div className="flex justify-between">`）を使わないでください。CardHeader は内部で flex レイアウトを適用済みです。アクションボタンは `CardControl` で囲んでください。',
+              en: 'Do not use manual flex layout inside CardHeader. CardHeader already applies flex layout internally. Wrap action buttons with `CardControl`.',
+            },
+            {
+              ja: 'CardTitle の補足情報や件数は、`span` などを直書きせず `CardDescription` を使ってください。',
+              en: 'For supporting text or counts inside CardTitle, do not inline a `span`; use `CardDescription`.',
+            },
+            {
+              ja: '`CardDescription` はタイトルの補足テキスト用です。長い説明文は `CardContent` に配置してください。',
+              en: 'Use `CardDescription` for short supporting text in CardTitle. Put long descriptive copy inside `CardContent`.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<CardHeader>',
+            '  <CardTitle>',
+            '    タイトル',
+            '    <CardDescription className="character-3-regular-pro text-text-low">',
+            '      全 12 件',
+            '    </CardDescription>',
+            '  </CardTitle>',
+            '  <CardControl>',
+            '    <Button theme="neutral" variant="outline">キャンセル</Button>',
+            '    <Button>保存</Button>',
+            '  </CardControl>',
+            '</CardHeader>',
+            '',
+            '// ❌ Wrong - 手動 flex を使わない',
+            '<CardHeader>',
+            '  <div className="flex justify-between">',
+            '    <CardTitle>タイトル</CardTitle>',
+            '    <Button theme="neutral" variant="outline">キャンセル</Button>',
+            '    <Button>保存</Button>',
+            '  </div>',
+            '</CardHeader>',
+            '',
+            '// ❌ Wrong - CardTitle 内に補足を入れない',
+            '<CardHeader>',
+            '  <CardTitle>',
+            '    タイトル',
+            '    <span className="text-sm text-neutral-500">全 12 件</span>',
+            '  </CardTitle>',
+            '</CardHeader>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'CardControl',
+        section: {
+          bullets: [
+            {
+              ja: 'CardHeader の右側アクションは `CardControl` に集約してください。複数ボタンでも追加の layout class は不要です。',
+              en: 'Place right-side actions in `CardControl`. No extra layout classes are needed even with multiple buttons.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<CardControl>',
+            '  <Button theme="neutral" variant="outline">キャンセル</Button>',
+            '  <Button>保存</Button>',
+            '</CardControl>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'icon-scale',
+    featureSection: lines([
+      '### Icon / Spinner: スケール値（1-12）を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct - スケール値',
+      '<Icon icon="settings" size={6} />   // 24px 相当',
+      '',
+      '// ❌ Wrong - ピクセル値は受け付けない',
+      '<Icon icon="settings" size={24} />',
+      '```',
+      '',
+      '> スケール対応表は上記「Icon Size Scale」セクション参照。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/icon/index.tsx',
+        targetName: 'Icon',
+        section: {
+          bullets: [
+            {
+              ja: '`size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。',
+              en: 'Do not pass pixel values to `size`. Use scale values (1-12) instead.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct - スケール値',
+            '<Icon icon="settings" size={6} />   // 24px 相当',
+            '',
+            '// ❌ Wrong - ピクセル値',
+            '<Icon icon="settings" size={24} />',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/spinner/index.tsx',
+        targetName: 'Spinner',
+        section: {
+          bullets: [
+            {
+              ja: '`size` にピクセル値（24, 32 など）を渡さないでください。スケール値（1-12）を使用してください。',
+              en: 'Do not pass pixel values to `size`. Use scale values (1-12) instead.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct - スケール値',
+            '<Spinner size={6} />',
+            '',
+            '// ❌ Wrong - ピクセル値',
+            '<Spinner size={24} />',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'button-icon-only',
+    check: {
+      description: 'children なしの Button に prefixIcon / suffixIcon を使わない',
+      recommendation:
+        'アイコンのみのアクションは IconButton を使ってください。Button に prefixIcon / suffixIcon だけを渡さないでください。',
+      pattern:
+        /<Button\b(?=[^>]*\b(?:prefixIcon|suffixIcon)=)[^>]*\/\s*>|<Button\b(?=[^>]*\b(?:prefixIcon|suffixIcon)=)[^>]*>\s*<\/Button>/g,
+    },
+    featureSection: lines([
+      '### children なしの Button + prefixIcon / suffixIcon を使わない',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<IconButton icon="close" aria-label="閉じる" />',
+      '',
+      '// ❌ Wrong - children なしの Button + prefixIcon',
+      '<Button prefixIcon="close" aria-label="閉じる" />',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'material-symbols-direct',
+    check: {
+      description: 'Material Symbols を className 直書きで使わない',
+      recommendation:
+        'Material Symbols は Icon / IconButton コンポーネント経由で使ってください。`material-symbols-rounded` を直接書かないでください。',
+      pattern:
+        /<[^>]+\bclassName\s*=\s*(?:"[^"]*\bmaterial-symbols-rounded\b[^"]*"|'[^']*\bmaterial-symbols-rounded\b[^']*'|\{[^}]*\bmaterial-symbols-rounded\b[^}]*\})[^>]*>/g,
+    },
+    featureSection: lines([
+      '### Material Symbols を直書きしない',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Icon icon="content_copy" size={4} />',
+      '<IconButton icon="content_copy" size="xs" aria-label="コピー" />',
+      '',
+      '// ❌ Wrong - material-symbols-rounded を直書きしない',
+      '<span className="material-symbols-rounded text-sm">content_copy</span>',
+      '```',
+      '',
+      'Material Symbols は `Icon` / `IconButton` 経由で使用する。直書きするとフォント読み込みタイミングでアイコン名テキストが見えることがある。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/icon/index.tsx',
+        targetName: 'Icon',
+        section: {
+          bullets: [
+            {
+              ja: '`material-symbols-rounded` を `span` に直書きせず、`Icon` を使ってください。',
+              en: 'Use `Icon` instead of writing `material-symbols-rounded` directly on a span.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<Icon icon="content_copy" size={4} />',
+            '',
+            '// ❌ Wrong - className を直書きしない',
+            '<span className="material-symbols-rounded text-sm">content_copy</span>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/icon-button/index.tsx',
+        targetName: 'IconButton',
+        section: {
+          bullets: [
+            {
+              ja: 'アイコンだけのアクションでは `Button` + `prefixIcon` ではなく `IconButton` を使ってください。',
+              en: 'Use `IconButton` for icon-only actions instead of `Button` with `prefixIcon`.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<IconButton icon="content_copy" aria-label="コピー" />',
+            '',
+            '// ❌ Wrong - Icon-only action を Button で表現しない',
+            '<Button prefixIcon="content_copy" aria-label="コピー" />',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'dialog-button-wrap',
+    check: {
+      description: 'DialogCancel/DialogAction を Button で二重ラップしない',
+      recommendation:
+        'DialogCancel と DialogAction は内部で Button を描画するので、children に Button を入れないでください。',
+      pattern: /<(DialogCancel|DialogAction)\b[^>]*>\s*<Button\b/g,
+    },
+    featureSection: lines([
+      '### DialogCancel / DialogAction: Button で二重ラップしない',
+      '',
+      '```tsx',
+      '// ✅ Correct - 文字列を渡すだけ（内部で Button を描画）',
+      '<DialogCancel>キャンセル</DialogCancel>',
+      '<DialogAction>確定</DialogAction>',
+      '',
+      '// ❌ Wrong - 二重ラップ',
+      '<DialogCancel><Button>キャンセル</Button></DialogCancel>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/dialog/index.tsx',
+        targetName: 'DialogCancel',
+        section: {
+          bullets: [
+            {
+              ja: '`DialogCancel` の children に `<Button>` を渡さないでください。内部で Button を描画します。',
+              en: 'Do not pass `<Button>` as children. DialogCancel renders a Button internally.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<DialogCancel>キャンセル</DialogCancel>',
+            '',
+            '// ❌ Wrong - 二重ラップ',
+            '<DialogCancel><Button>キャンセル</Button></DialogCancel>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/dialog/index.tsx',
+        targetName: 'DialogAction',
+        section: {
+          bullets: [
+            {
+              ja: '`DialogAction` の children に `<Button>` を渡さないでください。内部で Button を描画します。',
+              en: 'Do not pass `<Button>` as children. DialogAction renders a Button internally.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<DialogAction>確定</DialogAction>',
+            '',
+            '// ❌ Wrong - 二重ラップ',
+            '<DialogAction><Button>確定</Button></DialogAction>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'dialog-form',
+    check: {
+      description: 'フォーム入力に Dialog を使わない',
+      recommendation: '確認ダイアログは Dialog、フォーム入力や詳細表示は Modal を使ってください。',
+      pattern:
+        /<Dialog(?:\s|>)[\s\S]*?<(Input|Select|Textarea|Checkbox|Radio|Switch|Form|FormField|FormItem)\b[\s\S]*?<\/Dialog>/g,
+    },
+    featureSection: lines([
+      '### Dialog / Modal: 用途を混ぜない',
+      '',
+      '| コンポーネント | ベース | 用途 | 例 |',
+      '| --- | --- | --- | --- |',
+      '| **Dialog** | `AlertDialog` | アクション確認 | 削除確認、再試行確認、保存前の警告 |',
+      '| **Modal** | `Dialog` | フォーム入力・情報表示 | 作成/編集フォーム、詳細表示 |',
+      '',
+      '```tsx',
+      '// ✅ Correct - フォーム入力には Modal を使う',
+      '<Modal>',
+      '  <ModalContent size="md">',
+      '    <ModalHeader>',
+      '      <ModalTitle>ユーザー作成</ModalTitle>',
+      '      <ModalClose />',
+      '    </ModalHeader>',
+      '    <ModalBody isSpace>',
+      '      <Input />',
+      '      <Select />',
+      '    </ModalBody>',
+      '    <ModalFooter>',
+      '      <Button variant="ghost">キャンセル</Button>',
+      '      <Button>作成</Button>',
+      '    </ModalFooter>',
+      '  </ModalContent>',
+      '</Modal>',
+      '',
+      '// ❌ Wrong - フォーム入力に Dialog を使わない',
+      '<Dialog>',
+      '  <DialogContent>',
+      '    <DialogHeader>',
+      '      <DialogTitle>ユーザー作成</DialogTitle>',
+      '    </DialogHeader>',
+      '    <Input />',
+      '    <Select />',
+      '    <DialogFooter>',
+      '      <DialogCancel>キャンセル</DialogCancel>',
+      '      <DialogAction>作成</DialogAction>',
+      '    </DialogFooter>',
+      '  </DialogContent>',
+      '</Dialog>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/dialog/index.tsx',
+        targetName: 'Dialog',
+        section: {
+          bullets: [
+            {
+              ja: 'フォーム入力や詳細表示には使わず、削除確認や再試行確認などのアクション確認に使ってください。',
+              en: 'Do not use Dialog for forms or detail views. Use it for action confirmations such as delete and retry flows.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<Dialog>',
+            '  <DialogContent>',
+            '    <DialogHeader>',
+            '      <DialogTitle>削除確認</DialogTitle>',
+            '      <DialogDescription>本当に削除しますか？</DialogDescription>',
+            '    </DialogHeader>',
+            '    <DialogFooter>',
+            '      <DialogCancel>キャンセル</DialogCancel>',
+            '      <DialogAction>削除</DialogAction>',
+            '    </DialogFooter>',
+            '  </DialogContent>',
+            '</Dialog>',
+            '',
+            '// ❌ Wrong - フォーム入力に Dialog を使わない',
+            '<Dialog>',
+            '  <DialogContent>',
+            '    <Input />',
+            '    <Select />',
+            '  </DialogContent>',
+            '</Dialog>',
+          ]),
+        },
+      },
+      {
+        file: 'src/components/ui/modal/index.tsx',
+        targetName: 'Modal',
+        section: {
+          bullets: [
+            {
+              ja: '作成/編集フォームや詳細表示など、確認だけではない情報入力・閲覧に使ってください。',
+              en: 'Use Modal for forms and detail views such as create and edit flows, not for simple action confirmation.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<Modal>',
+            '  <ModalContent size="md">',
+            '    <ModalHeader>',
+            '      <ModalTitle>ユーザー作成</ModalTitle>',
+            '      <ModalClose />',
+            '    </ModalHeader>',
+            '    <ModalBody isSpace>',
+            '      <Input />',
+            '      <Select />',
+            '    </ModalBody>',
+            '    <ModalFooter>',
+            '      <Button>作成</Button>',
+            '    </ModalFooter>',
+            '  </ModalContent>',
+            '</Modal>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'input-trigger',
+    featureSection: lines([
+      '### Input: 組み込みトリガーを使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Input isTrigger triggerIcon="search" triggerAriaLabel="検索" onIconButtonClick={handleSearch} />',
+      '',
+      '// ❌ Wrong - 手動で IconButton を配置しない',
+      '<div className="flex">',
+      '  <Input />',
+      '  <IconButton icon="search" aria-label="検索" />',
+      '</div>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'link-open-in-new',
+    featureSection: lines([
+      '### Link: isOpenInNew を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct - 自動で open_in_new アイコンが表示される',
+      '<Link href="https://example.com" isOpenInNew>外部リンク</Link>',
+      '',
+      '// ❌ Wrong - 手動でアイコンを追加しない',
+      '<Link href="https://example.com">外部リンク <Icon icon="open_in_new" /></Link>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/link/index.tsx',
+        targetName: 'Link',
+        section: {
+          bullets: [
+            {
+              ja: '外部リンクアイコンを手動で追加しないでください。`isOpenInNew` prop が自動で `open_in_new` アイコンを表示します。',
+              en: 'Do not manually add external link icons. The `isOpenInNew` prop automatically displays the `open_in_new` icon.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<Link href="https://example.com" isOpenInNew>外部リンク</Link>',
+            '',
+            '// ❌ Wrong - 手動アイコン',
+            '<Link href="https://example.com">外部リンク <Icon icon="open_in_new" /></Link>',
+          ]),
+        },
+      },
+    ],
+  },
+];
+
+function getCheckRules() {
+  const order = ['dialog-form', 'dialog-button-wrap', 'button-icon-only', 'material-symbols-direct', 'shadcn-token'];
+
+  return ANTI_PATTERN_GROUPS.filter((group) => group.check)
+    .map((group) => ({
+      id: group.id,
+      ...group.check,
+    }))
+    .sort((left, right) => {
+      const leftIndex = order.indexOf(left.id);
+      const rightIndex = order.indexOf(right.id);
+      const normalizedLeftIndex = leftIndex === -1 ? Number.MAX_SAFE_INTEGER : leftIndex;
+      const normalizedRightIndex = rightIndex === -1 ? Number.MAX_SAFE_INTEGER : rightIndex;
+      return normalizedLeftIndex - normalizedRightIndex;
+    });
+}
+
+function getAllJSDocTargets() {
+  return ANTI_PATTERN_GROUPS.flatMap((group) => group.jsdocTargets);
+}
+
+function renderFeatureSections() {
+  return ANTI_PATTERN_GROUPS.map((group) => group.featureSection).join('\n\n');
+}
+
+function getManualReviewReminders() {
+  return MANUAL_REVIEW_REMINDERS;
+}
+
+export {
+  ANTI_PATTERN_GROUPS,
+  COMMON_INTRO,
+  getAllJSDocTargets,
+  getCheckRules,
+  getManualReviewReminders,
+  renderFeatureSections,
+  renderJSDocSection,
+};