@lism-css/mcp 0.22.0 → 0.24.0

package/README.ja.md

@@ -3,33 +3,33 @@
 [English](./README.md) | [日本語](./README.ja.md)
 
 [Lism CSS](https://lism-css.com) の [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) サーバーです。
-AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメント・API を正確に参照できるようにします。
+AIツール（Claude Code, Cursor 等）が、インストールされているこのパッケージのバージョンに対応したLism CSSのドキュメント・APIを正確に参照できるようにします。
 
 ## 利用可能なツール
 
 | ツール | 説明 |
 |--------|------|
-| `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、インストール方法、CSS Layers） |
-| `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）の一覧・カテゴリ絞り込み |
-| `get_props_system` | Props システム対応表 — React/Astro の props が CSS クラス・スタイルにどう変換されるか。CSS プロパティ名での逆引き（例: `padding` → `p`）や Property Class 記法（`-g:5` 等）にも対応 |
+| `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、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`）での絞り込みも可能 |
-| `get_guide` | 特定トピックの詳細ガイド（CSS ルール、レスポンシブ、ユーティリティクラス、プリミティブクラス、セットクラス、ベーススタイルなど） |
-| `search_docs` | ドキュメント全文検索（スコアリング付き）。カテゴリ絞り込みや CSS プロパティ名の自動展開に対応 |
-| `convert_css` | CSS コードを Lism CSS の props・コンポーネントに変換。既存 CSS から Lism CSS への移行に便利 |
+| `get_guide` | 特定トピックの詳細ガイド（CSSルール、レスポンシブ、ユーティリティクラス、プリミティブ / Traitクラス、セットクラス、ベーススタイル、命名規則、カスタマイズなど） |
+| `search_docs` | ドキュメント全文検索（スコアリング付き）。カテゴリ絞り込みやCSSプロパティ名の自動展開に対応 |
+| `convert_css` | CSSコードをLism CSSのprops・コンポーネントに変換。既存CSSからLism CSSへの移行に便利 |
 
 ## 聞けること（例）
 
-- 「Lism CSS の基本的なアーキテクチャを教えて」→ `get_overview`
-- 「spacing トークンの一覧を見せて」→ `get_tokens(category: "spacing")`
-- 「`p` や `fz` などの省略 props は何に対応している？」→ `get_props_system(prop: "p")`
+- 「Lism CSSの基本的なアーキテクチャを教えて」→ `get_overview`
+- 「spacingトークンの一覧を見せて」→ `get_tokens()`
+- 「`p` や `fz` などの省略propsは何に対応している？」→ `get_props_system(prop: "p")`
 - 「`-g:5` ってどういうクラス？」→ `get_props_system(prop: "-g:5")`
-- 「`fz` に対応する CSS プロパティは？」→ `get_props_system(prop: "font-size")`
-- 「Accordion コンポーネントの使い方は？」→ `get_component(name: "Accordion")`
-- 「UI コンポーネントだけ見たい」→ `get_component(name: "Accordion", package: "@lism-css/ui")`
-- 「CSS レイヤー構造を教えて」→ `get_guide(topic: "css-rules")`
+- 「`fz` に対応するCSSプロパティは？」→ `get_props_system(prop: "font-size")`
+- 「Accordionコンポーネントの使い方は？」→ `get_component(name: "Accordion")`
+- 「UIコンポーネントだけ見たい」→ `get_component(name: "Accordion", package: "@lism-css/ui")`
+- 「CSSレイヤー構造を教えて」→ `get_guide(topic: "css-rules")`
 - 「レスポンシブ対応の方法を教えて」→ `get_guide(topic: "responsive")`
 - 「ガイドだけ検索」→ `search_docs(query: "レスポンシブ", category: "guide")`
-- 「`display: flex; gap: 1rem;` を Lism に変換して」→ `convert_css(css: "display: flex; gap: 1rem;")`
+- 「`display: flex; gap: 1rem;` をLismに変換して」→ `convert_css(css: "display: flex; gap: 1rem;")`
 
 ## セットアップ
 

package/README.md

@@ -3,24 +3,24 @@
 [English](./README.md) | [日本語](./README.ja.md)
 
 An [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server for [Lism CSS](https://lism-css.com).
-Enables AI tools (Claude Code, Cursor, etc.) to accurately reference the latest Lism CSS documentation and API.
+Enables AI tools (Claude Code, Cursor, etc.) to accurately reference Lism CSS documentation and API, matching the version of this package that is installed.
 
 ## Available Tools
 
 | Tool | Description |
 |------|-------------|
-| `get_overview` | Framework overview (architecture, design philosophy, packages, breakpoints, installation guide, CSS Layers) |
-| `get_tokens` | List and filter design tokens (colors, spacing, font sizes, shadows, radii, etc.) |
+| `get_overview` | Framework overview (architecture, design philosophy, packages, breakpoints, CSS layers, implementation rules) |
+| `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`) |
-| `get_guide` | Detailed guide on a specific topic (CSS rules, responsive design, utility classes, module classes, set classes, base styles, etc.) |
+| `get_guide` | Detailed guide on a specific topic (CSS rules, responsive design, utility classes, primitive/trait classes, set classes, base styles, naming, customization, etc.) |
 | `search_docs` | Full-text documentation search with relevance scoring. Supports category filtering and CSS property name expansion |
 | `convert_css` | Convert CSS code to lism-css props and component suggestions. Useful for migrating existing CSS to Lism CSS |
 
 ## Example Queries
 
 - "What is the basic architecture of Lism CSS?" → `get_overview`
-- "Show me the spacing tokens" → `get_tokens(category: "spacing")`
+- "Show me the spacing tokens" → `get_tokens()`
 - "What do shorthand props like `p` or `fz` map to?" → `get_props_system(prop: "p")`
 - "What does the class `-g:5` mean?" → `get_props_system(prop: "-g:5")`
 - "What CSS property does `fz` correspond to?" → `get_props_system(prop: "font-size")`

package/dist/data/docs-index.json

@@ -6,7 +6,7 @@
     "category": "guide",
     "headings": ["Why Lism CSS?", "ゼロビルドでどんな環境でも使えます。", "Lism CSS のエコシステム", "JSXコンポーネントの使用例", "Inspirations"],
     "keywords": ["overview", "概要", "特徴", "レイアウトファースト", "ゼロビルド", "コンテナクエリ", "Every Layout", "framework"],
-    "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワーク。CSS設計不要でCDNから1行で導入可能。React/Astro向け専用コンポーネントも提供。エコシステムとして @lism-css/ui、@lism-css/cli、@lism-css/mcp も用意。"
+    "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワーク。CSS設計不要でCDNから1行で導入可能。React/Astro向け専用コンポーネントも提供。エコシステムとして @lism-css/ui、lism-cli、@lism-css/mcp も用意。"
   },
   {
     "sourcePath": "installation.mdx",
@@ -22,9 +22,16 @@
       "1. パッケージ(lism-css)のインストール",
       "2. CSS(main.css)の読み込み",
       "3. コンポーネントの読み込み",
+      "Next.js での導入",
+      "1. パッケージのインストール",
+      "2. `next.config.mjs` を `withLism()` でラップする",
+      "3. CSS とコンポーネントの読み込み",
+      "4. `lism.config.js` でカスタマイズする（任意）",
+      "5. 生成ファイルの扱い",
       "Lism UI の導入",
       "パッケージとして利用する",
       "CLI でプロジェクトにコピーする",
+      "未使用CSSの削除（パージ）",
       "AIツール連携"
     ],
     "keywords": [
@@ -40,9 +47,14 @@
       "template",
       "テンプレート",
       "create lism",
-      "lism-cli"
+      "lism-cli",
+      "Next.js",
+      "withLism",
+      "@lism-css/plugin",
+      "purge",
+      "パージ"
     ],
-    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。`create lism` コマンドでテンプレートからプロジェクトを作成できる（minimal-astro, blog-astro-*, lp-astro-* 等のテンプレートを提供）。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。UIコンポーネントは別パッケージ @lism-css/ui として提供（パッケージ利用または lism ui add コマンドでCLI追加も可能）。AIコーディングツール向けのSkills・MCPサーバーも提供。"
+    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。`create lism` コマンドでテンプレートからプロジェクトを作成できる（minimal-astro, minimal-vite, blog-astro-*, lp-astro-* 等のテンプレートを提供）。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。Vite/Astro では @lism-css/plugin（lismCss()）を登録して lism.config.js の反映・CSS 動的ビルド・型自動生成を有効化。Next.js（16以降）では `@lism-css/plugin/next` の `withLism()` でセットアップ。UIコンポーネントは別パッケージ @lism-css/ui として提供（パッケージ利用または lism-cli ui add コマンドでCLI追加も可能）。@lism-css/plugin の purge 機能で本番CSS軽量化にも対応。AIコーディングツール向けのSkills・MCPサーバーも提供。"
   },
   {
     "sourcePath": "css-methodology.mdx",
@@ -100,8 +112,8 @@
       "{prop} の省略ルール",
       "1文字プロパティ",
       "プロパティグループ",
-      "方向指定系の形式",
-      "方向指定系の例外: p, m のみ、ハイフンを省略",
+      "方向指定系の形式: 「グループ略称」 + `-` +「方向指定」",
+      "方向指定系の例外: `p`, `m` のみ、ハイフンを省略",
       "グループ略称の衝突禁止",
       "max- / min- プロパティ",
       "その他のプロパティ",
@@ -180,9 +192,9 @@
     "title": "ハーフレディング（line-height）",
     "description": "Lism CSS のハーフレディングによる line-height 管理の仕組みと、関連するデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["仕組み", "トークン", "lh クラス", "ハーフレディング管理のメリット"],
-    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "lh", "--hl"],
-    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -lh:{token} クラスの使い方を解説。"
+    "headings": ["仕組み", "トークン", "hl クラス", "lh（互換ショートカット）", "ハーフレディング管理のメリット"],
+    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "hl", "lh", "--hl"],
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -hl:{token} クラス（正規）・-lh:{token}（互換ショートカット）の使い方を解説。"
   },
   {
     "sourcePath": "tokens/spacing.mdx",
@@ -240,6 +252,7 @@
       "fz",
       "fw",
       "ff",
+      "hl",
       "lh",
       "d",
       "ta",
@@ -372,16 +385,40 @@
       "bdi",
       "bgs"
     ],
-    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。BPカラムは sm/md 対応が ✔、lg まで対応が ✔ lg、非対応が - で示される。"
+    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。BPカラムは sm/md/lg 対応が ✔、非対応が - で示される。"
   },
   {
     "sourcePath": "responsive.mdx",
     "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
-    "headings": ["レスポンシブ対応", "プロパティによってCSSの実装の中身が少し異なります", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
-    "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md", "lg", "alwaysVar"],
-    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm/md ブレークポイントの値を指定。CSSの実装パターンは「ブレークポイントごとに上書き」と「常に変数で参照（alwaysVar）」の2種類がある。ブレークポイントは sm(480px) / md(800px) / lg(1120px) の3段階。d・g・cols・グリッド系（gtc/gta/gtr/ga/gc/gr）は lg までサポート。"
+    "headings": [
+      "レスポンシブ対応",
+      "配列記法とオブジェクト記法",
+      "プロパティによってCSSの実装の中身が少し異なります",
+      "コンテナクエリ・メディアクエリ",
+      "ブレイクポイント",
+      "型補完で提示されるブレイクポイント"
+    ],
+    "keywords": [
+      "responsive",
+      "レスポンシブ",
+      "ブレークポイント",
+      "breakpoint",
+      "コンテナクエリ",
+      "container query",
+      "sm",
+      "md",
+      "lg",
+      "alwaysVar",
+      "xs",
+      "xl",
+      "配列記法",
+      "オブジェクト記法",
+      "BreakpointRegistry",
+      "lism-env.d.ts"
+    ],
+    "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40, 50]} のような配列記法（base→sm→md→lg→xl の順で固定）またはオブジェクト記法（{ base, sm, md, lg }）でブレークポイントの値を指定。xs は配列記法では指定できずオブジェクト記法のみ。CSSの実装パターンは「ブレークポイントごとに上書き」と「常に変数で参照（alwaysVar）」の2種類がある。ブレークポイントは sm(480px) / md(800px) / lg(1120px) の3段階で xs / xl は予約済みだがデフォルト無効。型補完は `@lism-css/plugin` 統合プラグイン使用時に lism-env.d.ts で自動生成、不使用時は BreakpointRegistry を手書き拡張。"
   },
   {
     "sourcePath": "reset-css.mdx",
@@ -395,27 +432,119 @@
   {
     "sourcePath": "customize.mdx",
     "title": "Customize",
-    "description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
+    "description": "Lism CSS のカスタマイズ方法の全体像。ビルドCSSの選択・lism.config.js・SCSS・CSS Purge のどれを使うべきかを目的別に案内します。",
+    "category": "guide",
+    "headings": ["カスタマイズの入口"],
+    "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS", "full.css", "isFullMode", "purge"],
+    "snippet": "Lism CSS のカスタマイズ方法の全体像。目的に応じて「CSSビルドの選択」「lism.config.js でのカスタマイズ」「SCSS でのカスタマイズ」「CSS Purge」の4つの入口を案内する概要ハブページ。"
+  },
+  {
+    "sourcePath": "customize/build.mdx",
+    "title": "CSSビルドの選択",
+    "description": "@layer のオン / オフや full.css への切り替えなど、読み込むビルド済みCSSを選ぶ方法を解説します。",
+    "category": "guide",
+    "headings": ["@layer をオフにする", "全部入りビルド（full.css）を使う", "isFullMode"],
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "build",
+      "ビルド",
+      "CSS",
+      "@layer",
+      "full.css",
+      "isFullMode",
+      "main.css",
+      "main_no_layer.css",
+      "full_no_layer.css"
+    ],
+    "snippet": "lism-css パッケージに同梱された複数のビルド済みCSSの使い分けを解説。main.css（標準）/ main_no_layer.css（@layerなし）/ full.css（全部入り、purge前提）/ full_no_layer.css から選択可能。full.css には main.css 非収録の全 Property Class ブレイクポイント対応クラスやスペーシング系トークンユーティリティを含む。isFullMode（lism.config.js で設定）でコンポーネント出力も full.css に合わせられる。@lism-css/plugin の統合プラグイン使用時は型も isFullMode に自動追従（lism-env.d.ts 生成）。"
+  },
+  {
+    "sourcePath": "customize/config.mdx",
+    "title": "lism.config.js でのカスタマイズ",
+    "description": "lism.config.js と @lism-css/plugin を使って、コンポーネントの props / tokens / traits やブレイクポイントを拡張する方法を解説します。",
     "category": "guide",
     "headings": [
-      "@layerをオフにする",
-      "SCSS でのカスタマイズ",
-      "上書き可能な変数",
-      "基本フォーマット",
-      "$props の個別カスタマイズ",
-      "SCSSのコンパイル処理について",
-      "lism.config.js でのカスタマイズ",
-      "Vite プラグインの登録（必須）",
+      "Vite / Astro プラグインの登録（必須）",
       "フォーマット",
+      "型サポート（LismConfig）",
       "カスタマイズ例",
+      "ブレイクポイント（xs / xl）の有効化",
       "追加スタイルを読み込ませる方法",
+      "Vite / Astro プラグイン使用時は自動反映される",
       "軽微な追加なら手書きで済ませる",
       "lism-css のCLIコマンドでCSSビルドする",
-      "手動で追加する方法",
       "SCSSファイルへの追加上書き"
     ],
-    "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
-    "snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "config",
+      "lism.config.js",
+      "lism.config.ts",
+      "lism.config.mjs",
+      "configPath",
+      "@lism-css/plugin",
+      "props",
+      "tokens",
+      "traits",
+      "breakpoints",
+      "ブレイクポイント",
+      "xs",
+      "xl",
+      "LismConfig",
+      "config-types",
+      "satisfies",
+      "型",
+      "型チェック",
+      "補完",
+      "TypeScript"
+    ],
+    "snippet": "lism.config.js（または lism.config.ts / lism.config.mjs）を使ったコンポーネントの挙動カスタマイズ方法。プラグインはプロジェクトルートから lism.config.ts → lism.config.mjs → lism.config.js の順で自動検出し、configPath オプションで別パスも指定可能。@lism-css/plugin の統合プラグイン登録（必須）から props / tokens / traits の追加・拡張、lism-css/config-types の LismConfig 型による設定ファイルの型チェック・補完（.ts は satisfies LismConfig、.js は JSDoc @type）、ブレイクポイント（xs / xl）の有効化、追加スタイルの読み込み方法（自動反映・CLI・手書き・SCSS）まで解説。"
+  },
+  {
+    "sourcePath": "customize/scss.mdx",
+    "title": "SCSS でのカスタマイズ",
+    "description": "lism-css の SCSS 変数（setting モジュールの $breakpoints / $props など）を上書きして、出力されるクラスやブレイクポイントを調整する方法を解説します。",
+    "category": "guide",
+    "headings": [
+      "上書き可能な変数",
+      "基本フォーマット",
+      "$props の個別カスタマイズ",
+      "ブレイクポイント（xs / xl）の有効化",
+      "SCSSのコンパイル処理について"
+    ],
+    "keywords": [
+      "customize",
+      "カスタマイズ",
+      "SCSS",
+      "setting",
+      "$props",
+      "$breakpoints",
+      "Property Class",
+      "出力クラス",
+      "ブレイクポイント",
+      "CSS出力"
+    ],
+    "snippet": "lism-css の setting モジュールの SCSS 変数を @use ... with (...) で上書きして、出力されるクラスやブレイクポイントを調整する方法。$breakpoints / $is_container_query / $default_important / $props の個別カスタマイズ（bp・important・utilities）、ブレイクポイント（xs / xl）の有効化などを解説。純 SCSS 構成向け。"
+  },
+  {
+    "sourcePath": "customize/purge.mdx",
+    "title": "CSS Purge",
+    "description": "ビルド時に未使用の Lism CSS クラスを削除し、本番 CSS を軽量化するパージプラグインのセットアップと使い方。",
+    "category": "guide",
+    "headings": [
+      "推奨セットアップ（統合プラグイン経由）",
+      "仕組み",
+      "単体プラグインを直接使う場合",
+      "full.css と組み合わせる",
+      "オプション",
+      "safelist",
+      "report",
+      "注意事項"
+    ],
+    "keywords": ["purge", "CSS purge", "パージ", "軽量化", "未使用", "full.css", "@lism-css/plugin", "lismPurge", "safelist", "build"],
+    "snippet": "ビルド成果物をスキャンして使用中の Lism CSS クラスだけを残すパージ機能。@lism-css/plugin の統合プラグインで purge: true を渡すだけで有効化可能。仕組み・単体プラグイン直接利用・full.css との併用・safelist / report オプション・注意事項を解説。"
   },
   {
     "sourcePath": "utility-class.mdx",
@@ -484,7 +613,7 @@
       "見出し（h1〜h6）",
       "リンク（a）",
       "インラインテキスト要素",
-      "引用・整形済みテキスト",
+      "引用",
       "その他のテキスト要素",
       "区切り",
       "リスト（ul, ol）",
@@ -522,76 +651,55 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.24.0 (2026.07.06)",
+      "AI スキル群の刷新 (#459)",
+      "`@lism-css/plugin` v.0.4.0 (2026.07.06)",
+      "`@lism-css/ui` v.0.24.0 (2026.07.06)",
+      "lism-css v.0.23.0 (2026.06.19)",
+      "ビルド/プラグイン層を `@lism-css/plugin` へ分離 (#439)",
+      "トークンを値付きの単一情報源に刷新 (#434)",
+      "ブレイクポイント / フルビルド",
+      "その他",
+      "`@lism-css/plugin` v.0.3.0 (2026.06.19)",
+      "`@lism-css/ui` v.0.23.0 (2026.06.19)",
+      "lism-css v.0.22.2 (2026.06.03)",
+      "`@lism-css/ui` v.0.22.2 (2026.06.03)",
+      "lism-css v.0.22.1 (2026.05.30)",
+      "`@lism-css/ui` v.0.22.1 (2026.06.02)",
       "lism-css v.0.22.0 (2026.05.28)",
       "AutoColumns のデフォルトモード変更 (#408)",
       "ユーティリティ・トークン名の整理",
       "フォームコントロールのスタイル調整",
       "その他",
-      "@lism-css/ui v.0.22.0 (2026.05.28)",
+      "`@lism-css/ui` v.0.22.0 (2026.05.28)",
       "lism-css v.0.21.0 (2026.05.26)",
       "set クラスの命名変更 (#404)",
       "contentSize Prop と set--bleed の追加 (#405)",
-      "@lism-css/ui v.0.21.0 (2026.05.26)",
+      "その他",
+      "`@lism-css/ui` v.0.21.0 (2026.05.26)",
       "lism-css v.0.20.0 (2026.05.20)",
       "方向系 Property Class の命名整理 (#378)",
       "ブレークポイント対応プロパティの整理 (#394)",
       "hover 色のデフォルト変更 (#381)",
-      "@lism-css/ui v.0.20.0 (2026.05.20)",
-      "lism-css v.0.18.0 (2026.05.17)",
-      "--sz--* トークンを px 統一・80px 刻みで再設計 (#364)",
-      "spacing tokens 拡充と set--var:s の新設 (#377)",
-      "lism-css v.0.17.0 (2026.05.09)",
-      "-max-sz:bleed の新設 (#360)",
-      "--REM 廃止と --fz--base の簡素化",
-      "a タグのリンク装飾スタイル廃止",
-      "Bug Fixes",
-      "@lism-css/ui v.0.17.0 (2026.05.09)",
-      "lism-css v.0.16.1 (2026.04.29)",
-      "lism-css v.0.16.0 (2026.04.21)",
-      "u--trimChildren のリネームと除外方式の整理 (#324, #326)",
-      "u--collapseGrid のリネームと u--divide の追加 (#323)",
-      "opacity トークンの命名変更 (#316)",
-      "Layout Primitive の命名整理 (#319)",
-      "@lism-css/ui v.0.16.0 (2026.04.21)",
-      "lism-css v.0.15.0 (2026.04.21)",
-      "CSSレイヤー構造の再編 (#304)",
-      "set-- クラスの刷新 (#304)",
-      "-hov: クラスの命名整理 (#300)",
-      "シャドウトークンの刷新 (#311)",
-      "@lism-css/ui v.0.15.0 (2026.04.21)",
-      "lism-css v.0.14.0 (2026.04.17)",
-      "Props システムの整理",
-      "Property Class のリネーム",
-      "Trait Class / トークンの整理",
-      "@lism-css/ui v.0.14.0 (2026.04.17)",
-      "lism-css v.0.13.1 (2026.04.15)",
-      "@lism-css/ui v.0.13.1 (2026.04.15)",
-      "lism-css v.0.13.0 (2026.04.14)",
-      "Module → Primitive 概念リネーム",
-      "State → Trait 識別子の統一",
-      "set / util props の統一",
-      "Trait Class / 命名整理",
-      "@lism-css/ui v.0.13.0 (2026.04.14)",
-      "@lism-css/ui v.0.12.0 (2026.04.10)",
-      "@lism-css/ui v.0.11.0 (2026.04.05)",
-      "v.0.12.0 (2026.04.10)",
-      "v.0.11.0 (2026.04.05)",
-      "v.0.10.5 (2026.04.05)",
-      "v.0.10.4 (2026.04.04)",
-      "v.0.10.3 (2026.04.04)",
-      "v.0.10.2 (2026.04.04)",
-      "v.0.10.1 (2026.04.03)",
-      "lism-css v.0.9.4 (2026.03.31)",
-      "@lism-css/ui v.0.9.3 (2026.03.30)",
-      "v.0.9.2 (2026.03.18)",
-      "v.0.9.1 (2026.03.18)",
-      "v.0.9.0 (2026.03.17)",
-      "v.0.8.3",
-      "v.0.8.2",
-      "v.0.8 (大幅な変更)"
+      "その他",
+      "`@lism-css/ui` v.0.20.0 (2026.05.20)",
+      "v0.18.0 以前"
+    ],
+    "keywords": [
+      "changelog",
+      "変更履歴",
+      "更新",
+      "バージョン",
+      "u--cells",
+      "u--enclose",
+      "rename",
+      "リネーム",
+      "migration",
+      "移行",
+      "LismConfig",
+      "AIスキル"
     ],
-    "keywords": ["changelog", "変更履歴", "更新", "バージョン", "u--cells", "u--enclose", "rename", "リネーム", "migration", "移行"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.22.0 (2026.05.28) では AutoColumns のデフォルトを auto-fit から auto-fill へ変更、ユーティリティ・トークン名の整理（u--cells → u--enclose, テーブルセル変数を --cells-p に整理, --gutter-size を --gutter/--gutter--base 構造へ整理）、フォームコントロールのスタイル調整（border-radius 削除・padding を em 単位に変更）。v.0.21.0 では set クラスの命名変更（set--var:xxx → set--xxx、#404）、contentSize Prop と set--bleed の追加（#405）。v.0.20.0 の破壊的変更として方向系 Property Class の命名整理（px-s/px-e → ps/pe、bd-x-s → bd-s 等、#378）、bp デフォルトサポート見直し（pl/pr/pt/pb 等廃止、d/g/cols/グリッド系は lg まで拡張、#394）、-hov:-bgc のデフォルト色変更と --neutral トークン追加（#381）など。v.0.18.0 では --sz--* トークンの px 統一・80px 刻みでの再設計（#364）、spacing tokens 拡充と set--s 新設（s25/s35 追加、#377）。v.0.17.0 では -max-sz:container 廃止と -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）などがある。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.24.0 (2026.07.06) では config の値（utils/presets/token）から型を導出しコンポーネント補完に反映（#505）、lism.config 執筆用の LismConfig 型追加（#472）、body に display: flow-root 追加、pre のデフォルトスタイル変更（#477）。AIスキル群を刷新し lism-css-refactor を新設（#459）。@lism-css/plugin v.0.4.0 では lism.config.ts 読み込み対応（#461）、purge の Astro SSR/hybrid 対応強化（#495, #503）。v.0.23.0 (2026.06.19) では破壊的変更としてビルド/プラグイン層を新パッケージ @lism-css/plugin へ分離（lism-css/vite 等のエクスポートを廃止）、tokens を「キー: 値」のフラットマップに刷新（tokenValues チャンネル廃止・c を color に改名）、xs ブレイクポイントのオプトイン対応・full.css / isFullMode の追加（#428, #423, #425）、標準 BP デフォルトを md → lg に拡大など。@lism-css/ui v.0.23.0 では Badge/Button/Chat の lh を hl へ移行。v.0.22.2 (2026.06.03) では --green 彩度微調整・alert アイコン変更、@lism-css/ui で Alert/Callout に tip プリセット追加・プリセット整理。v.0.22.1 (2026.05.30) では ':' 単体を true 相当のフラグとして対応・0.22.0 パッケージング修正、@lism-css/ui で NavMenu.Link にデフォルト hov 付与・Accordion.Item に isOpen prop 追加・Modal スクロールバーがたつき防止。v.0.22.0 (2026.05.28) では AutoColumns のデフォルトを auto-fit から auto-fill へ変更、ユーティリティ・トークン名の整理（u--cells → u--enclose, --cells-p に整理, --gutter/--gutter--base 構造へ整理）、フォームコントロールのスタイル調整（border-radius 削除・padding を em 単位に変更）。v.0.21.0 では set クラスの命名変更（set--var:xxx → set--xxx、#404）、contentSize Prop と set--bleed の追加（#405）。v.0.20.0 の破壊的変更として方向系 Property Class の命名整理（ps/pe/pbs/pbe、bd-s/bd-e/bd-bs/bd-be 等、#378）、bp デフォルトサポート見直し（pl/pr/pt/pb 等廃止、d/g/cols/グリッド系は lg まで拡張、#394）、-hov:-bgc のデフォルト色変更と --neutral トークン追加（#381）など。v0.18.0 以前は主要な変更点のみ抜粋掲載（--sz--* トークンの px 統一、-max-sz:bleed 新設、ユーティリティ・Layout Primitive のリネーム、CSSレイヤー構造の再編など）。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
@@ -641,7 +749,7 @@
   {
     "sourcePath": "property-class/max-sz.mdx",
     "title": "-max-sz",
-    "description": "コンテンツの最大幅を制御する -max-sz プロパティクラスの使い方について解説します。",
+    "description": "コンテンツの最大幅を制御する -max-sz クラスの使い方について解説します。",
     "category": "property-class",
     "headings": ["full & bleed", "DEMOページ"],
     "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "bleed"],
@@ -672,6 +780,7 @@
       "CSS Props",
       "コード例",
       ": でクラスとして強制的に出力",
+      ": 単体を指定した場合",
       "レスポンシブ指定",
       "exProps",
       "クラスの出力順"
@@ -1164,10 +1273,23 @@
       "ソースコード",
       "Examples",
       "見出しタグを変更する",
-      "アニメーション時間を変更し、複数同時展開を許可する"
+      "アニメーション時間を変更する",
+      "最初の一つを開いた状態にする",
+      "複数同時展開を許可する"
+    ],
+    "keywords": [
+      "Accordion",
+      "アコーディオン",
+      "開閉",
+      "toggle",
+      "FAQ",
+      "折りたたみ",
+      "collapsible",
+      "isOpen",
+      "allowMultiple",
+      "hidden until-found"
     ],
-    "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
-    "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
+    "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。div/button ベースで JS により開閉アニメーションを制御。hidden=\"until-found\" によりブラウザのページ内検索対応。isOpen で初期展開、allowMultiple で複数同時展開が可能。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Modal.mdx",
@@ -1244,22 +1366,24 @@
       "Props",
       "ソースコード",
       "Examples",
-      "layout を切り替える",
-      "type一覧",
       "カラーとアイコンを指定する例",
+      "`l--withSide` を使ってレスポンシブ対応",
+      "ボタン付き + ブレイクポイントによるレスポンシブ対応",
+      "`l--withSide` を使ったレスポンシブ対応",
+      "type一覧",
       "Only lism-css"
     ],
-    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知"],
-    "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
+    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知", "type", "keycolor", "icon", "withSide", "layout"],
+    "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。type prop（alert/point/warning/check/info/help/note/tip）でアイコンとキーカラーをまとめて設定。layout=\"withSide\" でコンテナ幅が狭い時に縦並び対応。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Callout.mdx",
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "icon、keycolorを指定", "Only lism-css"],
-    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
-    "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
+    "headings": ["How to use", "Import", "Props", "ソースコード", "Examples", "type一覧", "`icon`、`keycolor`を指定", "Only lism-css"],
+    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight", "type", "keycolor", "icon", "title"],
+    "snippet": "記事の中で重要なポイントを示すためのコンポーネント。type prop（info/alert/warning/point/check/help/note/tip）でアイコンとキーカラーをまとめて設定。title でタイトルテキストを表示。@lism-css/uiパッケージで提供。"
   },
   {
     "sourcePath": "ui/Button.mdx",
@@ -1334,7 +1458,7 @@
       "Examples",
       "シンプルな例",
       "アイコンやバッジを表示する例",
-      "各リストのpaddingを一括で調整する方法",
+      "各リストの共通スタイルを一括で指定する方法",
       "メニューのネスト",
       "ネストしたメニューをアコーディオンで展開する",
       "横並びメニューでホバー時に子メニューを表示する例"
@@ -1686,8 +1810,20 @@
     "description": "プロジェクトにSKILL.mdファイルを配置して、AIエージェントに Lism CSS の設計ルール・Props・トークン・命名規則を伝える方法。",
     "category": "guide",
     "headings": ["セットアップ", "skills.sh 経由", "gh コマンド経由", "lism-cli 経由", "配置先の対応表", "アップデート"],
-    "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
-    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
+    "keywords": [
+      "skills",
+      "SKILL.md",
+      "AIエージェント",
+      "設計ルール",
+      "Claude",
+      "コーディング支援",
+      "lism-css-guide",
+      "lism-css-refactor",
+      "skills.sh",
+      "gh skill install",
+      "lism-cli skill"
+    ],
+    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。配布スキルは新規実装向けの lism-css-guide と既存コードのリファクタ用 lism-css-refactor の2つ。skills.sh / gh skill install / lism-cli skill add の3通りの導入方法と、lism-cli skill check によるローカル差分確認・アップデート方法を解説。"
   },
   {
     "sourcePath": "trait-class.mdx",