@lism-css/mcp 0.11.0 → 0.12.0

package/README.ja.md

@@ -11,8 +11,9 @@ AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメン
 |--------|------|
 | `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、インストール方法、CSS Layers） |
 | `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）の一覧・カテゴリ絞り込み |
-| `get_props_system` | Props システム対応表 — React/Astro の props が CSS クラス・スタイルにどう変換されるか。CSS プロパティ名での逆引き（例: `padding` → `p`）や Prop Class 記法（`-g:5` 等）にも対応 |
+| `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 への移行に便利 |
 
@@ -25,7 +26,8 @@ AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメン
 - 「`fz` に対応する CSS プロパティは？」→ `get_props_system(prop: "font-size")`
 - 「Accordion コンポーネントの使い方は？」→ `get_component(name: "Accordion")`
 - 「UI コンポーネントだけ見たい」→ `get_component(name: "Accordion", package: "@lism-css/ui")`
-- 「レスポンシブ対応の方法を調べて」→ `search_docs(query: "レスポンシブ")`
+- 「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;")`
 

package/README.md

@@ -11,8 +11,9 @@ Enables AI tools (Claude Code, Cursor, etc.) to accurately reference the latest
 |------|-------------|
 | `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_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 Prop Class notation (e.g. `-g:5`) |
+| `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.) |
 | `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 |
 
@@ -25,7 +26,8 @@ Enables AI tools (Claude Code, Cursor, etc.) to accurately reference the latest
 - "What CSS property does `fz` correspond to?" → `get_props_system(prop: "font-size")`
 - "How do I use the Accordion component?" → `get_component(name: "Accordion")`
 - "Show me only UI components" → `get_component(name: "Accordion", package: "@lism-css/ui")`
-- "How does responsive design work?" → `search_docs(query: "responsive")`
+- "How does the CSS layer structure work?" → `get_guide(topic: "css-rules")`
+- "How does responsive design work?" → `get_guide(topic: "responsive")`
 - "Search only guide docs" → `search_docs(query: "responsive", category: "guide")`
 - "Convert `display: flex; gap: 1rem;` to Lism" → `convert_css(css: "display: flex; gap: 1rem;")`
 

package/dist/data/docs-index.json

@@ -31,28 +31,64 @@
       "命名規則",
       "naming",
       "BEM",
-      "Prop Class",
+      "Property Class",
       "Module Class",
       "Set Class",
       "Utility Class",
       "省略",
       "Emmet"
     ],
-    "snippet": "CSSの階層構造を明確に定義。@layer lism-reset → lism-base → lism-modules → lism-utility の順。Module Class (.l--name, .a--name 等)、Prop Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
+    "snippet": "CSSの階層構造を明確に定義。@layer lism-reset → lism-base → lism-modules → lism-custom → lism-utility の順。lism-custom はユーザー独自プレフィックスのクラス用レイヤー。Module Class (.l--name, .a--name 等)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
   },
   {
     "sourcePath": "tokens.mdx",
     "title": "Design Tokens",
-    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
+    "description": "Lism CSS で定義されているデザイントークンの概要ページ。RADIUS, SHADOW, OPACITY, SIZE トークンと、カラー・タイポグラフィ・スペーシングの各サブページへのリンク。",
     "category": "guide",
-    "headings": ["COLOR", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
-    "keywords": ["token", "トークン", "design token", "カラー", "スペーシング", "spacing", "color", "font-size", "shadow", "radius"],
-    "snippet": "タイポグラフィ、余白、カラー、シャドウなどの主要なプロパティに対してデザイントークンを定義。CSS変数で管理し、一貫性のあるデザインを実現。"
+    "headings": ["RADIUS", "SHADOW", "OPACITY", "SIZE"],
+    "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size"],
+    "snippet": "デザイントークンの概要。RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページで詳細を解説。"
   },
   {
-    "sourcePath": "prop-class.mdx",
-    "title": "Prop Class",
-    "description": "CSSプロパティに紐づいた Prop Class の一覧とその使い方について解説します。",
+    "sourcePath": "tokens/colors.mdx",
+    "title": "カラートークン",
+    "description": "Lism CSS で定義されているセマンティックカラーとパレットカラーのトークン、カスタマイズ方法について解説します。",
+    "category": "guide",
+    "headings": ["COLOR", "PALETTE", "パレットカラーの活用", "カスタマイズ例"],
+    "keywords": ["color", "カラー", "palette", "パレット", "OKLCH", "brand", "accent", "dark mode", "ダークモード", "u--cbox", "keycolor"],
+    "snippet": "セマンティックカラー（base, text, brand, accent等）とOKLCHベースのパレットカラー（red, blue, green等）を定義。u--cboxユーティリティでの活用例、ダークモード対応などのカスタマイズ方法を紹介。"
+  },
+  {
+    "sourcePath": "tokens/typography.mdx",
+    "title": "タイポグラフィトークン",
+    "description": "Lism CSS で使用するフォントファミリー、フォントサイズ、行間などのタイポグラフィ関連のデザイントークンについて解説します。",
+    "category": "guide",
+    "headings": ["FF: font-family", "FW: font-weight", "FZ: font-size", "LTS: letter-spacing"],
+    "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "font-size"],
+    "snippet": "フォントサイズ（調和数列ベース）、文字間隔などのタイポグラフィ設計を解説。フォントサイズのスケーリング規則を紹介。"
+  },
+  {
+    "sourcePath": "tokens/half-leading.mdx",
+    "title": "ハーフレディング（line-height）",
+    "description": "Lism CSS のハーフレディングによる line-height 管理の仕組みと、関連するデザイントークンについて解説します。",
+    "category": "guide",
+    "headings": ["トークン", "ハーフレディング管理のメリット"],
+    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "lh", "--hl"],
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。--hl変数によりフォントサイズに依存しない一定の行間を実現。トークン（xs/s/base/l）とlhクラスの使い方を解説。"
+  },
+  {
+    "sourcePath": "tokens/spacing.mdx",
+    "title": "スペーシングトークン",
+    "description": "Lism CSS のフィボナッチ数列に基づくスペーシングトークンと、対応するpropertyクラスについて解説します。",
+    "category": "guide",
+    "headings": ["SPACE: 余白のスケーリング", "対応する Property Class"],
+    "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class"],
+    "snippet": "フィボナッチ数列に基づいた余白スケーリング（5〜80）を定義。p, px, py, m, mx, my, g等のpropertyクラスでフルサポート。方向別プロパティはBP対応のみなど、対応範囲を詳細に解説。"
+  },
+  {
+    "sourcePath": "property-class.mdx",
+    "title": "Property Class",
+    "description": "CSSプロパティに紐づいた Property Class の一覧とその使い方について解説します。",
     "category": "props",
     "headings": [
       "このページの表の見方",
@@ -67,7 +103,7 @@
       "Other CSS"
     ],
     "keywords": [
-      "prop class",
+      "property class",
       "utility",
       "ユーティリティ",
       "クラス",
@@ -129,15 +165,6 @@
     "keywords": ["responsive", "レスポンシブ", "ブレークポイント", "breakpoint", "コンテナクエリ", "container query", "sm", "md"],
     "snippet": "CSS変数とクラスを組み合わせたレスポンシブ対応。コンテナクエリをデフォルトで採用。p={[20, 30, 40]} のような配列記法で sm, md ブレークポイントの値を指定。"
   },
-  {
-    "sourcePath": "typography.mdx",
-    "title": "Typography & Spacing",
-    "description": "Lism CSS で使用するフォントやスペーシングに関するデザイントークンについて解説します。",
-    "category": "guide",
-    "headings": ["Typography", "`SPACE`: 余白のスケーリング"],
-    "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "spacing", "余白", "スペーシング", "フィボナッチ"],
-    "snippet": "フォントサイズ、行間、文字間隔などのタイポグラフィ設計と、フィボナッチ数列に基づいた余白のスケーリングについて解説。ハーフレディングによるline-height管理の仕組みを紹介。"
-  },
   {
     "sourcePath": "reset-css.mdx",
     "title": "Reset CSS",
@@ -324,7 +351,7 @@
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
     "headings": ["Props", "Import", "使用例"],
-    "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum"],
+    "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
   {
@@ -360,7 +387,19 @@
     "description": "Lism CSS の Stack モジュールについて解説します。複数の要素を Flex で縦方向に配置するレイアウトモジュールです。",
     "category": "modules",
     "headings": ["CSS", "Import", "Props", "Usage"],
-    "keywords": ["Stack", "スタック", "縦並び", "vertical", "l--stack", "display", "display: flex", "flex-direction", "flex-direction: column"],
+    "keywords": [
+      "Stack",
+      "スタック",
+      "縦並び",
+      "vertical",
+      "l--stack",
+      "display",
+      "display: flex",
+      "flex-direction",
+      "flex-direction: column",
+      "縦積み",
+      "column direction"
+    ],
     "snippet": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。ai='center'で内在的な中央寄せも可能。"
   },
   {
@@ -379,9 +418,34 @@
       "display",
       "display: grid",
       "grid-template-columns",
-      "grid-template-rows"
+      "grid-template-rows",
+      "格子"
+    ],
+    "snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridもサポート。均等タイルは l--tileGrid を参照。"
+  },
+  {
+    "sourcePath": "modules/l--tilegrid.mdx",
+    "title": "TileGrid / l--tileGrid",
+    "description": "Lism CSS の TileGrid モジュールについて解説します。均等な行列グリッド（タイル型レイアウト）を構成するためのレイアウトモジュールです。",
+    "category": "modules",
+    "headings": ["Props", "CSS", "Import", "Usage"],
+    "keywords": [
+      "TileGrid",
+      "タイル",
+      "グリッド",
+      "grid",
+      "l--tileGrid",
+      "display",
+      "display: grid",
+      "grid-template",
+      "cols",
+      "rows",
+      "1fr",
+      "repeat",
+      "tile",
+      "均等"
     ],
-    "snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridや-gt:repeatもサポート。"
+    "snippet": "colsとrowsで均等なタイル型グリッドレイアウトを構成。grid-template: repeat(rows, 1fr) / repeat(cols, 1fr) のGrid。ブレイクポイント指定も可能。"
   },
   {
     "sourcePath": "modules/l--center.mdx",
@@ -389,7 +453,7 @@
     "description": "Lism CSS の Center モジュールについて解説します。要素を上下左右中央揃えで配置するためのレイアウトモジュールです。",
     "category": "modules",
     "headings": ["CSS", "主なProps", "Import", "Usage"],
-    "keywords": ["Center", "中央揃え", "center", "layout", "l--center", "display", "display: grid", "place-items", "place-items: center"],
+    "keywords": ["Center", "中央揃え", "center", "layout", "l--center", "display", "display: grid", "place-items", "place-items: center", "中央配置"],
     "snippet": "子要素を中央揃えにするレイアウト。place-items: center の Grid。高さがあれば上下左右中央揃え。"
   },
   {
@@ -398,7 +462,7 @@
     "description": "Lism CSS の Cluster モジュールについて解説します。要素を横方向に並べて自動で折り返すレイアウトモジュールです。",
     "category": "modules",
     "headings": ["CSS", "Import", "Usage"],
-    "keywords": ["Cluster", "クラスター", "横並び", "wrap", "l--cluster", "タグ", "display", "display: flex", "flex-wrap"],
+    "keywords": ["Cluster", "クラスター", "横並び", "wrap", "l--cluster", "タグ", "display", "display: flex", "flex-wrap", "badge list"],
     "snippet": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。"
   },
   {
@@ -407,7 +471,19 @@
     "description": "Lism CSS の Columns モジュールについて解説します。ブレイクポイントごとに列数を指定できるカラムレイアウトです。",
     "category": "modules",
     "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["Columns", "カラム", "列", "multi-column", "l--columns", "subgrid", "display", "display: grid", "grid-template-columns"],
+    "keywords": [
+      "Columns",
+      "カラム",
+      "列",
+      "multi-column",
+      "l--columns",
+      "subgrid",
+      "display",
+      "display: grid",
+      "grid-template-columns",
+      "等分割",
+      "multi column"
+    ],
     "snippet": "均等幅のカラムレイアウト。cols で列数を指定する Grid。レスポンシブ対応可能。subgridも活用可能。"
   },
   {
@@ -416,7 +492,7 @@
     "description": "Lism CSS の Flow モジュールについて解説します。子要素間の余白を自動管理する flow-root レイアウトモジュールです。",
     "category": "modules",
     "headings": ["対応コンポーネント", "Usage", "l--flow を入れ子にする時の注意点"],
-    "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root"],
+    "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root", "article body", "縦方向余白"],
     "snippet": "コンテンツフロー用のレイアウト。display: flow-root で子要素間の余白を管理。見出しタグは余白が2倍。is--skipFlowで余白打ち消しも可能。"
   },
   {
@@ -425,7 +501,20 @@
     "description": "Lism CSS の FluidCols モジュールについて解説します。カラム幅に応じて自動で折り返すブレイクポイント非依存の段組みレイアウトです。",
     "category": "modules",
     "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["FluidCols", "流動カラム", "auto-fill", "fluid", "l--fluidCols", "display", "display: grid"],
+    "keywords": [
+      "FluidCols",
+      "流動カラム",
+      "auto-fill",
+      "fluid",
+      "l--fluidCols",
+      "display",
+      "display: grid",
+      "auto-wrap",
+      "自動折り返し",
+      "responsive grid",
+      "メディアクエリなし",
+      "折り返しグリッド"
+    ],
     "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
   },
   {
@@ -434,7 +523,7 @@
     "description": "Lism CSS の Frame モジュールについて解説します。直下のメディア要素を自身のサイズに合わせて表示するレイアウトモジュールです。",
     "category": "modules",
     "headings": ["対応コンポーネント", "Usage"],
-    "keywords": ["Frame", "フレーム", "aspect-ratio", "アスペクト比", "l--frame", "画像", "video", "iframe"],
+    "keywords": ["Frame", "フレーム", "aspect-ratio", "アスペクト比", "l--frame", "画像", "video", "iframe", "比率維持"],
     "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズに合わせて表示するレイアウトモジュール。arでアスペクト比を指定。"
   },
   {
@@ -443,7 +532,7 @@
     "description": "Lism CSS の SwitchCols モジュールについて解説します。メディアクエリ不要で複数列と1列を自動切り替えするレイアウトです。",
     "category": "modules",
     "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols"],
+    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols", "responsive columns", "メディアクエリなし"],
     "snippet": "複数列以上と1列への切り替えをメディアクエリを使わずに実装するレイアウト。breakSizeで切り替えポイントを指定。"
   },
   {
@@ -452,8 +541,8 @@
     "description": "Lism CSS の SideMain モジュールについて解説します。メディアクエリ不要でサイドとメインの2カラムレイアウトを構築します。",
     "category": "modules",
     "headings": ["基本構造", "CSS", "Import", "Props", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
-    "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side"],
-    "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。fxd='row-r'で反転も可能。"
+    "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side", "two column"],
+    "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。fxd='row-reverse'で反転も可能。"
   },
   {
     "sourcePath": "modules/is--container.mdx",
@@ -461,7 +550,7 @@
     "description": "Lism CSS の Container モジュールについて解説します。container-type を設定しコンテナクエリを有効にするコンポーネントです。",
     "category": "modules",
     "headings": ["Props", "Import", "Usage"],
-    "keywords": ["Container", "コンテナ", "container query", "is--container", "isContainer"],
+    "keywords": ["Container", "コンテナ", "container query", "is--container", "isContainer", "レスポンシブ基準"],
     "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
   },
   {
@@ -470,7 +559,19 @@
     "description": "Lism CSS の Layer モジュールについて解説します。親要素に重ねて配置するオーバーレイ用のコンポーネントです。",
     "category": "modules",
     "headings": ["Import", "Usage"],
-    "keywords": ["Layer", "レイヤー", "overlay", "オーバーレイ", "is--layer", "absolute", "backdrop-filter", "blur", "position: absolute"],
+    "keywords": [
+      "Layer",
+      "レイヤー",
+      "overlay",
+      "オーバーレイ",
+      "is--layer",
+      "absolute",
+      "backdrop-filter",
+      "blur",
+      "position: absolute",
+      "重ねる",
+      "背景装飾"
+    ],
     "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。blur等のbackdrop-filterプロパティも個別に指定可能。"
   },
   {
@@ -479,7 +580,7 @@
     "description": "Lism CSS の LinkBox モジュールについて解説します。ボックス全体をクリック可能なリンクにするコンポーネントです。",
     "category": "modules",
     "headings": ["Import", "Props", "Usage", "Opt-in"],
-    "keywords": ["LinkBox", "リンク", "clickable", "カード", "is--linkBox", "u--expandedLink"],
+    "keywords": ["LinkBox", "リンク", "clickable", "カード", "is--linkBox", "u--expandedLink", "クリッカブル"],
     "snippet": "ボックス全体をリンク領域にする。hrefを指定してaタグにする方法と、内部にu--expandedLinkを配置する方法の2通りがある。"
   },
   {
@@ -488,7 +589,7 @@
     "description": "Lism CSS の Wrapper モジュールについて解説します。コンテンツ幅を制御する is--wrapper クラスを出力するコンポーネントです。",
     "category": "modules",
     "headings": ["Props", "Import", "Usage"],
-    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize"],
+    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize", "幅制限", "width limiter"],
     "snippet": "コンテンツ幅を制限するラッパー要素。contentSizeで幅を指定。s, lのプリセットサイズや任意値も設定可能。"
   },
   {
@@ -506,7 +607,7 @@
     "description": "Lism CSS の Divider モジュールについて解説します。コンテンツ間に区切り線を描画するコンポーネントです。",
     "category": "modules",
     "headings": ["構造", "CSS", "Props", "Import", "Usage"],
-    "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border"],
+    "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border", "separator", "仕切り"],
     "snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
   },
   {
@@ -515,7 +616,7 @@
     "description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
     "category": "core-components",
     "headings": ["Import"],
-    "keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image"],
+    "keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "picture", "Astro Image", "動画"],
     "snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Astro版では as='img' で Astro Image、as='picture' で Astro Picture に自動マッピング。Next.js の Image コンポーネントとの連携も可能。"
   },
   {
@@ -524,7 +625,7 @@
     "description": "Lism CSS の Spacer モジュールについて解説します。要素間にスペースを確保するための空要素を出力します。",
     "category": "modules",
     "headings": ["構造", "Props", "Import", "Usage"],
-    "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer"],
+    "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer", "スペース", "gap element"],
     "snippet": "空白を挿入するコンポーネント。w, h で幅・高さを指定。SPACEトークンの値も使用可能。"
   },
   {
@@ -533,7 +634,7 @@
     "description": "Lism CSS の Decorator モジュールについて解説します。装飾用の空要素を出力するコンポーネントです。",
     "category": "modules",
     "headings": ["構造", "Props", "Import", "Usage"],
-    "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator"],
+    "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator", "visual decoration"],
     "snippet": "装飾用の空要素を出力するコンポーネント。size, filter系プロパティ, clipPathに対応。aria-hidden='true'がデフォルトで付与される。"
   },
   {
@@ -542,7 +643,7 @@
     "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["基本構造", "ソースコード", "Import", "Props", "Examples"],
-    "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ"],
+    "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
     "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
   },
   {
@@ -551,7 +652,7 @@
     "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Props", "Usage"],
-    "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ"],
+    "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ", "popup"],
     "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
   },
   {
@@ -560,7 +661,7 @@
     "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["基本構造", "CSS", "JavaScript", "Import", "Props", "Usage", "スタイルバリエーションの作成例", "Opt-in"],
-    "keywords": ["Tabs", "タブ", "切り替え", "panel"],
+    "keywords": ["Tabs", "タブ", "切り替え", "panel", "tab navigation"],
     "snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
   },
   {
@@ -569,7 +670,7 @@
     "description": "@lism-css/ui で提供する Details コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples"],
-    "keywords": ["Details", "details", "summary", "開閉"],
+    "keywords": ["Details", "details", "summary", "開閉", "disclosure"],
     "snippet": "HTMLのdetails/summary要素をラップ。ネイティブのHTML要素を使用したアコーディオン。@lism-css/uiパッケージで提供。"
   },
   {
@@ -578,7 +679,7 @@
     "description": "@lism-css/ui で提供する Alert コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Only lism-css"],
-    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info"],
+    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info", "お知らせ", "通知"],
     "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
   },
   {
@@ -587,7 +688,7 @@
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Only lism-css", "Only Core"],
-    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き"],
+    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
     "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
   },
   {
@@ -596,7 +697,7 @@
     "description": "@lism-css/ui で提供する Button コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Opt-in", "Only lism-css"],
-    "keywords": ["Button", "ボタン", "クリック", "outline", "action"],
+    "keywords": ["Button", "ボタン", "クリック", "outline", "action", "CTA", "submit"],
     "snippet": "ボタンコンポーネント。variant (outline 等) と keycolor でバリエーションを表現。@lism-css/uiパッケージで提供。"
   },
   {
@@ -605,7 +706,7 @@
     "description": "@lism-css/ui で提供する Badge コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Only lism-css"],
-    "keywords": ["Badge", "バッジ", "ラベル", "タグ", "status"],
+    "keywords": ["Badge", "バッジ", "ラベル", "タグ", "status", "ステータス表示", "tag label", "カテゴリ表示"],
     "snippet": "バッジ (ラベル) コンポーネント。カテゴリやステータスの表示に使用。@lism-css/uiパッケージで提供。"
   },
   {
@@ -614,7 +715,7 @@
     "description": "@lism-css/ui で提供する Avatar コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Only lism-css"],
-    "keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸"],
+    "keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸", "user icon", "ユーザーアイコン"],
     "snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。@lism-css/uiパッケージで提供。"
   },
   {
@@ -623,7 +724,7 @@
     "description": "@lism-css/ui で提供する Chat コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples", "Opt-in"],
-    "keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon"],
+    "keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon", "message bubble", "speech bubble"],
     "snippet": "チャット風の吹き出しコンポーネント。会話形式のUI表現に使用。@lism-css/uiパッケージで提供。"
   },
   {
@@ -641,7 +742,7 @@
     "description": "@lism-css/ui で提供する ShapeDivider コンポーネントについて解説します。",
     "category": "ui",
     "headings": ["How to use", "Examples"],
-    "keywords": ["ShapeDivider", "波", "wave", "区切り", "SVG", "セクション"],
+    "keywords": ["ShapeDivider", "波", "wave", "区切り", "SVG", "セクション", "section separator"],
     "snippet": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。@lism-css/uiパッケージで提供。"
   },
   {
@@ -769,5 +870,131 @@
     "headings": ["Create Component", "Usage"],
     "keywords": ["Table", "テーブル", "表", "固定", "スクロール", "example"],
     "snippet": "行・列の固定表示に対応した汎用Tableレイアウトの実装例。CSS変数でボーダースタイルを調整可能。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--cbox",
+    "description": "keycolor変数をベースに、color/background-color/border-colorをcolor-mix()で自動生成するユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--cbox"],
+    "keywords": ["u--cbox", "カラーボックス", "keycolor", "color-mix", "配色", "テーマカラー", "バッジ"],
+    "snippet": "--keycolor変数をベースに --c, --bgc, --bdc を color-mix() で生成。bdクラスとの併用でボーダーも表示可能。バッジやカード等のカラーテーマ適用に使用。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--trim / u--trimChildren",
+    "description": "テキストのハーフレディング分の余白を調整するユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--trim", "u--trimChildren"],
+    "keywords": ["u--trim", "u--trimChildren", "ハーフレディング", "行間調整", "テキスト余白", "margin-block", "トリム"],
+    "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--expandedLink",
+    "description": "クリック範囲を親要素に広げるユーティリティクラス。is--linkBoxと併用。",
+    "category": "guide",
+    "headings": ["u--expandedLink"],
+    "keywords": ["u--expandedLink", "クリック範囲", "リンク拡張", "linkBox"],
+    "snippet": "クリック範囲を親要素に広げるためのクラス。主にis--linkBoxと併用して、内部のリンクをボックス全体に広げるために使用。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--srOnly",
+    "description": "要素を視覚的に隠してスクリーンリーダーのみに表示するユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--srOnly"],
+    "keywords": ["u--srOnly", "スクリーンリーダー", "アクセシビリティ", "非表示", "visually hidden", "sr-only"],
+    "snippet": "要素を視覚的に隠すクラス。position: absolute + clip-path: inset(50%) で視覚上非表示にしつつ、スクリーンリーダーには読み上げ可能。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--collapseGrid",
+    "description": "グリッド・フレックス子要素間にボーダー（区切り線）を表示するユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--collapseGrid"],
+    "keywords": ["u--collapseGrid", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "box-shadowで子要素間に区切りボーダーを表示。p='0' ov='clip'で周囲のボーダーを非表示にでき、bd追加でカレンダー風の表現も可能。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--snap",
+    "description": "scroll-snap系プロパティをCSS変数で制御するユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--snap"],
+    "keywords": ["u--snap", "スクロールスナップ", "scroll-snap", "カルーセル"],
+    "snippet": "scroll-snap-type等のプロパティをCSS変数でセットできるようにするクラス。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "u--clipText",
+    "description": "テキストで背景をクリッピングするユーティリティクラス。",
+    "category": "guide",
+    "headings": ["u--clipText"],
+    "keywords": ["u--clipText", "テキストクリップ", "背景クリッピング", "グラデーション文字", "background-clip"],
+    "snippet": "テキストで背景をクリッピングするクラス。bgiにグラデーション等を指定し、文字の形で背景を切り抜く表現が可能。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--plain",
+    "description": "主要スタイルをリセットするためのSetクラス。",
+    "category": "guide",
+    "headings": ["set--plain"],
+    "keywords": ["set--plain", "スタイルリセット", "ボタンリセット", "reset"],
+    "snippet": "主要スタイルをリセットするクラス。buttonやinput等のブラウザデフォルトスタイルを除去する場合に使用。unsetで解除可能。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--shadow",
+    "description": "シャドウを構成するCSS変数を再定義するSetクラス。",
+    "category": "guide",
+    "headings": ["set--shadow"],
+    "keywords": ["set--shadow", "シャドウ", "影", "box-shadow", "--shc"],
+    "snippet": "set--shadowクラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--hov",
+    "description": "ホバー状態の判定変数（--_isHov, --_notHov）をセットするSetクラス。",
+    "category": "guide",
+    "headings": ["set--hov"],
+    "keywords": ["set--hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
+    "snippet": "hover/focus-within状態を空変数トリックで判定。var(--_isHov, 値)でhover時のみスタイル適用。親要素に付与して子要素のホバースタイルを制御可能。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--transition",
+    "description": "CSS変数を用いてtransitionプロパティをセットするSetクラス。",
+    "category": "guide",
+    "headings": ["set--transition"],
+    "keywords": ["set--transition", "トランジション", "アニメーション", "transition"],
+    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--hovと組み合わせてスムーズなホバーアニメーションを実現。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--innerRs",
+    "description": "親要素の角丸とPaddingから内側の角丸を自動計算するSetクラス。",
+    "category": "guide",
+    "headings": ["set--innerRs"],
+    "keywords": ["set--innerRs", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
+    "snippet": "親要素の --bdrs と --p から内側の角丸 --bdrs--inner を自動計算。子要素で -bdrs:inner を使って適用。レスポンシブ対応。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--gutter",
+    "description": "コンテンツの左右に統一した余白をつけるSetクラス。",
+    "category": "guide",
+    "headings": ["set--gutter"],
+    "keywords": ["set--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
+    "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter-size変数（初期値 var(--s30)）で余白量を制御。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--bp",
+    "description": "特定のブレイクポイント以上でのみスタイルを適用するSetクラス。",
+    "category": "guide",
+    "headings": ["set--bp"],
+    "keywords": ["set--bp", "ブレイクポイント", "メディアクエリ", "レスポンシブ", "--_is_sm", "条件付きスタイル"],
+    "snippet": "特定のブレイクポイント以上でのみスタイルを適用するクラス。var(--_is_sm) 等の変数を使い、レスポンシブ対応していないプロパティを条件付きで変化させるハック的手段。"
   }
 ]