From 3387128dd8a61b48ab525837b3ecd6b962130736 Mon Sep 17 00:00:00 2001 From: touyou <465697+touyou@users.noreply.github.com> Date: Mon, 6 Jul 2026 17:11:38 +0900 Subject: [PATCH 1/3] =?UTF-8?q?docs(skills):=20=E8=A4=87=E6=95=B0=E3=83=86?= =?UTF-8?q?=E3=83=BC=E3=83=9E=E9=81=8B=E7=94=A8=E3=81=A8=E3=82=AB=E3=82=B9?= =?UTF-8?q?=E3=82=BF=E3=83=A0=E3=83=96=E3=83=A9=E3=83=B3=E3=83=89=E3=82=AB?= =?UTF-8?q?=E3=83=A9=E3=83=BC=E3=81=AE=E6=A1=88=E5=86=85=E3=82=92=E3=82=B9?= =?UTF-8?q?=E3=82=AD=E3=83=AB=E3=81=AB=E5=8F=8D=E6=98=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit sparkle-design-internal issue #222 発見2・発見3で見つかったギャップに対応。 - change-sparkle-config: 複数の固定配色バリアントを1デプロイで切り替えたい という要望を検知したらスキル範囲外として sparkle-design-cli README の config分割推奨パターンに誘導するよう前提チェックに追加。primary が許可 リスト外のとき、7色に無い特定ブランドカラーが目的なら extend.custom-css での再定義方式（gray込み）を案内するようバリデーション分岐を拡充 - setup-sparkle-design: radius の選択肢一覧が古く（存在しない full を含み xs/2xl/3xl が欠落）、sparkle-design-cli PR #63 の primary/radius schema validation 追加と矛盾していたため8値に修正。primary/radius が 必須・型検証ありである旨と、複数テーマ運用時の README 参照を追記 Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01HPHc3HUB2dc2bHnfEE8FM2 --- .claude/skills/change-sparkle-config/SKILL.md | 3 ++- .claude/skills/setup-sparkle-design/SKILL.md | 8 ++++++-- 2 files changed, 8 insertions(+), 3 deletions(-) diff --git a/.claude/skills/change-sparkle-config/SKILL.md b/.claude/skills/change-sparkle-config/SKILL.md index 6c15fa9..03ef58c 100644 --- a/.claude/skills/change-sparkle-config/SKILL.md +++ b/.claude/skills/change-sparkle-config/SKILL.md @@ -35,6 +35,7 @@ user-invocable: true 1. **前提チェック** - カレントディレクトリに `sparkle.config.json` があるか確認。無ければ **未導入状態**。その場合は「**新規導入 + カスタムテーマ**は `setup-sparkle-design` スキル（internal 環境では `install-sparkle-design` スキル）が担当する（setup 実行時に `sparkle.config.json` を編集しておけば同じテーマで導入できる）」と案内し、setup にバトンパスして中断する。 - `package.json` の `dependencies` / `devDependencies` に `sparkle-design` が含まれるか確認（pnpm workspace 等で hoist されているケースに備え、`node_modules` のパスチェックは避ける）。未導入なら setup を案内して中断。 + - ユーザーの要望が「役割・テナント・画面ごとに複数の固定配色バリアントを 1 デプロイで切り替えたい」という趣旨（例:「管理画面と一般ユーザー画面で色を変えたい」「テナントごとに配色を出し分けたい」）なら **このスキルの範囲外**。本スキルは単一の `sparkle.config.json` を書き換えるだけなので複数バリアントの同時提供には対応できない。sparkle-design-cli の README「複数のテーマ配色を1デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式を推奨、単一 CSS + 属性スコープでの Tailwind クラス上書きは非推奨）を案内し、中断する。 2. **現在値を読み取り（元ファイルをスナップショット保存）** - `sparkle.config.json` の元バイト列をそのままメモリに保持（後の rollback 用）。 - `JSON.parse` で解釈し、現在の `primary` / `font-pro` / `font-mono` / `radius` / `extend.*` とそれ以外のユーザー独自キーを把握。 @@ -54,7 +55,7 @@ user-invocable: true - 「この内容で書き換えて generate しますか？」と **1 回だけ** 尋ねる。OK なら 6 へ、調整要望なら 3 に戻る。 6. **書き込み前バリデーション（絶対実行）** - 提案する 4 値の各々について、**書き込み直前に** SKILL.md の「許可リスト」と照合する。 - - primary が許可リスト外 → 書き込み中断、別案を考え直す + - primary が許可リスト外 → 書き込み中断。ユーザーが 7 色のいずれかで妥協できるなら別案を考え直す。ユーザーが **7 色に無い特定のブランドカラー** を明確に指定している場合は、別案を考え直さず「`primary` は 7 色までしか選べないため、そのブランドカラーを使うには `extend.custom-css` で `--color-primary-*` と `--color-gray-*`（50〜900、gray も必ずセットで）を丸ごと定義する方式が必要（sparkle-design-cli README 参照）」と案内する。これは 4 キーの単純書き換えの範囲外なので本スキルでは実行せず、必要なら手動対応をユーザーに委ねる - font-pro / font-mono が許可リスト外、または pro/mono 可否に反する用途 → 書き込み中断 - radius が許可リスト外 → 書き込み中断 - このチェックをスキップしない。ステップ 3 のマッピングが保証にはならない。 diff --git a/.claude/skills/setup-sparkle-design/SKILL.md b/.claude/skills/setup-sparkle-design/SKILL.md index 48c3a57..11d2648 100644 --- a/.claude/skills/setup-sparkle-design/SKILL.md +++ b/.claude/skills/setup-sparkle-design/SKILL.md @@ -171,13 +171,17 @@ export function MyPage() { | フィールド | 説明 | 選択肢 | |---|---|---| -| `primary` | プライマリカラー | `blue`, `red`, `orange`, `green`, `purple`, `pink`, `yellow` | +| `primary` | プライマリカラー（必須・型検証あり） | `blue`, `red`, `orange`, `yellow`, `purple`, `green`, `pink` | | `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` / `radius` は上記以外の値、または未指定だと `generate` がエラーで停止する（型強制のため。壊れた CSS が silent に出力されるのを防ぐ）。 設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364) Figma プラグインからも書き出せる。 +役割・テナントごとに複数の固定配色バリアントを 1 デプロイで切り替えたい場合は、単一の `sparkle.config.json` では対応できない。sparkle-design-cli の README「複数のテーマ配色を1デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式）を参照。 + --- ## 部分的な setup 実行 From 866a41bc164bfa2a7d84e06f814e598fc4a939f1 Mon Sep 17 00:00:00 2001 From: touyou <465697+touyou@users.noreply.github.com> Date: Mon, 6 Jul 2026 17:35:40 +0900 Subject: [PATCH 2/3] =?UTF-8?q?fix:=20=E3=82=BB=E3=83=AB=E3=83=95=E3=83=AC?= =?UTF-8?q?=E3=83=93=E3=83=A5=E3=83=BC=E3=81=A7=E8=A6=8B=E3=81=A4=E3=81=8B?= =?UTF-8?q?=E3=81=A3=E3=81=9F=E4=B8=8D=E6=95=B4=E5=90=88=E3=82=92=E4=BF=AE?= =?UTF-8?q?=E6=AD=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - change-sparkle-config と setup-sparkle-design で primary 7色の列挙順が 食い違っていた（本PR自体が drift を作っていた）ため、colors.json の 実際の順序に統一 - radius:"full" の注記が「silent に壊れる」のままで、新しく追記した 「エラーで停止する」という記述と矛盾していたため、schema validation 導入後の挙動に合わせて統一 - README の見出し「複数のテーマ配色を 1 デプロイでサポートしたい場合」の スペース表記が2箇所で食い違っていたため統一 - primary 許可リスト外の分岐が1文に条件・アクションを詰め込みすぎていて 「本スキルは extend.custom-css を自分で編集しない」という重要な注記が 埋もれていたため、サブ箇条書きに分割し先頭に明記 - 複数テーマ運用の検知分岐が frontmatter の description のトリガー フレーズに反映されておらず、スキル自体が発動しない可能性があったため 該当フレーズを追加 Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01HPHc3HUB2dc2bHnfEE8FM2 --- .claude/skills/change-sparkle-config/SKILL.md | 12 ++++++++---- .claude/skills/setup-sparkle-design/SKILL.md | 2 +- 2 files changed, 9 insertions(+), 5 deletions(-) diff --git a/.claude/skills/change-sparkle-config/SKILL.md b/.claude/skills/change-sparkle-config/SKILL.md index 03ef58c..833dc8c 100644 --- a/.claude/skills/change-sparkle-config/SKILL.md +++ b/.claude/skills/change-sparkle-config/SKILL.md @@ -10,6 +10,8 @@ description: > `setup-sparkle-design`（internal 環境では `install-sparkle-design`）を使うこと。** 「雰囲気を変えたい」「もっとポップに」「ビジネスライクに」「高級感を出したい」 「primary を変えたい」「角丸をもっと丸く」「フォントを変えたい」「テーマを提案して」 + 「テナントごとに配色を変えたい」「役割ごとに色を出し分けたい」（後者2つは複数 + バリアント要望として範囲外に誘導するために発動） で発動。English: "change the vibe", "make it more playful", "make it more business-like", "adjust the theme", "change primary color". user-invocable: true @@ -35,7 +37,7 @@ user-invocable: true 1. **前提チェック** - カレントディレクトリに `sparkle.config.json` があるか確認。無ければ **未導入状態**。その場合は「**新規導入 + カスタムテーマ**は `setup-sparkle-design` スキル（internal 環境では `install-sparkle-design` スキル）が担当する（setup 実行時に `sparkle.config.json` を編集しておけば同じテーマで導入できる）」と案内し、setup にバトンパスして中断する。 - `package.json` の `dependencies` / `devDependencies` に `sparkle-design` が含まれるか確認（pnpm workspace 等で hoist されているケースに備え、`node_modules` のパスチェックは避ける）。未導入なら setup を案内して中断。 - - ユーザーの要望が「役割・テナント・画面ごとに複数の固定配色バリアントを 1 デプロイで切り替えたい」という趣旨（例:「管理画面と一般ユーザー画面で色を変えたい」「テナントごとに配色を出し分けたい」）なら **このスキルの範囲外**。本スキルは単一の `sparkle.config.json` を書き換えるだけなので複数バリアントの同時提供には対応できない。sparkle-design-cli の README「複数のテーマ配色を1デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式を推奨、単一 CSS + 属性スコープでの Tailwind クラス上書きは非推奨）を案内し、中断する。 + - ユーザーの要望が「役割・テナント・画面ごとに複数の固定配色バリアントを 1 デプロイで切り替えたい」という趣旨（例:「管理画面と一般ユーザー画面で色を変えたい」「テナントごとに配色を出し分けたい」）なら **このスキルの範囲外**。本スキルは単一の `sparkle.config.json` を書き換えるだけなので複数バリアントの同時提供には対応できない。sparkle-design-cli の README「複数のテーマ配色を 1 デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式を推奨、単一 CSS + 属性スコープでの Tailwind クラス上書きは非推奨）を案内し、中断する。 2. **現在値を読み取り（元ファイルをスナップショット保存）** - `sparkle.config.json` の元バイト列をそのままメモリに保持（後の rollback 用）。 - `JSON.parse` で解釈し、現在の `primary` / `font-pro` / `font-mono` / `radius` / `extend.*` とそれ以外のユーザー独自キーを把握。 @@ -55,7 +57,9 @@ user-invocable: true - 「この内容で書き換えて generate しますか？」と **1 回だけ** 尋ねる。OK なら 6 へ、調整要望なら 3 に戻る。 6. **書き込み前バリデーション（絶対実行）** - 提案する 4 値の各々について、**書き込み直前に** SKILL.md の「許可リスト」と照合する。 - - primary が許可リスト外 → 書き込み中断。ユーザーが 7 色のいずれかで妥協できるなら別案を考え直す。ユーザーが **7 色に無い特定のブランドカラー** を明確に指定している場合は、別案を考え直さず「`primary` は 7 色までしか選べないため、そのブランドカラーを使うには `extend.custom-css` で `--color-primary-*` と `--color-gray-*`（50〜900、gray も必ずセットで）を丸ごと定義する方式が必要（sparkle-design-cli README 参照）」と案内する。これは 4 キーの単純書き換えの範囲外なので本スキルでは実行せず、必要なら手動対応をユーザーに委ねる + - primary が許可リスト外 → **書き込み中断**。**本スキルは `extend.custom-css` を自分で編集・生成しない**（4 キーの単純書き換えの範囲外）。中断した上で次のいずれかを行う: + - ユーザーが 7 色のいずれかで妥協できるなら、別案を考え直して 3 に戻る。 + - ユーザーが **7 色に無い特定のブランドカラー** を明確に指定している場合は、別案を考え直さず「`primary` は 7 色までしか選べないため、そのブランドカラーを使うには `extend.custom-css` で `--color-primary-*` と `--color-gray-*`（50〜900、gray も必ずセットで）を丸ごと定義する方式が必要（sparkle-design-cli README 参照）」と案内し、手動対応をユーザーに委ねる。 - font-pro / font-mono が許可リスト外、または pro/mono 可否に反する用途 → 書き込み中断 - radius が許可リスト外 → 書き込み中断 - このチェックをスキップしない。ステップ 3 のマッピングが保証にはならない。 @@ -83,13 +87,13 @@ user-invocable: true #### primary（7 色） -`blue` / `red` / `orange` / `green` / `purple` / `pink` / `yellow` +`blue` / `red` / `orange` / `yellow` / `purple` / `green` / `pink` #### radius（8 段階） `none` / `xs` / `sm` / `md` / `lg` / `xl` / `2xl` / `3xl` -> ⚠️ `full` は `sparkle-variables/radius.csv` に **入力キーとして存在しない**（`round` 列の semantic 出力にのみ現れる）。`radius: "full"` と書いても CLI の radiusMapping は未ヒットで置換がスキップされ silent に壊れる。丸みを最大化したい場合は `3xl` を使う。 +> ⚠️ `full` は `sparkle-variables/radius.csv` に **入力キーとして存在しない**（`round` 列の semantic 出力にのみ現れる）。`radius: "full"` や上記以外の値は `generate` 実行時にエラーで停止する（型検証あり）。丸みを最大化したい場合は `3xl` を使う。 #### font-pro / font-mono（11 種、用途制限あり） diff --git a/.claude/skills/setup-sparkle-design/SKILL.md b/.claude/skills/setup-sparkle-design/SKILL.md index 11d2648..1cb4e49 100644 --- a/.claude/skills/setup-sparkle-design/SKILL.md +++ b/.claude/skills/setup-sparkle-design/SKILL.md @@ -180,7 +180,7 @@ export function MyPage() { 設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364) Figma プラグインからも書き出せる。 -役割・テナントごとに複数の固定配色バリアントを 1 デプロイで切り替えたい場合は、単一の `sparkle.config.json` では対応できない。sparkle-design-cli の README「複数のテーマ配色を1デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式）を参照。 +役割・テナントごとに複数の固定配色バリアントを 1 デプロイで切り替えたい場合は、単一の `sparkle.config.json` では対応できない。sparkle-design-cli の README「複数のテーマ配色を 1 デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式）を参照。 --- From 8b863c5ee72055244d6f67bd1e85d2253da69810 Mon Sep 17 00:00:00 2001 From: touyou <465697+touyou@users.noreply.github.com> Date: Mon, 6 Jul 2026 17:51:10 +0900 Subject: [PATCH 3/3] =?UTF-8?q?refactor(skills):=20sparkle.config.json=20?= =?UTF-8?q?=E3=83=AA=E3=83=95=E3=82=A1=E3=83=AC=E3=83=B3=E3=82=B9=E3=82=92?= =?UTF-8?q?=E7=8B=AC=E7=AB=8B=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB?= =?UTF-8?q?=E5=88=86=E5=89=B2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit setup-sparkle-design/SKILL.md の primary/radius 選択肢一覧・型検証の挙動・ 複数テーマ運用の案内を references/config-reference.md に切り出した。 既存の component-catalog.md 等と同じ progressive disclosure パターンに 揃え、常に読み込まれる SKILL.md 本体を軽量に保つ。 change-sparkle-config 側は今回の追記が「実行方針」内の判定ロジック （前提チェック・書き込み前バリデーションの分岐）で、かつ毎回参照される コアデータ（許可リスト）と密結合なため、分割は見送った。 Co-Authored-By: Claude Sonnet 5 Claude-Session: https://claude.ai/code/session_01HPHc3HUB2dc2bHnfEE8FM2 --- .claude/skills/setup-sparkle-design/SKILL.md | 15 +++------------ .../references/config-reference.md | 18 ++++++++++++++++++ 2 files changed, 21 insertions(+), 12 deletions(-) create mode 100644 .claude/skills/setup-sparkle-design/references/config-reference.md diff --git a/.claude/skills/setup-sparkle-design/SKILL.md b/.claude/skills/setup-sparkle-design/SKILL.md index 1cb4e49..96e318b 100644 --- a/.claude/skills/setup-sparkle-design/SKILL.md +++ b/.claude/skills/setup-sparkle-design/SKILL.md @@ -44,6 +44,7 @@ user-invocable: true | ドキュメント | いつ参照するか | |---|---| | この SKILL.md | 導入・基本設定（常に利用可能） | +| `references/config-reference.md` | primary/radius の選択肢確認・複数テーマ運用の相談時 | | `references/update-workflow.md` | アップデートが求められたとき | | `references/component-catalog.md` | コンポーネント選択の相談時 | | `references/component-selection.md` | コンポーネント置き換え・統一の依頼時 | @@ -167,21 +168,10 @@ export function MyPage() { ## sparkle.config.json リファレンス -### 基本設定（Figma プラグインで出力可能） - -| フィールド | 説明 | 選択肢 | -|---|---|---| -| `primary` | プライマリカラー（必須・型検証あり） | `blue`, `red`, `orange`, `yellow`, `purple`, `green`, `pink` | -| `font-pro` | プロポーショナルフォント | Google Fonts の名前 | -| `font-mono` | モノスペースフォント | Google Fonts の名前 | -| `radius` | 角丸設定（必須・型検証あり） | `none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | - -`primary` / `radius` は上記以外の値、または未指定だと `generate` がエラーで停止する（型強制のため。壊れた CSS が silent に出力されるのを防ぐ）。 +`primary` / `radius` の選択肢一覧・必須および型検証の挙動・複数テーマ運用したい場合の案内は `references/config-reference.md` を参照。 設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364) Figma プラグインからも書き出せる。 -役割・テナントごとに複数の固定配色バリアントを 1 デプロイで切り替えたい場合は、単一の `sparkle.config.json` では対応できない。sparkle-design-cli の README「複数のテーマ配色を 1 デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式）を参照。 - --- ## 部分的な setup 実行 @@ -257,6 +247,7 @@ Load references as needed: - **Load on error**: `references/troubleshooting.md` - **Load for component selection**: `references/component-catalog.md`, `references/component-selection.md` - **Load for update**: `references/update-workflow.md` +- **Load for config field details / multi-theme setups**: `references/config-reference.md` --- diff --git a/.claude/skills/setup-sparkle-design/references/config-reference.md b/.claude/skills/setup-sparkle-design/references/config-reference.md new file mode 100644 index 0000000..16669da --- /dev/null +++ b/.claude/skills/setup-sparkle-design/references/config-reference.md @@ -0,0 +1,18 @@ +# sparkle.config.json リファレンス + +## 基本設定（Figma プラグインで出力可能） + +| フィールド | 説明 | 選択肢 | +|---|---|---| +| `primary` | プライマリカラー（必須・型検証あり） | `blue`, `red`, `orange`, `yellow`, `purple`, `green`, `pink` | +| `font-pro` | プロポーショナルフォント | Google Fonts の名前 | +| `font-mono` | モノスペースフォント | Google Fonts の名前 | +| `radius` | 角丸設定（必須・型検証あり） | `none`, `xs`, `sm`, `md`, `lg`, `xl`, `2xl`, `3xl` | + +`primary` / `radius` は上記以外の値、または未指定だと `generate` がエラーで停止する（型強制のため。壊れた CSS が silent に出力されるのを防ぐ）。 + +設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364) Figma プラグインからも書き出せる。 + +## 複数テーマ運用したい場合 + +役割・テナントごとに複数の固定配色バリアントを 1 デプロイで切り替えたい場合は、単一の `sparkle.config.json` では対応できない。sparkle-design-cli の README「複数のテーマ配色を 1 デプロイでサポートしたい場合」（config を分割して複数回 `generate` する方式）を参照。