diff --git a/.claude/skills/change-sparkle-config/SKILL.md b/.claude/skills/change-sparkle-config/SKILL.md index 6c15fa9c..833dc8ce 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,6 +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 クラス上書きは非推奨）を案内し、中断する。 2. **現在値を読み取り（元ファイルをスナップショット保存）** - `sparkle.config.json` の元バイト列をそのままメモリに保持（後の rollback 用）。 - `JSON.parse` で解釈し、現在の `primary` / `font-pro` / `font-mono` / `radius` / `extend.*` とそれ以外のユーザー独自キーを把握。 @@ -54,7 +57,9 @@ user-invocable: true - 「この内容で書き換えて generate しますか？」と **1 回だけ** 尋ねる。OK なら 6 へ、調整要望なら 3 に戻る。 6. **書き込み前バリデーション（絶対実行）** - 提案する 4 値の各々について、**書き込み直前に** SKILL.md の「許可リスト」と照合する。 - - primary が許可リスト外 → 書き込み中断、別案を考え直す + - 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 のマッピングが保証にはならない。 @@ -82,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 48c3a57b..96e318b9 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,14 +168,7 @@ export function MyPage() { ## sparkle.config.json リファレンス -### 基本設定（Figma プラグインで出力可能） - -| フィールド | 説明 | 選択肢 | -|---|---|---| -| `primary` | プライマリカラー | `blue`, `red`, `orange`, `green`, `purple`, `pink`, `yellow` | -| `font-pro` | プロポーショナルフォント | Google Fonts の名前 | -| `font-mono` | モノスペースフォント | Google Fonts の名前 | -| `radius` | 角丸設定 | `none`, `sm`, `md`, `lg`, `xl`, `full` | +`primary` / `radius` の選択肢一覧・必須および型検証の挙動・複数テーマ運用したい場合の案内は `references/config-reference.md` を参照。 設定ファイルは [Sparkle Design Theme Settings](https://www.figma.com/community/plugin/1443500367756891364) Figma プラグインからも書き出せる。 @@ -253,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 00000000..16669dab --- /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` する方式）を参照。