@lism-css/mcp 0.11.0 → 0.13.0

package/dist/data/docs-index.json

@@ -4,18 +4,18 @@
     "title": "概要",
     "description": "Lism CSS の概要と特徴について解説します。",
     "category": "guide",
-    "headings": ["Lism CSS の特徴", "Inspirations"],
+    "headings": ["Why Lism CSS?", "ゼロビルドでどんな環境でも使えます。", "Lism CSS のエコシステム", "Inspirations"],
     "keywords": ["overview", "概要", "特徴", "レイアウトファースト", "ゼロビルド", "コンテナクエリ", "Every Layout", "framework"],
-    "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSSフレームワークです。レイアウトファーストなモジュール設計とCSS変数を組み合わせたレスポンシブなユーティリティ設計が特徴です。"
+    "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良く美しく作るための軽量なCSS設計フレームワーク。CSS設計不要でCDNから1行で導入可能。React/Astro向け専用コンポーネントも提供。エコシステムとして @lism-css/ui、@lism-css/cli、@lism-css/mcp も用意。"
   },
   {
     "sourcePath": "installation.mdx",
     "title": "インストール",
     "description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
     "category": "guide",
-    "headings": ["CSS設計のみを導入したい場合", "専用のコンポーネントを使用したい場合", "AIツール連携 (MCP)"],
+    "headings": ["CSS設計のみを導入したい場合", "Lism専用のJSXコンポーネントを使用したい場合", "Lism UI の導入", "AIツール連携"],
     "keywords": ["install", "インストール", "CDN", "npm", "setup", "セットアップ", "導入", "MCP", "AI"],
-    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。AIコーディングツール向けのMCPサーバーも提供。"
+    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。UIコンポーネントは別パッケージ @lism-css/ui として提供。AIコーディングツール向けのSkills・MCPサーバーも提供。"
   },
   {
     "sourcePath": "css-methodology.mdx",
@@ -31,29 +31,66 @@
       "命名規則",
       "naming",
       "BEM",
-      "Prop Class",
-      "Module Class",
+      "Property Class",
+      "Primitive Class",
+      "Component 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-base → lism-primitive → lism-component → lism-custom → lism-utility の順。lism-primitive は trait/layout/atomic のサブレイヤーを持ち、lism-component は BEM 構造の c-- 用、lism-custom はユーザー独自プレフィックスのクラス用レイヤー。Primitive Class (.l--name, .a--name, .is--name 等)、Component Class (.c--name)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
   },
   {
     "sourcePath": "tokens.mdx",
-    "title": "Design Tokens",
+    "title": "デザイントークン",
     "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
-    "headings": ["COLOR", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
-    "keywords": ["token", "トークン", "design token", "カラー", "スペーシング", "spacing", "color", "font-size", "shadow", "radius"],
-    "snippet": "タイポグラフィ、余白、カラー、シャドウなどの主要なプロパティに対してデザイントークンを定義。CSS変数で管理し、一貫性のあるデザインを実現。"
+    "headings": ["COLOR", "Typography", "SPACE", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
+    "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size", "color", "spacing", "typography"],
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページでも詳細を解説。"
   },
   {
-    "sourcePath": "prop-class.mdx",
-    "title": "Prop Class",
-    "description": "CSSプロパティに紐づいた Prop Class の一覧とその使い方について解説します。",
-    "category": "props",
+    "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", "LH: line-height", "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": ["仕組み", "トークン", "lh クラス", "ハーフレディング管理のメリット"],
+    "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "lh", "--hl"],
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -lh:{token} クラスの使い方を解説。"
+  },
+  {
+    "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": "property-class",
     "headings": [
       "このページの表の見方",
       "Typography",
@@ -64,15 +101,18 @@
       "Positions",
       "Layouts",
       "Styling",
+      "Background",
       "Other CSS"
     ],
     "keywords": [
-      "prop class",
+      "property class",
       "utility",
       "ユーティリティ",
       "クラス",
       "CSS property",
       "g",
+      "cg",
+      "rg",
       "p",
       "m",
       "fz",
@@ -129,15 +169,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",
@@ -158,24 +189,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "Utilitiy Class",
+    "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "headings": ["u--cbox", "u--trim & u--trimChildren", "u--expandedLink", "u--srOnly", "u--collapseGrid", "u--snap", "u--clipText", "Opt-in"],
-    "keywords": [
-      "utility",
-      "ユーティリティ",
-      "class",
-      "クラス",
-      "u--cbox",
-      "u--trim",
-      "u--expandedLink",
-      "u--srOnly",
-      "u--collapseGrid",
-      "u--snap",
-      "u--clipText"
-    ],
-    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--expandedLink, u--collapseGrid 等を解説。"
+    "headings": ["u--cbox", "u--trim & u--trimChildren", "u--srOnly", "u--collapseGrid", "u--snap", "u--clipText", "Opt-in"],
+    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--collapseGrid", "u--snap", "u--clipText"],
+    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--collapseGrid 等を解説。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -187,20 +206,20 @@
     "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--innerRs, set--gutter を解説。"
   },
   {
-    "sourcePath": "module-class.mdx",
-    "title": "Module Class",
-    "description": "Lism CSS のモジュールクラス（is--, l--, a--, c--）の分類と使い方について解説します。",
+    "sourcePath": "primitives.mdx",
+    "title": "Primitive Class",
+    "description": "Lism CSS のプリミティブクラス（is--, l--, a--）の分類と使い方について解説します。",
     "category": "guide",
-    "headings": ["State Module", "Layout Modules", "Atomic Modules", "Custom Modules"],
-    "keywords": ["module", "モジュール", "layout", "レイアウト", "class", "BEM", "is--vertical"],
-    "snippet": "レイアウトの構成要素を細分化してモジュールとして定義。.l--{name}, .a--{name}, .c--{name} 等の命名規則。State Module (is--container, is--wrapper, is--layer, is--linkBox, is--vertical) も解説。"
+    "headings": ["Trait Primitives", "Layout Primitives", "Atomic Primitives"],
+    "keywords": ["primitive", "プリミティブ", "trait", "layout", "レイアウト", "class", "BEM", "is--vertical"],
+    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name}, .a--{name}, .is--{name} 等の命名規則。Trait Primitives (is--container, is--wrapper, is--layer, is--boxLink, is--vertical) も解説。BEM 構造を持つ Component Class (.c--{name}) は別レイヤー（lism-component）に配置される。"
   },
   {
     "sourcePath": "base-styles.mdx",
     "title": "Base Styles",
     "description": "@lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
     "category": "guide",
-    "headings": ["Reset CSS", "Base styles"],
+    "headings": ["Reset CSS", "Base styles", "HTML基本スタイルのプレビュー"],
     "keywords": ["html", "base", "ベース", "スタイル", "要素", "reset"],
     "snippet": "Lism CSS がHTML要素に対して適用するベーススタイルについて解説。Reset CSSと@lism-baseレイヤーで定義されるベーススタイルを紹介。"
   },
@@ -210,6 +229,10 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "v.0.13.0 (unreleased)",
+      "`@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)",
@@ -229,28 +252,28 @@
     "snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
   },
   {
-    "sourcePath": "props/bd.mdx",
+    "sourcePath": "property-class/bd.mdx",
     "title": "-bd",
     "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
-    "category": "props",
+    "category": "property-class",
     "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意の`border`をインライン出力する方法"],
     "keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
     "snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
   {
-    "sourcePath": "props/hov.mdx",
+    "sourcePath": "property-class/hov.mdx",
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
-    "category": "props",
-    "headings": ["基本的な使い方", "`.set--hov` と特殊変数"],
+    "category": "property-class",
+    "headings": ["基本的な使い方", "`.set--hov` と `-hov:to:xxx`"],
     "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
-    "snippet": "ホバー関連のProp。hov を使ったホバーエフェクトの設定方法。set--hovとset--transitionの活用、子要素へのホバー状態伝播を解説。"
+    "snippet": "ホバー関連のProp。-hov:{prop} クラスでホバーエフェクトを設定。set--transition との組み合わせでアニメーション実現。set--hov と -hov:to:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
   {
-    "sourcePath": "props/max-sz.mdx",
+    "sourcePath": "property-class/max-sz.mdx",
     "title": "サイズ制御クラス -max-sz:",
     "description": "コンテンツの最大幅を制御する -max-sz ユーティリティクラスの使い方について解説します。",
-    "category": "props",
+    "category": "property-class",
     "headings": ["-max-sz:full, -max-sz:container", "DEMOページ"],
     "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "container"],
     "snippet": "max-sz (max-inline-size) の Prop。xs, s, m, l, xl のサイズトークンで最大幅を指定。-max-sz:full, -max-sz:container の特殊クラスも解説。"
@@ -260,7 +283,7 @@
     "title": "Lism",
     "description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
     "category": "core-components",
-    "headings": ["Import", "Lism Props", "補足"],
+    "headings": ["Import", "Lism Props"],
     "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
     "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
   },
@@ -324,7 +347,7 @@
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
     "headings": ["Props", "Import", "使用例"],
-    "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum"],
+    "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
   {
@@ -337,38 +360,50 @@
     "snippet": "cdn.lism-css.comからダミーのプレースホルダー画像を出力するコンポーネント。@lism-css/uiパッケージから提供。"
   },
   {
-    "sourcePath": "modules/l--box.mdx",
+    "sourcePath": "primitives/l--box.mdx",
     "title": "Box / l--box",
-    "description": "Lism CSS の Box モジュールについて解説します。コンテンツをグループ化するシンプルなレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["対応コンポーネント", "Usage"],
+    "description": "l--box は、コンテンツをグループ化するだけのシンプルなクラスです。",
+    "category": "primitives",
+    "headings": ["Lismコンポーネント", "Usage"],
     "keywords": ["Box", "ボックス", "layout", "レイアウト", "l--box"],
-    "snippet": "最も基本的なレイアウトモジュール。コンテンツをグループ化するだけのシンプルな汎用ボックス要素。l--box クラスが付与される。"
+    "snippet": "最も基本的なレイアウトプリミティブ。コンテンツをグループ化するだけのシンプルな汎用ボックス要素。l--box クラスが付与される。"
   },
   {
-    "sourcePath": "modules/l--flex.mdx",
+    "sourcePath": "primitives/l--flex.mdx",
     "title": "Flex / l--flex",
-    "description": "Lism CSS の Flex モジュールについて解説します。コンテンツを Flexbox で配置するためのレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["CSS", "Import", "Props", "Usage"],
+    "description": "l--flex は、コンテンツを Flex レイアウトで配置するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": ["Flex", "flexbox", "フレックス", "layout", "l--flex", "横並び", "display", "display: flex", "flex-direction", "flex-wrap"],
     "snippet": "Flexboxレイアウトを構成。display: flex が適用される。g, ai, jc, fxw, fxd 等で配置を制御。"
   },
   {
-    "sourcePath": "modules/l--stack.mdx",
+    "sourcePath": "primitives/l--stack.mdx",
     "title": "Stack / l--stack",
-    "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"],
+    "description": "l--stack は、複数の要素を Flex レイアウトで縦並びに配置するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": [
+      "Stack",
+      "スタック",
+      "縦並び",
+      "vertical",
+      "l--stack",
+      "display",
+      "display: flex",
+      "flex-direction",
+      "flex-direction: column",
+      "縦積み",
+      "column direction"
+    ],
     "snippet": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。ai='center'で内在的な中央寄せも可能。"
   },
   {
-    "sourcePath": "modules/l--grid.mdx",
+    "sourcePath": "primitives/l--grid.mdx",
     "title": "Grid / l--grid",
-    "description": "Lism CSS の Grid モジュールについて解説します。コンテンツを CSS Grid で配置するためのレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["Import", "Props", "Usage"],
+    "description": "l--grid は、コンテンツを Grid レイアウトで配置するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
       "Grid",
       "グリッド",
@@ -379,134 +414,208 @@
       "display",
       "display: grid",
       "grid-template-columns",
-      "grid-template-rows"
+      "grid-template-rows",
+      "格子"
     ],
-    "snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridや-gt:repeatもサポート。"
+    "snippet": "CSS Gridレイアウトを構成。subgridもサポート。均等タイルは l--tileGrid を参照。"
   },
   {
-    "sourcePath": "modules/l--center.mdx",
+    "sourcePath": "primitives/l--tileGrid.mdx",
+    "title": "TileGrid / l--tileGrid",
+    "description": "l--tileGrid は、列数と行数を指定して均等なタイル型グリッドレイアウトを構成するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": [
+      "TileGrid",
+      "タイル",
+      "グリッド",
+      "grid",
+      "l--tileGrid",
+      "display",
+      "display: grid",
+      "grid-template",
+      "cols",
+      "rows",
+      "1fr",
+      "repeat",
+      "tile",
+      "均等"
+    ],
+    "snippet": "colsとrowsで均等なタイル型グリッドレイアウトを構成。grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr)) のGrid。ブレイクポイント指定も可能。"
+  },
+  {
+    "sourcePath": "primitives/l--center.mdx",
     "title": "Center / l--center",
-    "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"],
+    "description": "l--center は、要素を上下左右中央揃えで配置するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["Center", "中央揃え", "center", "layout", "l--center", "display", "display: grid", "place-items", "place-items: center", "中央配置"],
     "snippet": "子要素を中央揃えにするレイアウト。place-items: center の Grid。高さがあれば上下左右中央揃え。"
   },
   {
-    "sourcePath": "modules/l--cluster.mdx",
+    "sourcePath": "primitives/l--cluster.mdx",
     "title": "Cluster / l--cluster",
-    "description": "Lism CSS の Cluster モジュールについて解説します。要素を横方向に並べて自動で折り返すレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["CSS", "Import", "Usage"],
-    "keywords": ["Cluster", "クラスター", "横並び", "wrap", "l--cluster", "タグ", "display", "display: flex", "flex-wrap"],
+    "description": "l--cluster は、複数の要素を横方向に並べて配置し、数が多ければ折り返すクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["Cluster", "クラスター", "横並び", "wrap", "l--cluster", "タグ", "display", "display: flex", "flex-wrap", "badge list"],
     "snippet": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。"
   },
   {
-    "sourcePath": "modules/l--columns.mdx",
+    "sourcePath": "primitives/l--columns.mdx",
     "title": "Columns / l--columns",
-    "description": "Lism CSS の Columns モジュールについて解説します。ブレイクポイントごとに列数を指定できるカラムレイアウトです。",
-    "category": "modules",
-    "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["Columns", "カラム", "列", "multi-column", "l--columns", "subgrid", "display", "display: grid", "grid-template-columns"],
+    "description": "l--columns は、ブレイクポイントごとに指定した列数で表示できるカラムクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": [
+      "Columns",
+      "カラム",
+      "列",
+      "multi-column",
+      "l--columns",
+      "subgrid",
+      "display",
+      "display: grid",
+      "grid-template-columns",
+      "等分割",
+      "multi column"
+    ],
     "snippet": "均等幅のカラムレイアウト。cols で列数を指定する Grid。レスポンシブ対応可能。subgridも活用可能。"
   },
   {
-    "sourcePath": "modules/l--flow.mdx",
+    "sourcePath": "primitives/l--flow.mdx",
     "title": "Flow / l--flow",
-    "description": "Lism CSS の Flow モジュールについて解説します。子要素間の余白を自動管理する flow-root レイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["対応コンポーネント", "Usage", "l--flow を入れ子にする時の注意点"],
-    "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root"],
-    "snippet": "コンテンツフロー用のレイアウト。display: flow-root で子要素間の余白を管理。見出しタグは余白が2倍。is--skipFlowで余白打ち消しも可能。"
+    "description": "l--flow は、子要素間の余白を margin で管理するフロークラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage", "`l--flow` を入れ子にする時の注意点"],
+    "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root", "article body", "縦方向余白"],
+    "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin で管理。見出しタグは余白が大きくなる。is--skipFlowで余白打ち消しも可能。"
   },
   {
-    "sourcePath": "modules/l--fluidcols.mdx",
+    "sourcePath": "primitives/l--fluidCols.mdx",
     "title": "FluidCols / l--fluidCols",
-    "description": "Lism CSS の FluidCols モジュールについて解説します。カラム幅に応じて自動で折り返すブレイクポイント非依存の段組みレイアウトです。",
-    "category": "modules",
-    "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["FluidCols", "流動カラム", "auto-fill", "fluid", "l--fluidCols", "display", "display: grid"],
+    "description": "l--fluidCols は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": [
+      "FluidCols",
+      "流動カラム",
+      "auto-fill",
+      "fluid",
+      "l--fluidCols",
+      "display",
+      "display: grid",
+      "auto-wrap",
+      "自動折り返し",
+      "responsive grid",
+      "メディアクエリなし",
+      "折り返しグリッド"
+    ],
     "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
   },
   {
-    "sourcePath": "modules/l--frame.mdx",
+    "sourcePath": "primitives/l--frame.mdx",
     "title": "Frame / l--frame",
-    "description": "Lism CSS の Frame モジュールについて解説します。直下のメディア要素を自身のサイズに合わせて表示するレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["対応コンポーネント", "Usage"],
-    "keywords": ["Frame", "フレーム", "aspect-ratio", "アスペクト比", "l--frame", "画像", "video", "iframe"],
-    "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズに合わせて表示するレイアウトモジュール。arでアスペクト比を指定。"
+    "description": "l--frame は、直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["Frame", "フレーム", "aspect-ratio", "アスペクト比", "l--frame", "画像", "video", "iframe", "比率維持"],
+    "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラス。arでアスペクト比を指定。"
   },
   {
-    "sourcePath": "modules/l--switchcols.mdx",
+    "sourcePath": "primitives/l--switchCols.mdx",
     "title": "SwitchCols / l--switchCols",
-    "description": "Lism CSS の SwitchCols モジュールについて解説します。メディアクエリ不要で複数列と1列を自動切り替えするレイアウトです。",
-    "category": "modules",
-    "headings": ["Props", "CSS", "Import", "Usage"],
-    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols"],
-    "snippet": "複数列以上と1列への切り替えをメディアクエリを使わずに実装するレイアウト。breakSizeで切り替えポイントを指定。"
+    "description": "l--switchCols は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols", "responsive columns", "メディアクエリなし"],
+    "snippet": "複数列以上と1列への切り替えをコンテナクエリ・メディアクエリを使わずに実装するクラス。breakSizeで切り替えポイントを指定。"
   },
   {
-    "sourcePath": "modules/l--sidemain.mdx",
+    "sourcePath": "primitives/l--sideMain.mdx",
     "title": "SideMain / l--sideMain",
-    "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'で反転も可能。"
+    "description": "l--sideMain は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
+    "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side", "two column"],
+    "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。メディアクエリ・コンテナクエリに依存せず自動で切り替わる。"
   },
   {
-    "sourcePath": "modules/is--container.mdx",
+    "sourcePath": "primitives/is--container.mdx",
     "title": "Container / is--container",
-    "description": "Lism CSS の Container モジュールについて解説します。container-type を設定しコンテナクエリを有効にするコンポーネントです。",
-    "category": "modules",
-    "headings": ["Props", "Import", "Usage"],
-    "keywords": ["Container", "コンテナ", "container query", "is--container", "isContainer"],
+    "description": "is--container は、container-type を宣言してコンテナクエリを有効にするためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
+    "keywords": ["Container", "コンテナ", "container query", "is--container", "isContainer", "レスポンシブ基準"],
     "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
   },
   {
-    "sourcePath": "modules/is--layer.mdx",
+    "sourcePath": "primitives/is--layer.mdx",
     "title": "Layer / is--layer",
-    "description": "Lism CSS の Layer モジュールについて解説します。親要素に重ねて配置するオーバーレイ用のコンポーネントです。",
-    "category": "modules",
-    "headings": ["Import", "Usage"],
-    "keywords": ["Layer", "レイヤー", "overlay", "オーバーレイ", "is--layer", "absolute", "backdrop-filter", "blur", "position: absolute"],
-    "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。blur等のbackdrop-filterプロパティも個別に指定可能。"
+    "description": "is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
+    "keywords": [
+      "Layer",
+      "レイヤー",
+      "overlay",
+      "オーバーレイ",
+      "is--layer",
+      "absolute",
+      "backdrop-filter",
+      "blur",
+      "position: absolute",
+      "重ねる",
+      "背景装飾"
+    ],
+    "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。backdrop-filterの活用も解説。"
   },
   {
-    "sourcePath": "modules/is--linkBox.mdx",
-    "title": "LinkBox / is--linkBox",
-    "description": "Lism CSS の LinkBox モジュールについて解説します。ボックス全体をクリック可能なリンクにするコンポーネントです。",
-    "category": "modules",
-    "headings": ["Import", "Props", "Usage", "Opt-in"],
-    "keywords": ["LinkBox", "リンク", "clickable", "カード", "is--linkBox", "u--expandedLink"],
-    "snippet": "ボックス全体をリンク領域にする。hrefを指定してaタグにする方法と、内部にu--expandedLinkを配置する方法の2通りがある。"
+    "sourcePath": "primitives/is--boxLink.mdx",
+    "title": "BoxLink / is--boxLink",
+    "description": "is--boxLink は、ボックス全体をクリック可能にするクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage", "Opt-in"],
+    "keywords": [
+      "BoxLink",
+      "LinkBox",
+      "リンク",
+      "clickable",
+      "カード",
+      "is--boxLink",
+      "is--linkBox",
+      "is--coverLink",
+      "u--expandedLink",
+      "stretched-link",
+      "クリッカブル"
+    ],
+    "snippet": "ボックス全体をリンク領域にする。hrefを指定してaタグにする方法と、内部にis--coverLink（旧u--expandedLink）を配置する方法の2通りがある。"
   },
   {
-    "sourcePath": "modules/is--wrapper.mdx",
+    "sourcePath": "primitives/is--wrapper.mdx",
     "title": "Wrapper / is--wrapper",
-    "description": "Lism CSS の Wrapper モジュールについて解説します。コンテンツ幅を制御する is--wrapper クラスを出力するコンポーネントです。",
-    "category": "modules",
-    "headings": ["Props", "Import", "Usage"],
-    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize"],
-    "snippet": "コンテンツ幅を制限するラッパー要素。contentSizeで幅を指定。s, lのプリセットサイズや任意値も設定可能。"
+    "description": "is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
+    "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize", "幅制限", "width limiter"],
+    "snippet": "コンテンツ幅を制限するラッパー要素。isWrapperプロパティでどのコンポーネントからでも呼び出し可能。contentSizeで幅を指定。s, lのプリセットサイズや任意値も設定可能。"
   },
   {
-    "sourcePath": "modules/a--icon.mdx",
+    "sourcePath": "primitives/a--icon.mdx",
     "title": "Icon / a--icon",
-    "description": "Lism CSS の Icon モジュールについて解説します。SVG アイコンを出力するためのコンポーネントです。",
-    "category": "modules",
-    "headings": ["構造", "CSS", "Props", "Import", "Usage"],
+    "description": "a--icon は、アイコン要素を表示するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": ["Icon", "アイコン", "SVG", "a--icon", "phosphor-icons"],
     "snippet": "アイコンを表示するコンポーネント。外部パッケージ(react-icons, phosphor-icons等)のアイコン、プリセットアイコン、SVG直接記述、img指定に対応。"
   },
   {
-    "sourcePath": "modules/a--divider.mdx",
+    "sourcePath": "primitives/a--divider.mdx",
     "title": "Divider / a--divider",
-    "description": "Lism CSS の Divider モジュールについて解説します。コンテンツ間に区切り線を描画するコンポーネントです。",
-    "category": "modules",
-    "headings": ["構造", "CSS", "Props", "Import", "Usage"],
-    "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border"],
+    "description": "a--divider は、コンテンツ間に区切り線を描画するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border", "separator", "仕切り"],
     "snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
   },
   {
@@ -515,26 +624,26 @@
     "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 コンポーネントとの連携も可能。"
   },
   {
-    "sourcePath": "modules/a--spacer.mdx",
+    "sourcePath": "primitives/a--spacer.mdx",
     "title": "Spacer / a--spacer",
-    "description": "Lism CSS の Spacer モジュールについて解説します。要素間にスペースを確保するための空要素を出力します。",
-    "category": "modules",
-    "headings": ["構造", "Props", "Import", "Usage"],
-    "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer"],
+    "description": "a--spacer は、要素間にスペースを確保するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
+    "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer", "スペース", "gap element"],
     "snippet": "空白を挿入するコンポーネント。w, h で幅・高さを指定。SPACEトークンの値も使用可能。"
   },
   {
-    "sourcePath": "modules/a--decorator.mdx",
+    "sourcePath": "primitives/a--decorator.mdx",
     "title": "Decorator / a--decorator",
-    "description": "Lism CSS の Decorator モジュールについて解説します。装飾用の空要素を出力するコンポーネントです。",
-    "category": "modules",
-    "headings": ["構造", "Props", "Import", "Usage"],
-    "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator"],
-    "snippet": "装飾用の空要素を出力するコンポーネント。size, filter系プロパティ, clipPathに対応。aria-hidden='true'がデフォルトで付与される。"
+    "description": "a--decorator は、コンテンツを装飾するための空要素として使うクラスです。",
+    "category": "primitives",
+    "headings": ["Lismコンポーネント", "Usage"],
+    "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator", "visual decoration"],
+    "snippet": "装飾用の空要素を出力するコンポーネント。aria-hidden='true'がデフォルトで付与される。"
   },
   {
     "sourcePath": "ui/Accordion.mdx",
@@ -542,7 +651,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 +660,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 +669,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 +678,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 +687,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 +696,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 +705,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 +714,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 +723,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 +732,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 +750,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 +878,174 @@
     "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": "primitives/is--boxLink.mdx",
+    "title": "is--coverLink",
+    "description": "クリック範囲を親要素全体に広げるためのクラス。is--boxLinkと併用。",
+    "category": "primitives",
+    "headings": ["Usage"],
+    "keywords": ["is--coverLink", "u--expandedLink", "stretched-link", "クリック範囲", "リンク拡張", "boxLink", "linkBox"],
+    "snippet": "クリック範囲を親要素全体に広げるためのクラス（旧 u--expandedLink）。is--boxLink と併用し、内部リンクをボックス全体に広げるために使用。"
+  },
+  {
+    "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) 等の変数を使い、レスポンシブ対応していないプロパティを条件付きで変化させるハック的手段。"
+  },
+  {
+    "sourcePath": "features.mdx",
+    "title": "Lism CSSの特徴",
+    "description": "Lism CSS の設計思想と主な特徴について詳しく解説します。",
+    "category": "guide",
+    "headings": [
+      "サイト全体のCSS設計を担う",
+      "心地よいリズムを生むトークン設計",
+      "レイアウトファーストなプリミティブ設計",
+      "CSS変数を活かしたユーティリティ設計",
+      "CSSを書くことを前提にした設計思想",
+      "メディアクエリに依存しないレイアウト"
+    ],
+    "keywords": ["特徴", "設計思想", "レイアウトファースト", "トークン", "プリミティブ", "CSS変数", "メディアクエリなし", "フレームワーク"],
+    "snippet": "Lism CSS はサイト全体のCSS設計を丸ごと引き受けるフレームワーク。デザイントークン・命名規則・@layer階層を包括的に定義。レイアウトファーストなプリミティブ設計とCSS変数を活かしたユーティリティ設計が特徴。メディアクエリに依存しないレイアウトパターンも提供。"
+  },
+  {
+    "sourcePath": "mcp.mdx",
+    "title": "MCP Server",
+    "description": "AIコーディングツールが Lism CSS のコンポーネント・Props・トークン情報をリアルタイムに参照できる MCP サーバーのセットアップ方法。",
+    "category": "guide",
+    "headings": ["できること", "セットアップ"],
+    "keywords": ["MCP", "AI", "Claude", "Cursor", "セットアップ", "コーディング支援", "Model Context Protocol"],
+    "snippet": "@lism-css/mcp は Lism CSS の情報をAIコーディングツールに提供するMCPサーバー。コンポーネント情報の参照・Props↔CSSマッピング・デザイントークン参照・ドキュメント検索・CSS→Lism変換に対応。Claude Code, Cursor 等から利用可能。"
+  },
+  {
+    "sourcePath": "skills.mdx",
+    "title": "Skills",
+    "description": "プロジェクトにSKILL.mdファイルを配置して、AIエージェントに Lism CSS の設計ルール・Props・トークン・命名規則を伝える方法。",
+    "category": "guide",
+    "headings": ["セットアップ", "アップデート", "ファイル構成"],
+    "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
+    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
+  },
+  {
+    "sourcePath": "primitives/is--vertical.mdx",
+    "title": "is--vertical",
+    "description": "is--vertical は、要素に縦書きモード（writing-mode）を適用するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Usage"],
+    "keywords": ["is--vertical", "縦書き", "writing-mode", "vertical-rl", "vertical-lr", "縦方向", "テキスト方向"],
+    "snippet": "要素に縦書きモード（writing-mode）を適用するクラス。--vertical-modeトークンで値を管理。is--vertical@sm / is--vertical@md でブレイクポイント以上のみ縦書きにするバリエーションも提供。set--bp との併用が必要。"
   }
 ]