sparkle-design-cli 2.2.3 → 2.3.1

package/README.md

@@ -457,10 +457,10 @@ Next.js / Vite 以外で導入したい方で困ったときは Issue で教え
 
 #### Core（プラグインが出力）
 
-- `primary`: プライマリカラー（blue, red, orange など）
+- `primary`: プライマリカラー（必須）。次の7色のいずれかを指定してください: `blue` / `red` / `orange` / `yellow` / `purple` / `green` / `pink`。未指定、またはこれら以外の値を指定した場合、`generate` は例外を投げて停止します（そのブランドカラー専用の `--color-primary-*` / `--color-gray-*` を用意していないため、`var()` の参照先が存在せず壊れた CSS になってしまうのを防ぐためのバリデーションです）。7色にないブランドカラーを使いたい場合は [extend.custom-css](#extendcustom-css) を参照してください。
 - `font-pro`: プロポーショナルフォント（[Google Fonts](https://fonts.google.com/) の名前）
 - `font-mono`: モノスペースフォント（[Google Fonts](https://fonts.google.com/) の名前）
-- `radius`: 角丸設定（sm, md, lg など）
+- `radius`: 角丸設定（必須）。次のいずれかを指定してください: `none` / `xs` / `sm` / `md` / `lg` / `xl` / `2xl` / `3xl`。未指定、またはこれら以外の値を指定した場合、`primary` と同様に `generate` は例外を投げて停止します（無効な値だと `--radius-action` が壊れた参照のまま出力されるのを防ぐためです）。
 
 ### extend セクション（拡張設定）
 
@@ -510,6 +510,74 @@ Figma プラグインが出力する基本4項目に加えて、プロジェク
 
 プロジェクト固有のカスタムトークンの CSS ファイルパス。Tailwind エントリ CSS に `@import` が自動挿入されます。`sparkle-design.css` に直接追加すると `generate` 実行時に上書きされるため、必ず別ファイルに分離してください。
 
+この `@import` は `sparkle-design.css` の直後に挿入されるため、`custom-css` 側で書いた `:root { --color-xxx: ... }` は CSS の cascade（後勝ち）でそのまま `sparkle-design.css` のトークンを上書きします。属性セレクタや `!important` を使う必要はありません。
+
+##### カスタムブランドカラーを primary にしたい場合
+
+`primary` は 7 色のいずれかしか受け付けません（前述の Core セクション参照）。7 色にないブランドカラーを使いたい場合は、`primary` は 7 色から見た目が近いものを仮に選んだ上で、`extend.custom-css` で `--color-primary-*` と `--color-gray-*` をブランドカラー基準の値で丸ごと再定義してください。`primary` の選択自体は `custom-css` 側の定義で完全に上書きされるため実質的な意味を持たなくなりますが、フィールドとしては有効な値を入れておく必要があります。
+
+```css
+/* custom-tokens.css */
+:root {
+  /* ブランドカラー基準の primary パレット（50〜900） */
+  --color-primary-50: oklch(97% 0.02 250);
+  /* ... */
+  --color-primary-500: oklch(55% 0.18 250);
+  /* ... */
+  --color-primary-900: oklch(20% 0.08 250);
+
+  /* primary に合わせた gray パレット（50〜900）も必ず一緒に定義する。
+     gray だけ 7 色デフォルトのままだと、primary だけ浮いて見えるトーンずれが起きる */
+  --color-gray-50: oklch(98% 0.005 250);
+  /* ... */
+  --color-gray-900: oklch(22% 0.01 250);
+}
+```
+
+`primary` だけを差し替えて `gray` を既定のままにすると、コンポーネントの枠線・背景・テキストに使われる gray 系トークンと primary のトーンが揃わなくなるため、gray も必ずセットで再定義してください。
+
+## 複数のテーマ配色を 1 デプロイでサポートしたい場合
+
+管理画面と一般ユーザー画面で配色を出し分けたい、テナントごとに固定の配色バリアントを切り替えたいなど、「少数（数種類程度）の固定配色を 1 つのデプロイでサポートする」ケースの推奨パターンです。
+
+### 推奨: config を分割して複数の CSS を生成する
+
+`generate` は `-c/--config` と `-o/--output` を組み合わせることで、任意の config から任意の出力先へ CSS を生成できます。バリアントの数だけ config ファイルを用意し、バリアントの数だけ `generate` を実行してください（1 config に複数テーマをまとめて生成する機能はありませんが、CI やスクリプトで複数回呼び出せば十分に運用できます）。
+
+```jsonc
+// config/sparkle.admin.json
+{ "primary": "blue", "font-pro": "Inter", "font-mono": "JetBrains Mono", "radius": "md" }
+```
+
+```jsonc
+// config/sparkle.employee.json
+{ "primary": "green", "font-pro": "Inter", "font-mono": "JetBrains Mono", "radius": "md" }
+```
+
+```bash
+npx sparkle-design-cli generate -c ./config/sparkle.admin.json -o ./src/styles/sparkle-admin.css
+npx sparkle-design-cli generate -c ./config/sparkle.employee.json -o ./src/styles/sparkle-employee.css
+```
+
+あとは consumer 側で、表示するバリアントに応じてどちらの CSS を読み込むかを切り替えるだけです（例: role / tenant を判定できるレイアウト単位で `import "./sparkle-admin.css"` と `import "./sparkle-employee.css"` を出し分ける、Next.js のルートグループごとに読み込む entry CSS を分ける、など）。**同時に両方を読み込まない**（1 画面につき常に 1 バリアントだけを読み込む）ようにすると、後述のファイルサイズ増加の影響を最小化できます。
+
+### 非推奨: 単一 CSS + 属性スコープでの Tailwind クラス上書き
+
+`sparkle-design.css` を 1 本のまま、`[data-theme="xxx"] .bg-primary-500 { ... }` のような属性セレクタで Tailwind ユーティリティクラスを個別に上書きする方式は **推奨しません**。
+
+- コンポーネント側の実装詳細（クラス名の付け方や CSS の specificity）に依存するため、Sparkle 側の内部実装（例: 状態別カラーリングで compound attribute selector を使っているコンポーネント）が変わると、`!important` を使っても上書きが効かなくなることがあります。上書き対象は Sparkle が公開している契約（config / トークン）ではなく非公開の実装詳細なので、バージョンアップのたびに壊れるリスクを consumer 側が抱え続けることになります。
+- 上書きが必要なクラス／コンポーネントが増えるたびに、手動でセレクタを足していく必要があり、考慮漏れに気づきにくいです。
+
+上記のリスクを踏まえると、テーマ切り替えは config 分割 + `extend.custom-css` によるトークンレベルの上書き（cascade 順で確実に勝つ）で完結させる方が、Sparkle のバージョンアップに対しても壊れにくく、見通しの良い実装になります。
+
+### トレードオフ
+
+| 観点 | config 分割（推奨） | 属性スコープ上書き（非推奨） |
+| --- | --- | --- |
+| ファイルサイズ | バリアントの数だけ CSS が増える（各 CSS は 7 色パレット全体を含むため、1 バリアントあたりのベースコストは一定）。1 画面 1 バリアントのみ読み込む運用なら実質的な増分は小さい | 単一 CSS + 上書き分の差分のみで増分は小さい |
+| FOUC リスク | サーバー側 / ビルド時にバリアントを決定できるならほぼ無し。クライアント側でバリアント判定後に切り替える場合は他方式と同程度のリスクがある | クライアント側で属性を付与するタイミング次第でリスクがある（初期描画後に属性が付くと一瞬デフォルト配色が見える） |
+| 保守性 | Sparkle が公開している config / トークンだけに依存するため、コンポーネント内部実装の変更に影響されにくい | コンポーネントの内部実装（クラス名・specificity）に依存するため、Sparkle 側の変更で上書きが効かなくなるリスクがある |
+
 ## 出力
 
 - デフォルト出力先: `src/app/sparkle-design.css`
@@ -531,6 +599,10 @@ CSS 仕様上 `@import` は他の at-rule より前に書く必要があるた
 ### セットアップ
 
 ```bash
+# submodule（templates/sparkle-variables）を取得
+# ※ 未初期化だと generate とそれに依存するテストが失敗する
+git submodule update --init --recursive
+
 # 依存関係をインストール
 npm install
 
@@ -541,11 +613,17 @@ npm link
 ### 開発用コマンド
 
 ```bash
-npm test              # Node.js test runner
-npm run lint          # ESLint
-npm run format        # Prettier
+npm test                        # Node.js test runner
+npm run test:watch              # テストの watch 実行
+npm run lint                    # ESLint
+npm run lint:fix                # ESLint 自動修正
+npm run format                  # Prettier
+npm run format:check            # Prettier チェックのみ
+npm run sync:anti-pattern-docs  # check ルール一覧を README と隣接リポジトリの JSDoc に同期
 ```
 
+> **`sync:anti-pattern-docs` の注意:** このスクリプトは README だけでなく、ワークスペース内の隣接リポジトリ（`../sparkle-design` / `../sparkle-design-internal`）のファイルも書き換える横断スクリプトです。両リポジトリが隣にある Sparkle ワークスペース内で実行してください。
+
 ### リリース手順（メンテナ向け）
 
 publish は GitHub Actions の **Publish to npm** workflow 経由。ローカル `npm publish` は禁止。

package/bin/sparkle-design.js

@@ -184,10 +184,14 @@ Generate options:
 sparkle.config.json の設定フィールド:
 
   基本設定（Figma プラグインで出力可能）:
-  primary                    プライマリカラー (blue, red, orange, green, purple, pink, yellow など)
+  primary                    プライマリカラー (必須。blue, red, orange, yellow, purple, green, pink の
+                             いずれか。未指定、またはそれ以外の値は generate 実行時にエラーになります。
+                             7色にないブランドカラーを使いたい場合は extend.custom-css で
+                             --color-primary-* / --color-gray-* を再定義してください。詳細は README を参照)
   font-pro                   プロポーショナルフォント (Google Fonts の名前)
   font-mono                  モノスペースフォント (Google Fonts の名前)
-  radius                     角丸設定 (none, sm, md, lg, xl, full)
+  radius                     角丸設定 (必須。none, xs, sm, md, lg, xl, 2xl, 3xl のいずれか。
+                             未指定、またはそれ以外の値は primary と同様に generate 実行時にエラーになります)
 
   拡張設定（extend セクション、任意）:
   extend                     オブジェクト直書き、またはファイルパス（例: "./sparkle.extend.json"）

package/lib/color-utils.js

@@ -72,14 +72,99 @@ export function hexToOklch(hex) {
   return `oklch(${l} ${c} ${h})`;
 }
 
+/**
+ * primary に指定できる有効な色名の一覧を返す。
+ * colors.json（パレット定義）と gray.json（グレーマッピング）の両方に
+ * キーが存在する色だけを「primary として使える色」とみなす。
+ * colors.json のキー順（= README / CLI help の記載順）をそのまま維持する
+ * ため、`Object.keys(colors)` を起点に走査する（`Object.keys(grayMapping)`
+ * を起点にすると gray.json 側のキー順に引きずられ、ドキュメントの記載順と
+ * 食い違うエラーメッセージになってしまう）。
+ * en: A color is a valid `primary` choice only if it has both a palette
+ * definition (colors.json) and a matching gray mapping (gray.json). Iterate
+ * `colors` (not `grayMapping`) so the result preserves colors.json's key
+ * order, matching the order documented in README/CLI help.
+ * @param {Object} colors colors.jsonから読み込んだ色の定義
+ * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
+ * @returns {string[]} 有効な primary 色名の配列
+ */
+export function getValidPrimaryColors(colors, grayMapping) {
+  return Object.keys(colors).filter(
+    (name) =>
+      typeof colors[name] === 'object' &&
+      colors[name] !== null &&
+      Object.prototype.hasOwnProperty.call(grayMapping, name)
+  );
+}
+
+/**
+ * sparkle.config.json の `primary` を検証する。
+ *
+ * `primary` は `--color-primary-*: var(--color-{{PRIMARY}}-*)` のエイリアス先
+ * として使われるため、未知の値を渡すと `var()` の参照先が存在せず、gray token
+ * も生成されないまま「壊れているが構文的には正しい CSS」が silent に出力されて
+ * しまう（issue #222 発見3）。ここで早期に loud throw することで、consumer が
+ * 気付かないまま壊れた配色を deploy してしまう事態を防ぐ。
+ *
+ * ブランド独自色を primary にしたいケースは、`primary` 自体を拡張するのではなく
+ * `extend.custom-css` で `--color-primary-*` / `--color-gray-*` を直接定義して
+ * 上書きする方式を案内する（README.md 参照）。
+ *
+ * en: `primary` is only ever used to alias `--color-primary-*` to one of the
+ * shipped palettes (`var(--color-{{PRIMARY}}-*)`). An unknown value silently
+ * produces syntactically-valid-but-broken CSS (issue #222, finding 3) — no
+ * gray tokens, and primary tokens that resolve to nothing. Fail loud instead.
+ * For real custom brand colors, direct users to override the primary/gray
+ * tokens wholesale via `extend.custom-css` rather than stretching `primary`.
+ *
+ * @param {string} primaryColor config.primary の値
+ * @param {Object} colors colors.jsonから読み込んだ色の定義
+ * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
+ * @throws {Error} primaryColor が有効な色名でない場合（`err.code === 'E_INVALID_PRIMARY_COLOR'`）
+ */
+export function assertValidPrimaryColor(primaryColor, colors, grayMapping) {
+  const validColors = getValidPrimaryColors(colors, grayMapping);
+
+  if (typeof primaryColor === 'string' && validColors.includes(primaryColor)) {
+    return;
+  }
+
+  const err = new Error(
+    `sparkle.config.json の "primary" に無効な値が指定されています: ${JSON.stringify(primaryColor)}\n` +
+      `   有効な値: ${validColors.join(', ')}\n` +
+      `   これら以外のブランドカラーを primary にしたい場合は、primary は上記いずれかのままにし、\n` +
+      `   extend.custom-css 側で --color-primary-*（50〜900）と --color-gray-*（50〜900）を\n` +
+      `   独自の値で定義してオーバーライドしてください。primary の値だけでは任意色を表現できません。\n` +
+      `   詳細: README.md の「カスタムブランドカラーを primary にしたい場合」を参照してください。`
+  );
+  err.code = 'E_INVALID_PRIMARY_COLOR';
+  throw err;
+}
+
 /**
  * 色のトークンを生成する
+ *
+ * `generateColorTokens` はこのパッケージの public export（package.json の
+ * `main`/`exports["."]` が指す `lib/generate-css.js` から再エクスポートされる）
+ * なので、`generateCSS()` を経由しない直接呼び出しでも primary の検証が
+ * 効くよう、ここで `assertValidPrimaryColor` を呼ぶ。以前は `generateCSS()`
+ * 側だけで検証していたため、`generateColorTokens` を直接 import して不正な
+ * primaryColor を渡すと検証をすり抜けて壊れた CSS を返せてしまっていた。
+ * en: `generateColorTokens` is part of this package's public export surface
+ * (re-exported from `lib/generate-css.js`, which `package.json`'s
+ * `main`/`exports["."]` point to). Validate here — not only in
+ * `generateCSS()` — so a direct import of this function can't bypass the
+ * primary-color check and silently return broken CSS.
+ *
  * @param {Object} colors colors.jsonから読み込んだ色の定義
  * @param {Object} grayMapping gray.jsonから読み込んだグレーの定義
  * @param {string} primaryColor プライマリカラーの名前
  * @returns {string} 色のトークンのCSS文字列
+ * @throws {Error} primaryColor が有効な色名でない場合（`assertValidPrimaryColor` 参照）
  */
 export function generateColorTokens(colors, grayMapping, primaryColor) {
+  assertValidPrimaryColor(primaryColor, colors, grayMapping);
+
   const colorTokens = [];
 
   // 通常の色トークンを生成
@@ -96,15 +181,15 @@ export function generateColorTokens(colors, grayMapping, primaryColor) {
     }
   });
 
-  // グレーの色トークンを生成（プライマリカラーに基づく）
-  if (primaryColor && grayMapping[primaryColor]) {
-    const grayColors = grayMapping[primaryColor];
-    Object.entries(grayColors).forEach(([key, hexValue]) => {
-      const grayLevel = GRAY_LEVEL_MAP[key] || key;
-      const oklchValue = hexToOklch(hexValue);
-      colorTokens.push(`  --color-gray-${grayLevel}: ${oklchValue};`);
-    });
-  }
+  // グレーの色トークンを生成（プライマリカラーに基づく）。primaryColor は
+  // 上の assertValidPrimaryColor で検証済みなので grayMapping[primaryColor]
+  // の存在は保証されている。
+  const grayColors = grayMapping[primaryColor];
+  Object.entries(grayColors).forEach(([key, hexValue]) => {
+    const grayLevel = GRAY_LEVEL_MAP[key] || key;
+    const oklchValue = hexToOklch(hexValue);
+    colorTokens.push(`  --color-gray-${grayLevel}: ${oklchValue};`);
+  });
 
   return colorTokens.join('\n');
 }

package/lib/generate-css.js

@@ -15,7 +15,13 @@ import {
   loadGrayMapping,
   loadRadiusMapping,
 } from './file-loader.js';
-import { generateColorTokens, hexToRgba, hexToOklch } from './color-utils.js';
+import {
+  generateColorTokens,
+  hexToRgba,
+  hexToOklch,
+  assertValidPrimaryColor,
+  getValidPrimaryColors,
+} from './color-utils.js';
 import {
   manageFontImports,
   extractFontImports,
@@ -434,6 +440,49 @@ function upsertViteIndexHtmlFonts(cwd, resolvedFonts) {
   return { status: 'created', path: indexHtmlPath };
 }
 
+/**
+ * radius に指定できる有効な値の一覧を返す（radius.csv の name 列）。
+ * @param {Object} radiusMapping radius.csvから読み込んだ Radius マッピング
+ * @returns {string[]} 有効な radius 値の配列
+ */
+function getValidRadiusValues(radiusMapping) {
+  return Object.keys(radiusMapping);
+}
+
+/**
+ * sparkle.config.json の `radius` を検証する。
+ *
+ * `radius` が radius.csv に無い値だと `--radius-action: var(--radius-<不正な
+ * 値>)` が dangling reference のまま出力され、`radius` が config に無いと
+ * `{{RADIUS}}` プレースホルダーがそもそも置換されず、テンプレート内に生の
+ * `{{RADIUS}}`（`{` `}` を含む）が残って CSS 構文自体が壊れる。primary
+ * （issue #222 発見3）と同じ「型強制・validation が無いことによる silent
+ * breakage」がここにも存在するため、同じパターンで検証する。
+ *
+ * en: An unknown `radius` value ships a dangling `var(--radius-<bad-value>)`;
+ * a missing `radius` leaves the raw `{{RADIUS}}` placeholder (including its
+ * braces) unreplaced, which is invalid CSS syntax. Same silent-breakage class
+ * as the `primary` bug (issue #222, finding 3) — validate it the same way.
+ *
+ * @param {string} radius config.radius の値
+ * @param {Object} radiusMapping radius.csvから読み込んだ Radius マッピング
+ * @throws {Error} radius が有効な値でない場合（`err.code === 'E_INVALID_RADIUS'`）
+ */
+function assertValidRadius(radius, radiusMapping) {
+  const validValues = getValidRadiusValues(radiusMapping);
+
+  if (typeof radius === 'string' && validValues.includes(radius)) {
+    return;
+  }
+
+  const err = new Error(
+    `sparkle.config.json の "radius" に無効な値が指定されています: ${JSON.stringify(radius)}\n` +
+      `   有効な値: ${validValues.join(', ')}`
+  );
+  err.code = 'E_INVALID_RADIUS';
+  throw err;
+}
+
 /**
  * テンプレート変数を設定値で置換する
  * @param {string} template CSSテンプレート
@@ -799,6 +848,23 @@ export function generateCSS(
   const grayMapping = loadGrayMapping();
   const radiusMapping = loadRadiusMapping();
 
+  // 4.5 radius の値を検証する（issue #222 発見3の横展開）。無効な値、または
+  // radius 自体が未指定だと `var(--radius-<不正な名前>)` への dangling
+  // reference、あるいは `{{RADIUS}}` プレースホルダーが置換されず CSS 構文が
+  // 壊れたまま出力されてしまう。primary と同種のバグだが、radius の置換は
+  // `processTemplate` 内にインライン実装されており（`generateColorTokens` の
+  // ような専用の公開関数を持たない）、`processTemplate` はフォント処理など
+  // 他のテストから部分的な config で直接呼ばれる汎用関数でもあるため、検証は
+  // `processTemplate` の内部にではなく、実際の CLI 実行経路であるここ
+  // （`generateCSS`）に置く。
+  // en: Validate radius before generation (same bug class as primary, applied
+  // to the sibling enum field). Unlike primary/generateColorTokens, radius
+  // substitution is inlined in processTemplate — a general-purpose function
+  // also called directly, with partial configs, by unrelated font tests — so
+  // validating inside processTemplate would break that flexibility. Validate
+  // here instead, at the actual CLI entry point.
+  assertValidRadius(config.radius, radiusMapping);
+
   // 5. テンプレートを設定値で処理（resolvedFonts も返す）
   const { css: processedCSS, resolvedFonts } = processTemplate(
     template,
@@ -923,6 +989,10 @@ export {
   hexToRgba,
   hexToOklch,
   generateColorTokens,
+  assertValidPrimaryColor,
+  getValidPrimaryColors,
+  assertValidRadius,
+  getValidRadiusValues,
   dedupeFontImports,
   // 設定解決
   resolveExtend,

package/lib/load-plugins.js

@@ -61,7 +61,12 @@ function extractPluginEntry(pkg) {
 }
 
 /**
- * Discover and load anti-pattern plugins from the consumer's package.json deps.
+ * Discover and load anti-pattern plugins from the consumer's package.json deps, plus
+ * a self-reference path: if the consumer's own package.json declares
+ * `sparkleCli.antiPatterns`, that entry is loaded too (packageName is recorded as the
+ * consumer's own `name`, or `"(self)"` if unnamed). This lets a library check its own
+ * source against the anti-patterns it defines for its consumers, without needing to
+ * list itself in its own dependencies.
  *
  * Returns an object of the shape:
  *   {
@@ -92,18 +97,8 @@ export async function loadAntiPatternPlugins({ cwd = process.cwd() } = {}) {
   const groups = [];
   const reminders = [];
 
-  for (const depName of depNames) {
-    const depPkgPath = resolvePluginPackageJson(depName, cwd);
-    if (!depPkgPath) continue;
-
-    const depPkg = readJsonSafe(depPkgPath);
-    if (!depPkg) continue;
-
-    const entry = extractPluginEntry(depPkg);
-    if (!entry) continue;
-
-    const resolvedFile = path.resolve(path.dirname(depPkgPath), entry);
-    const record = { packageName: depName, entry, resolvedFile, status: 'loaded' };
+  const loadEntry = async (packageName, entry, resolvedFile) => {
+    const record = { packageName, entry, resolvedFile, status: 'loaded' };
 
     try {
       if (!fs.existsSync(resolvedFile)) {
@@ -115,7 +110,7 @@ export async function loadAntiPatternPlugins({ cwd = process.cwd() } = {}) {
       // plain object を export する plugin にも同じ厳しさを適用したい。
       // en: Share shape validation with `defineAntiPatternPlugin` so plugins that skip
       // the helper are still rejected at load time.
-      validatePluginShape(candidate, `${depName} (${entry})`);
+      validatePluginShape(candidate, `${packageName} (${entry})`);
       groups.push(...candidate.groups);
       record.groupIds = candidate.groups.map((group) => group.id);
       if (Array.isArray(candidate.manualReviewReminders)) {
@@ -125,11 +120,43 @@ export async function loadAntiPatternPlugins({ cwd = process.cwd() } = {}) {
       record.status = 'error';
       record.error = error?.message ?? String(error);
       console.warn(
-        `⚠️  sparkle-design-cli: failed to load anti-pattern plugin from ${depName} (entry: ${entry}, error: ${record.error})`
+        `⚠️  sparkle-design-cli: failed to load anti-pattern plugin from ${packageName} (entry: ${entry}, error: ${record.error})`
       );
     }
 
     discovered.push(record);
+  };
+
+  // 自己参照パス: consumer 自身が sparkleCli.antiPatterns を宣言しているケース
+  // （自分自身のソースに対して check を実行する場合、自分自身は自分の dependencies には
+  // 現れないため、依存パッケージ経由の discovery だけでは見つからない）。
+  // en: Self-reference path — a package checking its own source won't list itself in
+  // its own dependencies, so dependency-based discovery alone would miss it.
+  const selfEntry = extractPluginEntry(consumerPkg);
+  if (selfEntry) {
+    const resolvedFile = path.resolve(cwd, selfEntry);
+    await loadEntry(consumerPkg.name || '(self)', selfEntry, resolvedFile);
+  }
+
+  for (const depName of depNames) {
+    // 自分自身の名前を自分の dependencies に含むケース（workspace の self-link 等）では、
+    // 上の自己参照パスと重複してロードされてしまうためスキップする。
+    // en: Skip the consumer's own name if it also appears in its own dependencies (e.g. a
+    // workspace self-link) — otherwise the self-reference path above and this loop would
+    // load the same plugin entry twice.
+    if (depName === consumerPkg.name) continue;
+
+    const depPkgPath = resolvePluginPackageJson(depName, cwd);
+    if (!depPkgPath) continue;
+
+    const depPkg = readJsonSafe(depPkgPath);
+    if (!depPkg) continue;
+
+    const entry = extractPluginEntry(depPkg);
+    if (!entry) continue;
+
+    const resolvedFile = path.resolve(path.dirname(depPkgPath), entry);
+    await loadEntry(depName, entry, resolvedFile);
   }
 
   return { groups, reminders, discovered };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sparkle-design-cli",
-  "version": "2.2.3",
+  "version": "2.3.1",
   "description": "Sparkle Design CLI — プロジェクトセットアップ、CSS・フォント生成、アンチパターン検査、AI エージェント（Claude Code / Cursor / Codex）向けのガードと hook 設定まで一括で行う sparkle-design 公式 CLI。",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",