sparkle-design-cli 1.5.0 → 1.5.1

package/README.md

@@ -111,6 +111,14 @@ sparkle-design-cli check --help
 - children なしの Button に prefixIcon / suffixIcon を使わない
 - Material Symbols を className 直書きで使わない
 - shadcn/ui 既定 token を Sparkle Design 内へ持ち込まない
+- Tailwind デフォルト typography（text-sm, font-medium 等）を使わない
+- CardTitle に typography を上書きしない
+- CardControl に Button / IconButton 以外を入れない
+- CardHeader / CardContent の padding を上書きしない
+- asChild と prefixIcon / suffixIcon / isLoading を併用しない
+- disabled を isDisabled の代わりに使わない
+- Button の prefixIcon に JSX を渡さない
+- Icon の children にテキストを渡さない
 
 #### Manual Review Reminders
 
@@ -119,6 +127,7 @@ sparkle-design-cli check --help
 - Badge と Tag の意味的な使い分け
 - CardDescription の typography / color token 明示
 - Dialog と Modal の UX 上の使い分け
+- 手書き span が Tag で置き換え可能か
 
 #### 導入先での推奨設定
 
@@ -181,8 +190,8 @@ npx --yes sparkle-design-cli setup --assistant generic
 #### Core（プラグインが出力）
 
 - `primary`: プライマリカラー（blue, red, orange など）
-- `font-pro`: プロポーショナルフォント（文字列または配列。配列の場合はフォールバックチェーンになる）
-- `font-mono`: モノスペースフォント（文字列または配列）
+- `font-pro`: プロポーショナルフォント（[Google Fonts](https://fonts.google.com/) の名前）
+- `font-mono`: モノスペースフォント（[Google Fonts](https://fonts.google.com/) の名前）
 - `radius`: 角丸設定（sm, md, lg など）
 
 ### extend セクション（拡張設定）

package/bin/sparkle-design.js

@@ -186,7 +186,15 @@ Check で検出する主なパターン:
   - DialogCancel / DialogAction を <Button> で二重ラップしている
   - children なしの Button に prefixIcon / suffixIcon を使っている
   - Material Symbols を className 直書きしている
-  - text-muted-foreground / bg-background / border-border を持ち込んでいる
+  - shadcn/ui 既定 token（text-muted-foreground 等）を持ち込んでいる
+  - Tailwind デフォルト typography（text-sm, font-medium 等）を使っている
+  - CardTitle に typography を上書きしている
+  - CardControl に Button / IconButton 以外を入れている
+  - CardHeader / CardContent の padding を上書きしている
+  - asChild と prefixIcon / suffixIcon / isLoading を併用している
+  - disabled を isDisabled の代わりに使っている
+  - Button の prefixIcon に JSX を渡している
+  - Icon の children にテキストを渡している
 
 JSON 出力では manualReviewReminders も返すため、AI から実行する場合は --format json を推奨
 `);

package/lib/anti-pattern-rules.js

@@ -40,6 +40,11 @@ const MANUAL_REVIEW_REMINDERS = [
     message:
       'Dialog が確認用途、Modal が入力・詳細表示用途になっているか確認してください。文脈判断が必要なケースは機械検出されません。',
   },
+  {
+    id: 'tag-vs-handwritten-span',
+    message:
+      'ステータスバッジ風の手書き span（bg-*-100 text-*-700 rounded-full 等）が Tag コンポーネントで置き換え可能か確認してください。',
+  },
 ];
 
 const ANTI_PATTERN_GROUPS = [
@@ -859,10 +864,220 @@ const ANTI_PATTERN_GROUPS = [
       },
     ],
   },
+  {
+    id: 'tailwind-typography',
+    check: {
+      description: 'Tailwind デフォルト typography を Sparkle Design コンポーネント内で使わない',
+      recommendation:
+        'text-sm / text-xs / text-base / font-medium / font-semibold / font-bold は character-* utility に置き換えてください。',
+      pattern: /\b(text-(?:xs|sm|base|lg|xl|2xl)|font-(?:medium|semibold|bold|normal|light))\b/g,
+    },
+    featureSection: lines([
+      '### Tailwind デフォルト typography を使わない',
+      '',
+      '```tsx',
+      '// ✅ Correct — character-* utility を使う',
+      '<span className="character-3-regular-pro">テキスト</span>',
+      '',
+      '// ❌ Wrong — Tailwind デフォルトの typography を使わない',
+      '<span className="text-sm font-medium">テキスト</span>',
+      '```',
+      '',
+      'Sparkle Design コンポーネント内では `character-*-pro` / `character-*-mono` を使用する。Tailwind の `text-sm` / `font-medium` 等は使わない。',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'card-title-typography',
+    check: {
+      description: 'CardTitle に typography 系クラスを付与しない',
+      recommendation:
+        'CardTitle は character-4-bold-pro を内蔵しています。className で typography を上書きしないでください。',
+      pattern: /<CardTitle\b[^>]*\bclassName\s*=\s*(?:"[^"]*\bcharacter-[^"]*"|'[^']*\bcharacter-[^']*'|\{[^}]*\bcharacter-[^}]*\})[^>]*>/g,
+    },
+    featureSection: lines([
+      '### CardTitle に typography を上書きしない',
+      '',
+      '```tsx',
+      '// ✅ Correct — CardTitle はデフォルトで character-4-bold-pro が適用される',
+      '<CardTitle>タイトル</CardTitle>',
+      '',
+      '// ❌ Wrong — typography を上書きしない',
+      '<CardTitle className="character-2-bold-pro">タイトル</CardTitle>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'card-control-non-button',
+    check: {
+      description: 'CardControl に Button / IconButton 以外を入れない',
+      recommendation:
+        'CardControl はアクションボタン用です。ステータス表示には CardDescription を使ってください。',
+      pattern: /<CardControl\b[^>]*>[\s\S]*?<(?!Button\b|IconButton\b|\/CardControl)\w+/g,
+    },
+    featureSection: lines([
+      '### CardControl にはアクションボタンのみを入れる',
+      '',
+      '```tsx',
+      '// ✅ Correct — Button / IconButton を CardControl に入れる',
+      '<CardControl>',
+      '  <Button>保存</Button>',
+      '</CardControl>',
+      '',
+      '// ❌ Wrong — ステータス表示を CardControl に入れない（CardDescription を使う）',
+      '<CardControl>',
+      '  <Tag status="negative">警告</Tag>',
+      '</CardControl>',
+      '```',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'CardControl',
+        section: {
+          bullets: [
+            {
+              ja: 'CardControl にはアクション用の Button / IconButton のみを入れてください。ステータス表示（Tag 等）は CardDescription に入れてください。',
+              en: 'CardControl is for action buttons (Button / IconButton) only. Place status displays (Tag, etc.) in CardDescription.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<CardControl>',
+            '  <Button theme="neutral" variant="outline">キャンセル</Button>',
+            '  <Button>保存</Button>',
+            '</CardControl>',
+            '',
+            '// ❌ Wrong - ステータス表示を CardControl に入れない',
+            '<CardControl>',
+            '  <Tag status="negative">警告</Tag>',
+            '</CardControl>',
+          ]),
+        },
+      },
+    ],
+  },
+  {
+    id: 'card-padding-override',
+    check: {
+      description: 'Card 系コンポーネントのデフォルト padding を安易に上書きしない',
+      recommendation:
+        'CardHeader / CardContent のデフォルト padding（px-6 py-2）をそのまま使ってください。上書きは本当に必要な場合のみ。',
+      pattern: /<Card(?:Header|Content)\b[^>]*\bclassName\s*=\s*(?:"[^"]*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^"]*"|'[^']*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^']*'|\{[^}]*\b(?:p-|px-|py-|pt-|pb-|pl-|pr-)[^}]*\})[^>]*>/g,
+    },
+    featureSection: lines([
+      '### Card 系コンポーネントの padding を上書きしない',
+      '',
+      '```tsx',
+      '// ✅ Correct — デフォルトの padding をそのまま使う',
+      '<CardHeader>',
+      '  <CardTitle>タイトル</CardTitle>',
+      '</CardHeader>',
+      '',
+      '// ❌ Wrong — padding を安易に上書きしない',
+      '<CardHeader className="p-4 pb-2">',
+      '  <CardTitle>タイトル</CardTitle>',
+      '</CardHeader>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'aschild-with-icon-props',
+    check: {
+      description: 'asChild 使用時に prefixIcon / suffixIcon / isLoading を使わない',
+      recommendation:
+        'asChild モードでは prefixIcon / suffixIcon / isLoading は無視されます。アイコン付きの Link が必要なら asChild を外してください。',
+      pattern: /<Button\b(?=[^>]*\basChild\b)(?=[^>]*\b(?:prefixIcon|suffixIcon|isLoading)\b)[^>]*>/g,
+    },
+    featureSection: lines([
+      '### asChild と prefixIcon / suffixIcon / isLoading を併用しない',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Button asChild>',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '',
+      '// ❌ Wrong — asChild では prefixIcon は反映されない',
+      '<Button asChild prefixIcon="add">',
+      '  <Link href="/items/new">新規作成</Link>',
+      '</Button>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'disabled-vs-is-disabled',
+    check: {
+      description: 'Sparkle Design コンポーネントでは isDisabled を使う',
+      recommendation:
+        'Button / Input / Checkbox / IconButton では disabled ではなく isDisabled を使ってください。',
+      pattern: /<(Button|Input|Checkbox|IconButton)\b[^>]*\sdisabled(?!=\s*\{)\b/g,
+    },
+    featureSection: lines([
+      '### disabled ではなく isDisabled を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<Button isDisabled>確定</Button>',
+      '<Input isDisabled placeholder="無効状態" />',
+      '',
+      '// ❌ Wrong — disabled 属性を直接使わない',
+      '<Button disabled>確定</Button>',
+      '```',
+      '',
+      'HTML 標準の `disabled` も互換のため受け付けますが、Sparkle Design のコードでは `isDisabled` に統一します。',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'button-prefixicon-jsx',
+    check: {
+      description: 'Button の prefixIcon / suffixIcon に JSX を渡さない',
+      recommendation:
+        'prefixIcon / suffixIcon には Material Symbols のアイコン名（文字列）を渡してください。JSX（<Icon ... />）は渡さないでください。',
+      pattern: /<Button\b[^>]*\b(?:prefixIcon|suffixIcon)\s*=\s*\{[^}]*</g,
+    },
+    featureSection: lines([
+      '### Button の prefixIcon / suffixIcon に JSX を渡さない',
+      '',
+      '```tsx',
+      '// ✅ Correct — 文字列でアイコン名を渡す',
+      '<Button prefixIcon="bolt">アクション</Button>',
+      '',
+      '// ❌ Wrong — JSX を渡さない',
+      '<Button prefixIcon={<Icon icon="bolt" size={4} />}>アクション</Button>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
+  {
+    id: 'icon-children-text',
+    check: {
+      description: 'Icon の children にテキストを渡さない',
+      recommendation:
+        'Icon には icon prop でアイコン名を渡してください。children にテキストを渡すのは旧 Material Icons の書き方です。',
+      pattern: /<Icon\b(?:[^>]|\/(?!>))*>[^<]+<\/Icon>/g,
+    },
+    featureSection: lines([
+      '### Icon の children にテキストを渡さない',
+      '',
+      '```tsx',
+      '// ✅ Correct — icon prop を使う',
+      '<Icon icon="chevron_left" size={4} />',
+      '',
+      '// ❌ Wrong — children にテキストを渡さない',
+      '<Icon size={4}>chevron_left</Icon>',
+      '```',
+    ]),
+    jsdocTargets: [],
+  },
 ];
 
 function getCheckRules() {
-  const order = ['dialog-form', 'dialog-button-wrap', 'button-icon-only', 'material-symbols-direct', 'shadcn-token'];
+  const order = ['dialog-form', 'dialog-button-wrap', 'button-icon-only', 'material-symbols-direct', 'shadcn-token', 'tailwind-typography', 'card-title-typography', 'card-control-non-button', 'card-padding-override', 'aschild-with-icon-props', 'disabled-vs-is-disabled', 'button-prefixicon-jsx', 'icon-children-text'];
 
   return ANTI_PATTERN_GROUPS.filter((group) => group.check)
     .map((group) => ({

package/lib/generate-css.js

@@ -212,7 +212,7 @@ function processTemplate(template, config, grayMapping, radiusMapping, colors) {
   processedCSS = processedCSS.replace(/\{\{FONT_FAMILY_PRO\}\}/g, proFamilyValue);
   processedCSS = processedCSS.replace(/\{\{FONT_FAMILY_MONO\}\}/g, monoFamilyValue);
 
-  // 5. 基本的な設定値による置換（font-pro / font-mono の配列以外）
+  // 5. 基本的な設定値による置換（オブジェクト・配列・拡張フィールドはスキップ）
   Object.entries(config).forEach(([key, value]) => {
     // 配列・オブジェクト・拡張フィールドはスキップ
     if (Array.isArray(value) || (typeof value === 'object' && value !== null) || key === 'custom-css' || key === 'fonts' || key === 'extend' || key === 'source-packages') {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "main": "lib/generate-css.js",
   "type": "module",