sparkle-design-cli 2.0.1 → 2.0.4

package/README.md

@@ -17,7 +17,7 @@ setup は次を自動で行います:
 3. 未作成の場合のみ初期ファイルを生成:
    - `sparkle.config.json`（デフォルトは blue / Inter / JetBrains Mono / md）
    - `postcss.config.mjs`
-   - `src/app/globals.css`（または `src/globals.css`）
+   - Tailwind エントリ CSS — Next.js App Router なら `src/app/globals.css`、Vite なら `src/index.css`、それ以外は `src/globals.css`（プロジェクト構成から自動判定）
 4. AI 指示ファイル（`CLAUDE.md` / `AGENTS.md` / Cursor rules）に Sparkle Design Guard ブロックを追加
 5. `sparkle-design-cli generate` を実行し、`sparkle-design.css` と `SparkleHead.tsx` を生成
 
@@ -49,11 +49,6 @@ npx sparkle-design-cli check src --strict
 npx sparkle-design-cli check src --format json
 ```
 
-### 後方互換モード
-
-既存の `npx sparkle-design-cli` も引き続き動作し、内部的には `generate` として扱われます。
-ただし後方互換のための動作なので、新規利用やドキュメント上の案内では `sparkle-design-cli generate` を使用してください。
-
 ### generate: 基本的な使用方法
 
 1. プロジェクトのルートディレクトリに `sparkle.config.json` ファイルを作成または配置します：
@@ -73,12 +68,6 @@ npx sparkle-design-cli check src --format json
 npx sparkle-design-cli generate
 ```
 
-既存プロジェクトでサブコマンドなしの呼び出しを使っている場合も、後方互換として次の実行方法を継続利用できます:
-
-```bash
-npx sparkle-design-cli
-```
-
 3. `src/app/sparkle-design.css` に CSS ファイルが生成されます。
 
 ### generate: コマンドオプション
@@ -142,6 +131,7 @@ sparkle-design-cli check --help
 - disabled を isDisabled の代わりに使わない
 - Button の prefixIcon に JSX を渡さない
 - Icon の children にテキストを渡さない
+- クリック可能な Card を `<button>` / `<a>` / `role="button"` でラップせず、`ClickableCard` を使う
 
 #### Manual Review Reminders
 
@@ -170,7 +160,7 @@ AI エージェントや CI からこの `lint:sparkle` を呼ぶ運用にする
 
 1. **パッケージマネージャーの検出**（pnpm / yarn / bun / npm）
 2. **パッケージのインストール** — `sparkle-design`（dependencies）、`tailwindcss` + `@tailwindcss/postcss`（devDependencies）
-3. **初期ファイルの生成** — `sparkle.config.json` / `postcss.config.mjs` / `globals.css` が無い場合のみ作成
+3. **初期ファイルの生成** — `sparkle.config.json` / `postcss.config.mjs` / Tailwind エントリ CSS（Next.js は `src/app/globals.css`、Vite は `src/index.css`）が無い場合のみ作成
 4. **AI ガード設定** — `CLAUDE.md` などに Sparkle Design Guard ブロックと `lint:sparkle` script を追加
 5. **`generate` の実行** — `sparkle-design.css` と `SparkleHead.tsx` を生成
 
@@ -189,7 +179,7 @@ npx --yes sparkle-design-cli setup --assistant claude --skip-install --skip-scaf
 ```
 
 既存ファイルは上書きされません:
-- `sparkle.config.json` / `postcss.config.*` / `globals.css` が存在する場合はそのまま保持
+- `sparkle.config.json` / `postcss.config.*` / Tailwind エントリ CSS が存在する場合はそのまま保持
 - 既に依存関係に入っているパッケージはインストールをスキップ
 - `package.json` の既存の `lint:sparkle*` 独自 script は保持（`--force-script-update` で上書き）
 
@@ -278,11 +268,11 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
 
 #### extend.source-packages
 
-`sparkle-design` を npm パッケージとして利用する場合に必須。`globals.css` に `@source` ディレクティブを自動挿入します。`sparkle-design` は常にデフォルトで含まれます。
+`sparkle-design` を npm パッケージとして利用する場合に必須。Tailwind エントリ CSS（自動検出）に `@source` ディレクティブを自動挿入します。`sparkle-design` は常にデフォルトで含まれます。
 
 #### extend.custom-css
 
-プロジェクト固有のカスタムトークンの CSS ファイルパス。`globals.css` に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
+プロジェクト固有のカスタムトークンの CSS ファイルパス。Tailwind エントリ CSS に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
 
 ## 出力
 
@@ -297,7 +287,7 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
 CLI は自動的にフォント管理を行います：
 
 1. **フォント検出**: `sparkle-design.css` から Google Fonts の `@import` 文を検出
-2. **globals.css への移動**: フォントの `@import` を `globals.css` の先頭に移動
+2. **エントリ CSS への移動**: フォントの `@import` を Tailwind エントリ CSS（`globals.css` / `index.css` 等、自動検出）の先頭に移動
 3. **sparkle-design.css から削除**: 元のファイルからフォント `@import` を削除
 
 ### なぜこの処理が必要なのか？
@@ -312,15 +302,15 @@ CSS の仕様では、`@import` 文は `@charset` と `@layer` 以外のすべ
 
 ### 動作条件
 
-- `globals.css` が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます
-- `globals.css` が存在しない場合は、フォント管理処理はスキップされます
+- Tailwind エントリ CSS（`@import "tailwindcss"` を含む CSS ファイル）が `sparkle-design.css` と同じディレクトリに存在する場合のみ実行されます（ファイル名に依存しません）
+- エントリ CSS が存在しない場合は、フォント管理処理はスキップされます
 
 ### 出力例
 
 ```text
 📦 フォント管理処理を開始します...
 📝 3個のフォントimportを検出しました
-✅ globals.css にフォントimportを追加しました
+✅ エントリ CSS にフォントimportを追加しました
 ✅ sparkle-design.css からフォントimportを削除しました
 ```
 
@@ -364,10 +354,8 @@ npm run format:check
 # CSS生成
 sparkle-design-cli generate
 
-# 既存呼び出しの後方互換モード
-sparkle-design-cli
-
 # ヘルプ表示
+sparkle-design-cli --help
 sparkle-design-cli generate --help
 
 # 検査

package/bin/sparkle-design.js

@@ -133,11 +133,6 @@ Commands:
   check      Sparkle Design のアンチパターンを検査
   setup      Sparkle Design プロジェクトをセットアップ（パッケージ導入 + 初期ファイル + AI ガード + generate）
 
-後方互換:
-  sparkle-design-cli [generate options]
-  サブコマンドなしの実行は現在も generate として動作しますが、
-  正式リリース時に削除予定です。今後は sparkle-design-cli generate を使ってください。
-
 Generate:
   sparkle-design-cli generate
   sparkle-design-cli generate --config ./config/design.json
@@ -207,13 +202,14 @@ Setup options:
   --instructions-path <path> AI 指示ファイルの出力先パス (default: アシスタント別のデフォルト)
   --force-script-update      既存の lint:sparkle 系 script も上書きする
   --skip-install             パッケージインストール（sparkle-design, tailwindcss）をスキップ
-  --skip-scaffold            初期ファイル（sparkle.config.json, postcss.config, globals.css）生成をスキップ
+  --skip-scaffold            初期ファイル（sparkle.config.json, postcss.config, エントリ CSS）生成をスキップ
   --skip-generate            generate 実行をスキップ
 
 Setup の動作:
   1. パッケージマネージャー検出（pnpm / npm / yarn / bun）
   2. sparkle-design を dependencies に追加、tailwindcss + @tailwindcss/postcss を devDependencies に追加
-  3. sparkle.config.json / postcss.config.mjs / globals.css が無ければ初期ファイルを生成
+  3. sparkle.config.json / postcss.config.mjs / Tailwind エントリ CSS（Next.js は
+     src/app/globals.css、Vite は src/index.css 等）が無ければ初期ファイルを生成
   4. AI アシスタントのガードブロックを指定ファイルに挿入（存在しなければ新規作成）
   5. sparkle-design-cli generate を実行し、sparkle-design.css と SparkleHead.tsx を生成
 
@@ -231,7 +227,8 @@ Check で検出する主なパターン:
   - disabled を isDisabled の代わりに使っている
   - Button の prefixIcon に JSX を渡している
   - Icon の children にテキストを渡している
-  - globals.css にフォント @import が残っている（SparkleHead への移行が必要）
+  - <Card> を <button> / <a> / role="button" でラップしている（ClickableCard を使う）
+  - エントリ CSS にフォント @import が残っている（SparkleHead への移行が必要）
   - CSP ヘッダーで Google Fonts がブロックされている可能性
 
 JSON 出力では manualReviewReminders も返すため、AI から実行する場合は --format json を推奨
@@ -242,28 +239,16 @@ generate で生成されるファイル:
 `);
 }
 
-function showGenerateDeprecationNotice() {
-  console.warn(
-    '[sparkle-design-cli] Running without a subcommand defaults to `generate`. ' +
-      'Use `sparkle-design-cli generate` instead. This compatibility mode will be removed at the formal release.'
-  );
-}
-
 function main() {
   const args = process.argv.slice(2);
   const command = args[0];
 
   try {
-    if (args.length === 0) {
-      showGenerateDeprecationNotice();
-      generateCSS();
-      return;
-    }
-
-    if (command === '-h' || command === '--help') {
+    if (args.length === 0 || command === '-h' || command === '--help') {
       showHelp();
       process.exit(0);
     }
+
     if (command === 'generate') {
       const options = parseGenerateOptions(args.slice(1));
 
@@ -306,22 +291,14 @@ function main() {
       return;
     }
 
-    if (!SUBCOMMANDS.has(command) && command.startsWith('-')) {
-      showGenerateDeprecationNotice();
-      const options = parseGenerateOptions(args);
-
-      if (options.help) {
-        showHelp();
-        process.exit(0);
-      }
-
-      generateCSS(options.configPath, options.outputPath, options.globalsPath);
-      return;
-    }
-
-    if (!SUBCOMMANDS.has(command)) {
-      throw new Error(`Unknown command: ${command}`);
-    }
+    // 未知のコマンド: エラー終了ではなく note + help 表示にする（typo 時の迷子を防ぐ）
+    // en: Unknown command: show a short note + help instead of throwing
+    console.warn(
+      `⚠️  Unknown command: ${command}. 次のいずれかを指定してください: ${[...SUBCOMMANDS].join(', ')}`
+    );
+    console.warn('');
+    showHelp();
+    process.exit(0);
   } catch (error) {
     console.error('❌ エラーが発生しました:', error.message);
     process.exit(1);

package/lib/anti-pattern-rules.js

@@ -489,6 +489,62 @@ const ANTI_PATTERN_GROUPS = [
       },
     ],
   },
+  {
+    id: 'card-clickable-wrap',
+    check: {
+      description: 'クリック可能な Card は ClickableCard を使う（button / a / role="button" でラップしない）',
+      recommendation:
+        '`<Card>` を `<button>` / `<a>` / `role="button"` を持つ要素で包まず、`ClickableCard` を使ってください。`ClickableCard` が適切な role / keyboard 対応 / focus ring を担保します。',
+      // <button> / <a> / role="button" が直接 <Card> を子に持つケース
+      // en: <button> / <a> / role="button" wrapping a <Card> directly
+      pattern:
+        /<(?:button\b|a\b|[A-Za-z][A-Za-z0-9]*\b[^>]*\brole\s*=\s*["']button["'])[^>]*>\s*<Card\b/g,
+    },
+    featureSection: lines([
+      '### クリック可能な Card: ClickableCard を使う',
+      '',
+      '```tsx',
+      '// ✅ Correct',
+      '<ClickableCard onClick={handle}>',
+      '  <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+      '</ClickableCard>',
+      '',
+      '// ❌ Wrong - <button> / <a> で Card を包まない',
+      '<button type="button" onClick={handle}>',
+      '  <Card>',
+      '    <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+      '  </Card>',
+      '</button>',
+      '```',
+      '',
+      '`ClickableCard` はクリック可能な Card のパターンとして必要な `role` / キーボード操作 / focus ring を提供する。`<button>` / `<a>` / `role="button"` でラップすると、ボタンの内側に対話型要素（リンクやフォーム要素）を置いたときにネストされた interactive 要素になりアクセシビリティ違反になる。',
+    ]),
+    jsdocTargets: [
+      {
+        file: 'src/components/ui/card/index.tsx',
+        targetName: 'Card',
+        section: {
+          bullets: [
+            {
+              ja: '`<Card>` を `<button>` / `<a>` / `role="button"` で包まないでください。クリック可能な Card には専用の `ClickableCard` を使ってください。',
+              en: 'Do not wrap `<Card>` with `<button>` / `<a>` / `role="button"`. Use the dedicated `ClickableCard` component for clickable cards.',
+            },
+          ],
+          example: lines([
+            '// ✅ Correct',
+            '<ClickableCard onClick={handle}>',
+            '  <CardHeader><CardTitle>タイトル</CardTitle></CardHeader>',
+            '</ClickableCard>',
+            '',
+            '// ❌ Wrong',
+            '<button type="button" onClick={handle}>',
+            '  <Card>...</Card>',
+            '</button>',
+          ]),
+        },
+      },
+    ],
+  },
   {
     id: 'icon-scale',
     featureSection: lines([

package/lib/setup.js

@@ -309,12 +309,33 @@ function ensurePackagesInstalled(cwd, packageManager, candidates, { dev = false,
   return { ran: true, reason: 'installed', packages: missing, packageManager, dev };
 }
 
+// Vite の設定ファイル候補（プロジェクト種別の判定に使う）
+// en: Vite config files used to detect a Vite project
+const VITE_CONFIG_FILES = [
+  'vite.config.ts',
+  'vite.config.js',
+  'vite.config.mjs',
+  'vite.config.cjs',
+  'vite.config.mts',
+  'vite.config.cts',
+];
+
+function isViteProject(cwd) {
+  return VITE_CONFIG_FILES.some((name) => fs.existsSync(path.join(cwd, name)));
+}
+
 /**
- * src/app → src/app/globals.css、src 直下があれば src/globals.css を優先
- * en: Prefer src/app/globals.css when src/app exists, otherwise src/globals.css
+ * エントリポイント CSS の新規作成先を決定する。
+ * - Next.js App Router (src/app あり) → src/app/globals.css
+ * - Vite プロジェクト → src/index.css（Vite の慣習に合わせる）
+ * - それ以外で src/ がある → src/globals.css
+ * - フォールバック → src/app/globals.css
+ * en: Pick the scaffold target for the entry CSS. Vite projects get src/index.css
+ *     to match the common convention, Next.js App Router gets src/app/globals.css.
  */
 function defaultGlobalsCssTarget(cwd) {
   if (fs.existsSync(path.join(cwd, 'src/app'))) return 'src/app/globals.css';
+  if (isViteProject(cwd)) return 'src/index.css';
   if (fs.existsSync(path.join(cwd, 'src'))) return 'src/globals.css';
   return 'src/app/globals.css';
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.0.1",
+  "version": "2.0.4",
   "description": "Sparkle Design CSS Generator - デザインシステムCSSを設定ファイルから生成するツール",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",