@lism-css/mcp 0.27.0 → 0.28.1

package/README.ja.md

@@ -9,7 +9,7 @@ AIツール（Claude Code, Cursor 等）が、インストールされている
 
 | ツール | 説明 |
 |--------|------|
-| `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、CSS Layers、実装ルール） |
+| `get_overview` | フレームワークの全体像（基本ルール、何を書く前にどの資料を引くか、目的別のPrimitive/コンポーネント選定、クラス一覧、CSS Layers、ブレークポイント） |
 | `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）のリファレンス全文を取得 |
 | `get_props_system` | Propsシステム対応表 — React/Astro のpropsがCSSクラス・スタイルにどう変換されるか。CSSプロパティ名での逆引き（例: `padding` → `p`）や Property Class 記法（`-g:5` 等）にも対応 |
 | `get_component` | コンポーネント詳細（props、使用例、サブコンポーネント構成）。パッケージ（`lism-css` / `@lism-css/ui`）での絞り込みも可能 |

package/README.md

@@ -9,7 +9,7 @@ Enables AI tools (Claude Code, Cursor, etc.) to accurately reference Lism CSS do
 
 | Tool | Description |
 |------|-------------|
-| `get_overview` | Framework overview (architecture, design philosophy, packages, breakpoints, CSS layers, implementation rules) |
+| `get_overview` | Framework overview (core rules, which reference to look up before writing what, primitive/component selection by goal, class inventory, CSS layers, breakpoints) |
 | `get_tokens` | Get the full design token reference (colors, spacing, font sizes, shadows, radii, etc.) |
 | `get_props_system` | Props system reference — how React/Astro props map to CSS classes and styles. Supports reverse lookup by CSS property name (e.g. `padding` → `p`) and Property Class notation (e.g. `-g:5`) |
 | `get_component` | Component details (props, usage examples, sub-component structure). Optionally filter by package (`lism-css` or `@lism-css/ui`) |

package/dist/data/docs-index.json

@@ -150,7 +150,7 @@
       "max-",
       "min-"
     ],
-    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、状態管理用の内部変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`b--`, `c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
+    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、上書きを想定しない内部処理用の変数・状態判定用の変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`b--`, `c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
   },
   {
     "sourcePath": "tokens.mdx",
@@ -173,7 +173,7 @@
       "--s-unit",
       "typography"
     ],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, RADIUS, SHADOW, SPACE, OPACITY, SIZE トークンを掲載。SPACEはフィボナッチ数列ベースの余白スケール --s5〜--s80（s25/s35 を含む12段階）で、--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出。SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィは個別ページでも詳細を解説。"
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, RADIUS, SHADOW, SPACE, OPACITY, SIZE トークンを掲載。SPACEはフィボナッチ数列ベースの余白スケール --s5〜--s70（s25/s35/s45 を含む12段階）で、--s-unit（デフォルト 0.5rem ≒ 8px）を基準単位として算出。SHADOWは --bxsh--10〜--bxsh--50（5段階）、OPACITYは音楽強弱記号に由来するセマンティック命名（mp/p/pp/ppp）を採用。カラー・タイポグラフィは個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -462,7 +462,7 @@
       "full_no_layer.css",
       "!important"
     ],
-    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。@layer なし版は既存サイト・WordPress テーマなどカスケードを制御できない環境向けで、Property Class は常に !important 付き、u--trim / u--trimAll / u--cbox / u--divide / u--enclose はセレクタ二重化（.u--trim.u--trim = 0-2-0）で出力され「Property Class > Utility Class > 単一クラス」の序列を再現する（lism.config.js の defaultImportant: false・$default_important: 0・props の個別 important: 0 でも !important は外れない）。full.css には main.css 非収録の Property Class ブレイクポイント対応クラス（isVar 系・border ショートハンド系を除く。border は bds / bdc のサブプロパティで BP 対応）と、カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など。main.css は厳選したセマンティックカラーと keycolor のみ）を含む。スペーシング系（padding / margin / gap）のトークンユーティリティは main.css に収録済み。コンポーネント出力も full.css に合わせるには lism.config.js の isFullMode を使う（詳細は customize/config.mdx）。"
+    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。@layer なし版は既存サイト・WordPress テーマなどカスケードを制御できない環境向けで、Property Class は常に !important 付き、u--trim / u--trimAll / u--cbox はセレクタ二重化（.u--trim.u--trim = 0-2-0）で出力され「Property Class > Utility Class > 単一クラス」の序列を再現する（lism.config.js の defaultImportant: false・$default_important: 0・props の個別 important: 0 でも !important は外れない）。full.css には main.css 非収録の Property Class ブレイクポイント対応クラス（isVar 系・border ショートハンド系を除く。border は bds / bdc のサブプロパティで BP 対応）と、カラー系 Property Class（bgc / c / bdc）の全カラートークン分のクラス（-bgc:red など。main.css は厳選したセマンティックカラーと keycolor のみ）を含む。スペーシング系（padding / margin / gap）のトークンユーティリティは main.css に収録済み。コンポーネント出力も full.css に合わせるには lism.config.js の isFullMode を使う（詳細は customize/config.mdx）。"
   },
   {
     "sourcePath": "customize/config.mdx",
@@ -561,7 +561,7 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--divide & u--enclose", "u--clipText", "Opt-in", "u--inlineCenter"],
+    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--clipText", "Opt-in", "u--inlineCenter", "u--divide / u--enclose"],
     "keywords": [
       "utility",
       "ユーティリティ",
@@ -576,7 +576,7 @@
       "u--clipText",
       "u--inlineCenter"
     ],
-    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox（keycolorベースの色自動生成）, u--trim/u--trimAll（ハーフレディング余白調整）, u--srOnly（スクリーンリーダー専用）, u--divide/u--enclose（区切り線・セル枠）, u--clipText（テキストで背景クリッピング）等を解説。Opt-inとして u--inlineCenter（絵文字・インラインアイコン中央揃え）の作成例も紹介。"
+    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox（keycolorベースの色自動生成）, u--trim/u--trimAll（ハーフレディング余白調整）, u--srOnly（スクリーンリーダー専用）, u--clipText（テキストで背景クリッピング）を解説。Opt-in（コア外・追加CSS例）として u--inlineCenter（絵文字・インラインアイコン中央揃え）と u--divide/u--enclose（区切り線・セル枠）も紹介。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -1676,10 +1676,10 @@
       "Markup",
       "Examples",
       "チェックマークのリスト（b--list--check）",
-      "アイコンを差し替える（--_icon-c / --_icon-img）"
+      "アイコンを差し替える（--icon-c / --icon-img）"
     ],
     "keywords": ["List", "b--list", "リスト", "箇条書き", "アイコン", "チェックマーク", "checklist"],
-    "snippet": "行頭にアイコンを表示する装飾リストUIの実装例。primitivesと少量のCSS（b--list）で構成し、CSSをlism-blockレイヤーへコピーして利用。b--list--checkでチェックマークに切り替え、--_icon-c / --_icon-imgでアイコンの色・画像を変更できる。"
+    "snippet": "行頭にアイコンを表示する装飾リストUIの実装例。primitivesと少量のCSS（b--list）で構成し、CSSをlism-blockレイヤーへコピーして利用。b--list--checkでチェックマークに切り替え、--icon-c / --icon-imgでアイコンの色・画像を変更できる。"
   },
   {
     "sourcePath": "ui/components/Others.mdx",
@@ -1811,12 +1811,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--divide & u--enclose",
-    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示するユーティリティクラス。",
+    "title": "u--divide / u--enclose（Opt-in）",
+    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示する、コア外（Opt-in）のユーティリティクラス例。",
     "category": "guide",
-    "headings": ["u--divide & u--enclose"],
-    "keywords": ["u--divide", "u--enclose", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
-    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--enclose は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
+    "headings": ["u--divide / u--enclose"],
+    "keywords": ["u--divide", "u--enclose", "opt-in", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "コアには含まれない追加CSSの例。@layer lism-utility に追加して使う（@layer なし版のビルドでは @layer で囲まず .u--divide.u--divide のようにセレクタを二重化する）。u--divide は子要素間にのみ区切り線を表示（外周なし）、u--enclose は各セルを枠で囲む。gap と子要素の box-shadow で実装するため border より描画が粗く、並び方向が切り替わるレイアウトでは bdw のブレイクポイント切り替えを推奨。"
   },
   {
     "sourcePath": "trait-class.mdx",
@@ -1893,11 +1893,11 @@
   {
     "sourcePath": "set-class.mdx",
     "title": "set--s",
-    "description": "余白トークン（--s5〜--s80）を現在のフォントサイズ基準で再計算するSetクラス。",
+    "description": "余白トークン（--s5〜--s70）を現在のフォントサイズ基準で再計算するSetクラス。",
     "category": "guide",
     "headings": ["set--s"],
     "keywords": ["set--s", "余白", "フォントサイズ", "--s-unit", "spacing", "スペーシング", "em", "ボタン", "バッジ"],
-    "snippet": "set--s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s80 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
+    "snippet": "set--s クラスを使うと --s-unit が 0.5em に切り替わり、--s10〜--s70 がフォントサイズ基準で再計算される。Button や Badge など、内部余白を要素自身の font-size に追従させたい部品で活用。"
   },
   {
     "sourcePath": "set-class.mdx",

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ Lism CSSでUI・ページ・コンポーネントを実装する時の判断の
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
-**バージョン:** `lism-css@0.27.0`/`@lism-css/ui@0.27.0`時点の情報。プロジェクトのバージョンが異なる場合はユーザーに伝え、パッケージ更新またはこのスキルの更新を案内する。
+**バージョン:** `lism-css@0.28.0`/`@lism-css/ui@0.28.0`時点の情報。プロジェクトのバージョンが異なる場合はユーザーに伝え、パッケージ更新またはこのスキルの更新を案内する。
 
 ## 実装フロー（厳守）
 

package/dist/data/guides/antipatterns.md

@@ -124,8 +124,8 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | --- | --- | --- |
 | `p="8"` | `p="10"` | スペーストークンは離散値のみ。tailwindのような4の倍数で連続するスケールではない |
 | `g="6"` | `g="5"` | 同上 |
-| `m="45"`, `m="55"` | `m="40"` or `m="50"` | `40` 以降の中間値は用意されていない（前半は `5/15/25/35` まで補完済み） |
-| `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
+| `m="55"`, `m="65"` | `m="50"` or `m="60"` | `50` 以降の中間値は用意されていない（5 刻みは `45` まで） |
+| `m="100"` | `m="70"` | 上限は `70`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
 

package/dist/data/guides/components-ui.md

@@ -223,7 +223,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | --- | --- | --- | --- | --- |
 | `hovBgc` | Root | `string` | — | ホバー時の背景カラー。`--hov-bgc` 変数として出力 |
 | `hovC` | Root | `string` | — | ホバー時のテキストカラー。`--hov-c` 変数として出力 |
-| `itemP` | Root | `string` | — | 各アイテムのパディング。`--_item-p` 変数として出力 |
+| `itemP` | Root | `string` | — | 各アイテムのパディング。`--item-p` 変数として出力 |
 | `href` | Link | `string` | — | リンク先URL（Link は常に `a` 要素として出力） |
 | `hov` | Link | `string` | `-bgc` | ホバー時のスタイル。デフォルトで背景色が変化 |
 
@@ -342,8 +342,8 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `viewBox` | `string` | — | SVG の viewBox |
 | `level` | `number` | `5` | シェイプの高さレベル。`0` で非表示 |
 | `flip` | `'X' \| 'Y' \| 'XY'` | — | 反転方向。`data-flip` 属性として出力 |
-| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--_inner-stretch` 変数として出力 |
-| `offset` | `string` | — | 水平方向のオフセット。`--_inner-offset` 変数として出力 |
+| `stretch` | `string` | — | 水平方向の引き伸ばし量。`--inner-stretch` 変数として出力 |
+| `offset` | `string` | — | 水平方向のオフセット。`--inner-offset` 変数として出力 |
 | `isEmpty` | `boolean` | — | シェイプを非表示にしてスペーサーとして使用 |
 | `isAnimation` | `boolean` | — | アニメーションを有効化。`data-has-animation` 属性として出力 |
 

package/dist/data/guides/css-rules.md

@@ -56,7 +56,7 @@ Lism CSSで定義されるクラスは、その役割とレイヤーの所属が
 | Custom Class | Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス | `c--` | `c--featureList`, `c--header` |
 | `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
 | `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--enclose` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--trimAll`, `u--clipText` |
 | Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**

package/dist/data/guides/customize.md

@@ -22,7 +22,7 @@
 ## `@layer` をオフにする
 
 `lism-css/main.css` の代わりに `lism-css/main_no_layer.css` を読み込むだけで、`@layer` を使わない CSS に切り替えられます。
-no-layer版は既存サイトや WordPress テーマなど、カスケードを制御できない環境向けです。レイヤーの代わりに、Property Class は常に `!important` 付き、`u--trim` / `u--trimAll` / `u--cbox` / `u--divide` / `u--enclose` はセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で出力され、「Property Class > Utility Class > 単一クラス」の序列を再現します。`lism.config.js` の `defaultImportant: false`・`$default_important: 0`・`props` の個別 `important: 0` を指定しても `!important` は外れません。`b--` など上記以外のクラス同士の優先度は読み込み順・詳細度に依存します。
+no-layer版は既存サイトや WordPress テーマなど、カスケードを制御できない環境向けです。レイヤーの代わりに、Property Class は常に `!important` 付き、`u--trim` / `u--trimAll` / `u--cbox` はセレクタ二重化（`.u--trim.u--trim` = 0-2-0）で出力され、「Property Class > Utility Class > 単一クラス」の序列を再現します。`lism.config.js` の `defaultImportant: false`・`$default_important: 0`・`props` の個別 `important: 0` を指定しても `!important` は外れません。`b--` など上記以外のクラス同士の優先度は読み込み順・詳細度に依存します。
 
 ```js
 // 通常

package/dist/data/guides/naming.md

@@ -45,10 +45,14 @@
 
 | 形式 | 用途 | 例 |
 | --- | --- | --- |
-| `--{target}-{prop}` | 要素・クラスに対するプロパティ（`:root`で上書き可） | `--link-td`, `--headings-ff` |
+| `--{target}-{prop}` | 特定のセレクタを起点に、子要素へ設定するプロパティ | `--link-td`, `--headings-ff`, `--icon-size` |
 | `--{propName}` | クラス自身の主要機能を制御する変数。要素側で値が初期化され、`:root` からは初期値の定義ができないもの | `--sideW`, `--mainW` |
-| `--_{item}-{propName}` | `c--` の子要素プロパティ | `--_icon-size` |
-| `--_{varName}` | 状態管理用の内部変数 | `--_isHov`, `--_notHov` |
+| `--_{varName}` | 上書きを想定しない内部処理用の変数・状態判定用の変数 | `--_panelH`、`--_flipX`、`--_isHov` |
+
+`--{target}-{prop}`は、`:root`を起点にする場合も、`.b--*`や`.c--*`を起点にする場合も同じ形式です。`:root`以外を起点にする変数は、次のルールで外部からの影響を閉じます。
+
+- 起点のセレクタで必ず初期値をセットする（例: `.b--list { --icon-size: 1em; }`）。祖先や他のコンポーネントから同名の値を継承しないため。
+- 値を変えるときは`:root`ではなく、起点の要素にインラインstyleやpropsで指定する。
 
 ## クラスの命名規則
 

package/dist/data/guides/property-class/all-props.md

@@ -153,7 +153,7 @@
 | `pt` | `padding-top` | `-pt:5`, `-pt:10`, `-pt:20`, ... (SPACEトークン) | ✔ |
 | `pb` | `padding-bottom` | `-pb:5`, `-pb:10`, `-pb:20`, ... (SPACEトークン) | ✔ |
 
-SPACEトークンの全値（`5`〜`80`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
+SPACEトークンの全値（`5`〜`70`の離散値）は [tokens.md の余白 (space)](../tokens.md#余白-space) を参照。
 
 ### 余白 — Margin
 

package/dist/data/guides/property-class/hov.md

@@ -31,6 +31,7 @@ hover 時の挙動を制御する Property Class。`:hover` 擬似クラスで
 | `-hov:-bgc` | `background-color` | `var(--hov-bgc, var(--hov-bgc--default, color-mix(in srgb, var(--bgc, var(--base)), var(--neutral) 25%)))` |
 | `-hov:-o` | `opacity` | `var(--hov-o, var(--o--p))` |
 | `-hov:-bxsh` | `box-shadow` | `var(--hov-bxsh, var(--bxsh--50))` |
+| `-hov:-transform` | `transform` | `var(--hov-transform, translate(0, -4px))` |
 
 任意の値へ変化させたい場合は、`--hov-{prop}` 変数で値を指定する。
 

package/dist/data/guides/property-class.md

@@ -107,7 +107,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
 | `-hov:in:{preset}` | 親の `set--hov` を起点に子のスタイルを変化させる | 親に `set--hov` が必要 |
 
-**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
+**標準クラス:** `-hov:-c`, `-hov:-bgc`, `-hov:-bdc`, `-hov:-o`, `-hov:-bxsh`, `-hov:-transform`, `-hov:underline`, `-hov:in:hide`, `-hov:in:show`, `-hov:in:zoom`
 
 **`<Lism>` の `hov` prop:** 文字列指定（`hov="-c"` → `-hov:-c`。自動変換なし、カンマ区切りで複数可）とオブジェクト指定（`hov={{ c: 'red' }}` → `-hov:-c` + `--hov-c: var(--red)`。値 `true` でクラスのみ出力）が可能。
 

package/dist/data/guides/references/page-sections.md

@@ -1,6 +1,6 @@
 # ページ定番セクションの構成例
 
-ヒーロー・サイトヘッダー・フッターなど、ページの定番セクションを`Group`/`Wrapper`/`Stack`＋Propsで組む時の出発点です。ここにある構成をベースにし、実際の値は値・トークン照合（C5）を通してから確定します。
+ヒーロー・サイトヘッダー・フッターなど、ページの定番セクションを`Group`/`Wrapper`/`Stack`＋Propsで組む時の出発点です。ここにある構成をベースにし、実際の値は`tokens.md`のトークンと照合してから確定します。
 
 共通の考え方:
 
@@ -40,7 +40,7 @@ import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
 ```jsx
 import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
 
-<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
+<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '70']} hasGutter isContainer>
   <Wrapper contentSize="l">
     <Stack g="30" ai="center" ta="center">
       <Heading level="1" fz={['3xl', null, '5xl']}>キャッチコピー</Heading>
@@ -94,6 +94,6 @@ import { Group, Wrapper, Stack, Heading, Columns } from 'lism-css/astro';
 
 ## 使う前の確認
 
-- 使うPrimitive/Traitの詳細ファイル（`primitives/l--*.md`・`trait-class/*.md`）を、`SKILL.md`の資料確認トリガーに従って読む。
+- 使うPrimitive/Traitの詳細ファイル（`primitives/*.md`・`trait-class/*.md`）で、既定のスタイル・Props・CSS変数を確認する。
 - レスポンシブ値（配列・オブジェクト指定）を使う場合は、祖先の`isContainer`または`@media`運用の確認が必要（[`responsive.md`](../responsive.md)）。
-- ここに書いた値はすべて例。実際のデザイン値は`tokens.md`との照合（C5）とトークン差分表を通す。
+- ここに書いた値はすべて例。実際のデザイン値を`tokens.md`と照合し、使うトークンを決める。

package/dist/data/guides/set-class.md

@@ -191,7 +191,7 @@ Lism CSSでは、クラスを持つリスト（`ul` / `ol`）ではスタイル
 
 ## `set--s`
 
-余白トークン（`--s5`〜`--s80`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
+余白トークン（`--s5`〜`--s70`）を現在のフォントサイズ基準で再計算するためのクラスです。ButtonやBadgeなど、内部余白を要素自身のfont-sizeに追従させたい時に利用します。
 
 詳細なスケールと使い方は[tokens.mdの`set--s`ユーティリティ](./tokens.md#set--s-ユーティリティ)を参照してください。
 

package/dist/data/guides/tokens.md

@@ -30,7 +30,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
 | --- | --- | --- | --- |
-| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
+| 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `45`, `50`, `60`, `70` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング (hl) | `base`, `xs`, `s`, `l`, `xl` | `--hl--{key}` | `--hl--s` |
 | 行間比率 (lh) | `xs`, `s`, `m`, `l`, `xl` | `--lh--{key}` | `--lh--m` |
@@ -64,16 +64,16 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--s30` | `calc(var(--s-unit) * 3)` | ≒ 24px |
 | `--s35` | `calc(var(--s-unit) * 4)` | ≒ 32px |
 | `--s40` | `calc(var(--s-unit) * 5)` | ≒ 40px |
+| `--s45` | `calc(var(--s-unit) * 6.5)` | ≒ 52px |
 | `--s50` | `calc(var(--s-unit) * 8)` | ≒ 64px |
 | `--s60` | `calc(var(--s-unit) * 13)` | ≒ 104px |
 | `--s70` | `calc(var(--s-unit) * 21)` | ≒ 168px |
-| `--s80` | `calc(var(--s-unit) * 34)` | ≒ 272px |
 
-`--s40` 以降の主軸は係数 `1, 2, 3, 5, 8, 13, 21, 34`（フィボナッチ数列）に基づく。`--s5`〜`--s35` の前半部分は、主軸トークン間を補う中間値（4px / 12px / 20px / 32px 相当）として配置している。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
+10 刻みの主軸は係数 `1, 2, 3, 5, 8, 13, 21`（フィボナッチ数列）に基づき、タイポグラフィの縦のリズムを作る。5 刻み（`--s5`〜`--s45`）は主軸トークン間のちょうど中間値（4px / 12px / 20px / 32px / 52px 相当）で、縦のリズムに縛られない水平方向の gap / padding 用。中間値は `50` まで。`--s-unit` を上書きするとスケール全体を比例的に調整できる。`--fz--base` を流体値にしていて余白も連動させたい場合は、`:root` で `--s-unit: calc(var(--fz--base) * 0.5)` に上書きする。
 
 ### `set--s` ユーティリティ
 
-`set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s80` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
+`set--s` クラスを当てた要素のスコープ内では `--s-unit` が `0.5em` に切り替わり、`--s10`〜`--s70` が現在のフォントサイズ基準で再計算される。Button / Badge / インライン要素など、内部余白をフォントサイズに追従させたい部品で使う。
 
 ```html
 <!-- ボタンの padding が button 自身の font-size に追従する -->
@@ -139,11 +139,13 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 
 | CSS変数 | 値 | 説明 |
 | --- | --- | --- |
-| `--lts--base` | `normal` | 基本の文字間隔 |
-| `--lts--xs` | `-0.05em` | より狭い文字間隔 |
-| `--lts--s` | `-0.025em` | 狭めの文字間隔 |
-| `--lts--l` | `0.05em` | 広めの文字間隔 |
-| `--lts--xl` | `0.1em` | より広い文字間隔 |
+| `--lts--base` | `0em` | 基本の文字間隔。長さで指定（`normal` 不可） |
+| `--lts--xs` | `calc(var(--lts--base) - 0.05em)` | より狭い文字間隔 |
+| `--lts--s` | `calc(var(--lts--base) - 0.025em)` | 狭めの文字間隔 |
+| `--lts--l` | `calc(var(--lts--base) + 0.05em)` | 広めの文字間隔 |
+| `--lts--xl` | `calc(var(--lts--base) + 0.1em)` | より広い文字間隔 |
+
+`xs`〜`xl` は `--lts--base` からの相対値。`:root` で `--lts--base` を変えると全体が連動する（子孫要素での上書きは `xs`〜`xl` に伝わらない）。
 
 
 ## フォント (ff)

package/dist/data/guides/utility-class.md

@@ -29,8 +29,6 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 | `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
 | `u--trimAll` | 直下の子要素（`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く）にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
 | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
-| `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
-| `u--enclose` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
 | `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
 | `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
@@ -43,19 +41,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 
 <!-- u--trim: テキスト余白の詰め -->
 <p class="u--trim">テキスト...</p>
-
-<!-- u--divide: グリッド子要素間の区切り線 -->
-<div class="l--grid u--divide" style="--gtc: 1fr 1fr">
-  <div>A</div>
-  <div>B</div>
-</div>
 ```
 
 ```jsx
 // JSX での使用（className で指定）
 <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
 <Text className="u--trim">テキスト...</Text>
-<Grid className="u--divide" gtc="1fr 1fr">...</Grid>
 ```
 
 
@@ -64,6 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 コアには含まれないが、ドキュメントで紹介されている追加ユーティリティの例:
 
 - `u--inlineCenter`: 絵文字やインラインアイコンをテキスト中央に揃える
+- `u--divide` / `u--enclose`: Grid / Flex の子要素間の区切り線・セル枠を `gap` と子要素の `box-shadow` で描く。描画が `border` より粗く、並び方向が切り替わるレイアウトでは `bdw` のブレイクポイント切り替えを優先する
 
 これらは必要に応じて自分で CSS を追加して使用します。
 

package/dist/lib/markdown-utils.d.ts

@@ -1,5 +1,7 @@
 /** 指定見出しから同レベル以上の次の見出しまでを抽出する。headingは#の有無を問わない。 */
 export declare function extractSection(md: string, heading: string): string;
+/** 冒頭（frontmatter を除き、最初の `##` 見出しの手前まで）を返す。H1 は含む。 */
+export declare function extractPreamble(md: string): string;
 export declare function listHeadings(md: string): {
     level: number;
     text: string;

package/dist/lib/markdown-utils.js

@@ -28,6 +28,13 @@ export function extractSection(md, heading) {
     }
     return lines.slice(startIdx, endIdx).join('\n').trimEnd();
 }
+/** 冒頭（frontmatter を除き、最初の `##` 見出しの手前まで）を返す。H1 は含む。 */
+export function extractPreamble(md) {
+    const body = md.replace(/^---\n[\s\S]*?\n---\n/, '');
+    const lines = body.split('\n');
+    const endIdx = lines.findIndex((line) => headingLevel(line) >= 2);
+    return (endIdx === -1 ? lines : lines.slice(0, endIdx)).join('\n').trim();
+}
 export function listHeadings(md) {
     return md.split('\n').flatMap((line, i) => {
         const lv = headingLevel(line);

package/dist/lib/search.js

@@ -97,6 +97,9 @@ function getBasename(withoutExt) {
 function getNextTool(entry, guideTopics) {
     const withoutExt = entry.sourcePath.replace(/\.mdx$/, '');
     const basename = getBasename(withoutExt);
+    if (withoutExt === 'overview') {
+        return 'get_overview()';
+    }
     if (withoutExt === 'core-components/lism-props') {
         return 'get_props_system()';
     }

package/dist/tools/convert-css.js

@@ -124,7 +124,8 @@ function detectComponent(declarations) {
     const display = propMap.get('display');
     const flexDirection = propMap.get('flex-direction');
     const placeItems = propMap.get('place-items');
-    if (display === 'flex' && (flexDirection === 'column' || flexDirection === 'column-reverse')) {
+    // column-reverse は Stack にせず、Flex + fxd で方向を保つ。
+    if (display === 'flex' && flexDirection === 'column') {
         return {
             name: 'Stack',
             reason: 'display: flex + flex-direction: column → Stack (vertical flex)',
@@ -161,20 +162,25 @@ function findCategory(mappings, propName) {
     const found = mappings.find((m) => m.prop === propName);
     return found?.sectionName ?? 'unknown';
 }
+/** `property: value` を比較用に正規化する。 */
+function normalizeDeclaration(css) {
+    const [prop, ...rest] = css.split(':');
+    return `${prop.trim().toLowerCase()}: ${rest.join(':').trim().toLowerCase()}`;
+}
 /** 変換結果からJSX使用例を組み立てる。 */
 function buildExample(conversions, component) {
     const tagName = component?.name ?? 'Lism';
-    const implicitCssSet = new Set(component?.implicitCss.map((c) => c.split(':')[0].trim()) ?? []);
+    // プロパティ名だけで照合すると値違い（例: flex-direction: column-reverse）まで落ちるため、値込みで照合する。
+    const implicitCssSet = new Set(component?.implicitCss.map(normalizeDeclaration) ?? []);
     const props = [];
     const styles = [];
     for (const conv of conversions) {
-        const cssProp = conv.css.split(':')[0].trim();
         if (!conv.lismProp) {
             styles.push(conv.css);
             continue;
         }
         // コンポーネントが暗黙に持つCSSは重複出力しない。
-        if (implicitCssSet.has(cssProp))
+        if (implicitCssSet.has(normalizeDeclaration(conv.css)))
             continue;
         if (conv.suggestedValue != null) {
             props.push(`${conv.lismProp}='${conv.suggestedValue}'`);

package/dist/tools/get-component.js

@@ -9,7 +9,7 @@ function normalizeComponentKey(input) {
         .trim()
         .toLowerCase()
         .replace(/^<|>$/g, '')
-        .replace(/^(l--|is--|a--|c--)/, '');
+        .replace(/^(l--|is--|has--|a--|c--)/, '');
 }
 /** 入力が `<ComponentName>` 形式（React コンポーネントとしての問い合わせ）か判定する */
 function isAngleBracketNotation(input) {
@@ -18,7 +18,7 @@ function isAngleBracketNotation(input) {
 /** primitives/*.md の先頭行 `# l--flex / \`<Flex>\`` からクラス名とコンポーネント名を抽出する */
 function parsePrimitiveHeading(md) {
     const firstLine = md.split('\n', 1)[0] ?? '';
-    const match = firstLine.match(/^#\s+((?:l|is|a|c)--[A-Za-z0-9]+)(?:\s*\/\s*`<([A-Za-z0-9]+)>`)?/);
+    const match = firstLine.match(/^#\s+((?:l|is|has|a|c)--[A-Za-z0-9]+)(?:\s*\/\s*`<([A-Za-z0-9]+)>`)?/);
     if (!match)
         return null;
     return { className: match[1], componentName: match[2] };
@@ -63,7 +63,7 @@ export function registerGetComponent(server) {
             'Accepts multiple notations: "Flex", "<Flex>", "l--flex", "flex" all resolve to the same entry.\n' +
             'Do NOT use this for broad topic guides (use get_guide with "components-core" or "components-ui") or keyword search across all docs (use search_docs).\n' +
             'If the component is not found, suggestions will be provided — follow up with search_docs for a broader query.\n' +
-            'The response is pre-formatted Markdown. Output it verbatim. Do NOT summarize or omit code examples.',
+            'The response is Markdown reference material. Use it as context; when you write code, follow the code examples and class names exactly as documented rather than inventing variants.',
         inputSchema: {
             name: z.string().describe('Component name to look up (e.g. "Box", "Flex", "Accordion", "l--flex", "<Flex>").'),
             package: z

package/dist/tools/get-guide.js

@@ -4,7 +4,6 @@ import { markdownResponse, loadFailureError, READ_ONLY_ANNOTATIONS } from '../li
 // files に複数指定したトピックは結合して返す。
 // MCP クライアントは Markdown 内の相対リンクを辿れないため、分冊ファイルは本体に結合する。
 const GUIDE_TOPICS = {
-    overview: { files: ['SKILL.md'], label: 'Framework overview, packages, implementation rules' },
     tokens: { files: ['tokens.md'], label: 'Design tokens (spacing, colors, font sizes, etc.)' },
     'property-class': {
         files: ['property-class.md', 'property-class/all-props.md', 'property-class/bd.md', 'property-class/hov.md', 'property-class/max-sz.md'],
@@ -47,6 +46,10 @@ const GUIDE_TOPICS = {
         files: ['antipatterns-layout.md'],
         label: 'AI code-generation antipatterns (structure / layout / responsive): layout choice errors, responsive omissions, is-- misuse, naming mistakes',
     },
+    'page-sections': {
+        files: ['references/page-sections.md'],
+        label: 'Standard page section patterns (hero, site header, footer, etc.) built from Group + Wrapper / Stack / Cluster',
+    },
 };
 /** get_guide が受理するトピックキーの集合。search.ts の nextTool 判定で利用する。 */
 export const GUIDE_TOPIC_KEYS = new Set(Object.keys(GUIDE_TOPICS));
@@ -56,8 +59,8 @@ const TOPIC_DESCRIPTION = Object.entries(GUIDE_TOPICS)
 export function registerGetGuide(server) {
     server.registerTool('get_guide', {
         description: 'Get a detailed guide on a specific lism-css topic. Use this when you need comprehensive documentation on a broad topic rather than a specific component or prop.\n' +
-            'For individual component lookup, get_component is more direct. For individual prop lookup, use get_props_system.\n' +
-            'The response is the full guide as pre-formatted Markdown. Output it verbatim. Do NOT summarize or omit sections.\n' +
+            'For the framework overview, use get_overview. For individual component lookup, get_component is more direct. For individual prop lookup, use get_props_system.\n' +
+            'The response is the full guide as Markdown reference material. Use it as context; apply its rules and examples exactly as documented rather than paraphrasing them from memory.\n' +
             `\nAvailable topics:\n${TOPIC_DESCRIPTION}`,
         inputSchema: {
             topic: z.enum(Object.keys(GUIDE_TOPICS)).describe('The guide topic to retrieve.'),

package/dist/tools/get-overview.js

@@ -1,33 +1,53 @@
 import { loadMarkdown } from '../lib/load-markdown.js';
-import { extractSection } from '../lib/markdown-utils.js';
+import { extractPreamble, extractSection } from '../lib/markdown-utils.js';
 import { markdownResponse, loadFailureError, READ_ONLY_ANNOTATIONS } from '../lib/response.js';
 /**
- * SKILL.md を中核に、css-rules.md の Layer 構造セクションと
- * responsive.md のブレイクポイントセクションを付加して返す。
+ * SKILL.md から MCP でも意味を持つ節だけを抜き出す。
+ * 実装フロー・判定記号・C0–C8・実行レベル・提出前セルフチェックはスキル（ファイル参照と `.lism/` 保存）前提の作業手順なので含めない。
  */
+const SKILL_SECTIONS = ['最小ゲート', '資料確認トリガー', '目的別実装ガイド', 'クラス単位の詳細リファレンス'];
+/** 抜き出した節に残るガイドファイル名・判定記号を MCP ツールへ読み替えるための案内。 */
+const TOOL_ROUTING = `## Looking up details with this MCP server
+
+Guide file names mentioned below map to tools as follows:
+
+- \`primitives/*.md\`, \`trait-class/*.md\` → \`get_component\` with the class or component name (e.g. "l--stack", "Stack", "a--icon", "is--container", "has--transition")
+- \`tokens.md\` → \`get_tokens\`
+- \`property-class.md\`, \`property-class/*.md\` → \`get_props_system\` for a single prop, or \`get_guide\` topic "property-class" for the whole system
+- \`references/page-sections.md\` → \`get_guide\` topic "page-sections"
+- Any other \`*.md\` → \`get_guide\` with the topic of the same name (e.g. \`css-rules.md\` → "css-rules", \`antipatterns.md\` → "antipatterns")
+- Keyword search across all docs → \`search_docs\`; bulk CSS-to-Lism conversion → \`convert_css\`
+
+Markers used in the rules below: 🔁 = look up the referenced guide before writing that code; ⏸ = confirm with the user before implementing (hardcoded px values, rounding to a nearby token, changing public classes, etc.). Do not write code while a decision is still 🔁. A hardcoded value is allowed as a documented exception (✅例外) only when the "直書きしてよい例外" section of \`antipatterns.md\` (\`get_guide\` topic "antipatterns") lists that case; user instructions such as "reproduce it exactly" do not count.`;
 function buildOverviewMarkdown() {
     const skill = loadMarkdown('SKILL.md');
     const cssRules = loadMarkdown('css-rules.md');
     const responsive = loadMarkdown('responsive.md');
+    // 冒頭（タイトル・公式ドキュメント URL・対象バージョン）。
+    // スキルの作業手順（実行レベル判定→セルフチェック）の一文は落とし、スキル更新の案内は MCP 向けに読み替える。
+    const preamble = extractPreamble(skill)
+        .replace(/変更規模から実行レベルを判定し、[^。]*。/, '')
+        .replace('このスキルの更新', '`@lism-css/mcp`の更新');
+    const parts = [preamble, TOOL_ROUTING];
+    for (const heading of SKILL_SECTIONS) {
+        const section = extractSection(skill, heading);
+        if (section)
+            parts.push(section);
+    }
     const layerSection = extractSection(cssRules, 'CSS Layer 構造');
-    const bpSection = extractSection(responsive, 'ブレイクポイント');
-    const parts = [skill];
-    if (layerSection) {
-        parts.push('\n---\n');
+    if (layerSection)
         parts.push(layerSection);
-    }
-    if (bpSection) {
-        parts.push('\n---\n');
+    const bpSection = extractSection(responsive, 'ブレイクポイント');
+    if (bpSection)
         parts.push(bpSection);
-    }
-    return parts.join('\n');
+    return parts.join('\n\n---\n\n');
 }
 export function registerGetOverview(server) {
     server.registerTool('get_overview', {
-        description: 'Get an overview of the lism-css framework: architecture, design philosophy, packages, breakpoints, CSS layers, and implementation rules.\n' +
+        description: 'Get an overview of the lism-css framework: core rules (minimum gates), which reference to look up before writing what, primitive/component selection by goal, class inventory, CSS layers, and breakpoints.\n' +
             'Use this as your FIRST call when starting any lism-css task — it provides the foundational context needed to use other tools effectively.\n' +
             'Do NOT use this to look up specific components (use get_component), individual props (use get_props_system), or design tokens (use get_tokens).\n' +
-            'The response is pre-formatted Markdown. Output it verbatim to the user. Do NOT summarize or omit sections.',
+            'The response is Markdown reference material. Use it as context for your answer or implementation; do not paraphrase rules or invent class names, props, or token values that are not in it.',
         annotations: READ_ONLY_ANNOTATIONS,
     }, () => {
         try {

package/dist/tools/get-props-system.js

@@ -16,7 +16,7 @@ export function registerGetPropsSystem(server) {
         description: 'Get the lism-css Props system reference: how React/Astro props map to CSS classes and styles. Supports lookup by lism prop name (e.g. "p", "fz") OR by CSS property name (e.g. "padding", "font-size"). Omit the prop parameter to get the full reference.\n' +
             'Use this when you need to find a specific prop mapping, understand the Property Class system, or check what CSS property a lism prop corresponds to.\n' +
             'For bulk CSS-to-lism conversion, convert_css is more efficient. For component-specific documentation, use get_component.\n' +
-            'The response is pre-formatted Markdown. Output it verbatim. Do NOT summarize the prop tables.',
+            'The response is Markdown reference material. Use prop names and preset values exactly as listed in the tables; do not invent props or values that are not there.',
         inputSchema: {
             prop: z
                 .string()

package/dist/tools/get-tokens.js

@@ -5,7 +5,7 @@ export function registerGetTokens(server) {
         description: 'Get design tokens (colors, spacing, font sizes, shadows, etc.) used in lism-css. Returns the full token reference including CSS variable names and available values.\n' +
             'Use this when you need to check available token values, variable names, or design scales (e.g. "what spacing values exist?", "what are the font size tokens?").\n' +
             'For prop-to-CSS mappings, get_props_system is more suitable. For CSS conversion, use convert_css. Call get_overview first if you have not yet.\n' +
-            'The response is pre-formatted Markdown. Output it verbatim. Do NOT summarize or omit token values.',
+            'The response is Markdown reference material. Use token names and values exactly as listed; do not invent tokens or values that are not there.',
         annotations: READ_ONLY_ANNOTATIONS,
     }, () => {
         try {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.27.0",
+  "version": "0.28.1",
   "description": "MCP server for lism-css documentation and API reference.",
   "keywords": [
     "mcp",