@lism-css/mcp 0.3.0 → 0.10.1

package/dist/data/docs-index.json

@@ -1,691 +1,786 @@
 [
-	{
-		"sourcePath": "overview.mdx",
-		"title": "概要",
-		"description": "Lism CSS の概要と特徴について解説します。",
-		"category": "guide",
-		"headings": ["Lism CSS の特徴", "Inspirations"],
-		"keywords": ["overview", "概要", "特徴", "レイアウトファースト", "ゼロビルド", "コンテナクエリ", "Every Layout", "framework"],
-		"snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSSフレームワークです。レイアウトファーストなモジュール設計とCSS変数を組み合わせたレスポンシブなユーティリティ設計が特徴です。"
-	},
-	{
-		"sourcePath": "installation.mdx",
-		"title": "インストール",
-		"description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
-		"category": "guide",
-		"headings": ["CSS設計のみを導入したい場合", "専用のコンポーネントを使用したい場合", "AIツール連携 (MCP)"],
-		"keywords": ["install", "インストール", "CDN", "npm", "setup", "セットアップ", "導入", "MCP", "AI"],
-		"snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。AIコーディングツール向けのMCPサーバーも提供。"
-	},
-	{
-		"sourcePath": "css-methodology.mdx",
-		"title": "CSS設計",
-		"description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
-		"category": "guide",
-		"headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "命名規則について", "単語の省略について"],
-		"keywords": [
-			"CSS設計",
-			"methodology",
-			"レイヤー",
-			"layer",
-			"命名規則",
-			"naming",
-			"BEM",
-			"Prop 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) の命名規則を説明。"
-	},
-	{
-		"sourcePath": "tokens.mdx",
-		"title": "Design Tokens",
-		"description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
-		"category": "guide",
-		"headings": ["COLOR", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
-		"keywords": ["token", "トークン", "design token", "カラー", "スペーシング", "spacing", "color", "font-size", "shadow", "radius"],
-		"snippet": "タイポグラフィ、余白、カラー、シャドウなどの主要なプロパティに対してデザイントークンを定義。CSS変数で管理し、一貫性のあるデザインを実現。"
-	},
-	{
-		"sourcePath": "prop-class.mdx",
-		"title": "Prop Class",
-		"description": "CSSプロパティに紐づいた Prop Class の一覧とその使い方について解説します。",
-		"category": "props",
-		"headings": [
-			"このページの表の見方",
-			"Typography",
-			"Colors",
-			"Spacing",
-			"Width & Height",
-			"Displays",
-			"Positions",
-			"Layouts",
-			"Styling",
-			"Other CSS"
-		],
-		"keywords": ["prop class", "utility", "ユーティリティ", "クラス", "CSS property"],
-		"snippet": "単一のCSSプロパティに対応するユーティリティクラス。.-{prop}:{value} の形式。レスポンシブ対応の .-{prop}_{bp} 形式もサポート。"
-	},
-	{
-		"sourcePath": "responsive.mdx",
-		"title": "Prop Responsive",
-		"description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
-		"category": "guide",
-		"headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
-		"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",
-		"description": "Lism CSS が提供する軽量な Reset CSS の内容と読み込み方法について解説します。",
-		"category": "guide",
-		"headings": [],
-		"keywords": ["reset", "リセット", "normalize", "reset css"],
-		"snippet": "Lism CSS に組み込まれたリセットCSS。reset.css レベルからサイト全体のCSS設計を担う。"
-	},
-	{
-		"sourcePath": "customize.mdx",
-		"title": "Customize",
-		"description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
-		"category": "guide",
-		"headings": ["@layerをオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
-		"keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
-		"snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
-	},
-	{
-		"sourcePath": "utility-class.mdx",
-		"title": "Utilitiy 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 等を解説。"
-	},
-	{
-		"sourcePath": "set-class.mdx",
-		"title": "Set Class",
-		"description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
-		"category": "guide",
-		"headings": [],
-		"keywords": [
-			"set",
-			"set class",
-			"set--plain",
-			"set--shadow",
-			"set--transition",
-			"set--hov",
-			"set--bp",
-			"set--cqUnit",
-			"set--innerRs",
-			"set--gutter"
-		],
-		"snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--cqUnit, set--innerRs, set--gutter を解説。"
-	},
-	{
-		"sourcePath": "module-class.mdx",
-		"title": "Module Class",
-		"description": "Lism CSS のモジュールクラス（is--, l--, a--, c--）の分類と使い方について解説します。",
-		"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) も解説。"
-	},
-	{
-		"sourcePath": "base-styles.mdx",
-		"title": "Base Styles",
-		"description": "@lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
-		"category": "guide",
-		"headings": ["Reset CSS", "Base styles"],
-		"keywords": ["html", "base", "ベース", "スタイル", "要素", "reset"],
-		"snippet": "Lism CSS がHTML要素に対して適用するベーススタイルについて解説。Reset CSSと@lism-baseレイヤーで定義されるベーススタイルを紹介。"
-	},
-	{
-		"sourcePath": "changelog.mdx",
-		"title": "Changelog",
-		"description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
-		"category": "guide",
-		"headings": [
-			"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 (大幅な変更)",
-			"v.0.7",
-			"v.0.7.1",
-			"v.0.7.2",
-			"v.0.7.3",
-			"v.0.6",
-			"v.0.5（大幅な変更）",
-			"~ v.0.3"
-		],
-		"keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-		"snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
-	},
-	{
-		"sourcePath": "props/bd.mdx",
-		"title": "-bd",
-		"description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
-		"category": "props",
-		"headings": ["方向指定", "bdwをブレイクポイントで切り替える"],
-		"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",
-		"title": "-hov",
-		"description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
-		"category": "props",
-		"headings": ["基本的な使い方", ".set--hov と特殊変数"],
-		"keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
-		"snippet": "ホバー関連のProp。hov を使ったホバーエフェクトの設定方法。set--hovとset--transitionの活用、子要素へのホバー状態伝播を解説。"
-	},
-	{
-		"sourcePath": "props/max-sz.mdx",
-		"title": "サイズ制御クラス -max-sz:",
-		"description": "コンテンツの最大幅を制御する -max-sz ユーティリティクラスの使い方について解説します。",
-		"category": "props",
-		"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 の特殊クラスも解説。"
-	},
-	{
-		"sourcePath": "core-components/Lism.mdx",
-		"title": "Lism",
-		"description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
-		"category": "core-components",
-		"headings": ["Import", "Lism Props", "補足"],
-		"keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
-		"snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。tag prop で出力要素を変更可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
-	},
-	{
-		"sourcePath": "core-components/HTML.mdx",
-		"title": "HTML.xxx",
-		"description": "HTMLの主要なタグに<Lism>と同じプロパティを指定できるようにするためのコンポーネントです。",
-		"category": "core-components",
-		"headings": [],
-		"keywords": ["HTML", "要素", "element", "tag", "HTML.div", "HTML.p", "HTML.span", "HTML.a", "HTML.h"],
-		"snippet": "HTMLの主要なタグに<Lism>と同じプロパティを指定できるようにするコンポーネント。HTML.div, HTML.p, HTML.span, HTML.a, HTML.h 等が利用可能。"
-	},
-	{
-		"sourcePath": "core-components/Dummy.mdx",
-		"title": "Dummy",
-		"description": "ダミーテキストを出力できるLismコンポーネントです。",
-		"category": "core-components",
-		"headings": ["Props", "Import", "ダミーテキストの例", "ダミーリスト", "ダミー画像"],
-		"keywords": ["Dummy", "ダミー", "テスト", "プレビュー"],
-		"snippet": "ダミーテキストを生成するコンポーネント。プレビューやテスト用に使用。lang, length, tag, offset 等のプロパティで出力を制御。"
-	},
-	{
-		"sourcePath": "modules/l--box.mdx",
-		"title": "Box / l--box",
-		"description": "Lism CSS の Box モジュールについて解説します。コンテンツをグループ化するシンプルなレイアウトモジュールです。",
-		"category": "modules",
-		"headings": ["対応コンポーネント", "Usage"],
-		"keywords": ["Box", "ボックス", "layout", "レイアウト", "l--box"],
-		"snippet": "最も基本的なレイアウトモジュール。コンテンツをグループ化するだけのシンプルな汎用ボックス要素。l--box クラスが付与される。"
-	},
-	{
-		"sourcePath": "modules/l--flex.mdx",
-		"title": "Flex / l--flex",
-		"description": "Lism CSS の Flex モジュールについて解説します。コンテンツを Flexbox で配置するためのレイアウトモジュールです。",
-		"category": "modules",
-		"headings": ["CSS", "Import", "Props", "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",
-		"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"],
-		"snippet": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。ai='center'で内在的な中央寄せも可能。"
-	},
-	{
-		"sourcePath": "modules/l--grid.mdx",
-		"title": "Grid / l--grid",
-		"description": "Lism CSS の Grid モジュールについて解説します。コンテンツを CSS Grid で配置するためのレイアウトモジュールです。",
-		"category": "modules",
-		"headings": ["Import", "Props", "Usage"],
-		"keywords": [
-			"Grid",
-			"グリッド",
-			"layout",
-			"l--grid",
-			"CSS Grid",
-			"subgrid",
-			"display",
-			"display: grid",
-			"grid-template-columns",
-			"grid-template-rows"
-		],
-		"snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridや-gt:repeatもサポート。"
-	},
-	{
-		"sourcePath": "modules/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"],
-		"snippet": "子要素を中央揃えにするレイアウト。place-items: center の Grid。高さがあれば上下左右中央揃え。"
-	},
-	{
-		"sourcePath": "modules/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"],
-		"snippet": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。"
-	},
-	{
-		"sourcePath": "modules/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"],
-		"snippet": "均等幅のカラムレイアウト。cols で列数を指定する Grid。レスポンシブ対応可能。subgridも活用可能。"
-	},
-	{
-		"sourcePath": "modules/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で余白打ち消しも可能。"
-	},
-	{
-		"sourcePath": "modules/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"],
-		"snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
-	},
-	{
-		"sourcePath": "modules/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でアスペクト比を指定。"
-	},
-	{
-		"sourcePath": "modules/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で切り替えポイントを指定。"
-	},
-	{
-		"sourcePath": "modules/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'で反転も可能。"
-	},
-	{
-		"sourcePath": "modules/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"],
-		"snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
-	},
-	{
-		"sourcePath": "modules/is--layer.mdx",
-		"title": "Layer / is--layer",
-		"description": "Lism CSS の Layer モジュールについて解説します。親要素に重ねて配置するオーバーレイ用のコンポーネントです。",
-		"category": "modules",
-		"headings": ["Props", "Import", "Usage"],
-		"keywords": ["Layer", "レイヤー", "overlay", "オーバーレイ", "is--layer", "absolute", "backdrop-filter", "blur", "position: absolute"],
-		"snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。blur等の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": "modules/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のプリセットサイズや任意値も設定可能。"
-	},
-	{
-		"sourcePath": "modules/a--icon.mdx",
-		"title": "Icon / a--icon",
-		"description": "Lism CSS の Icon モジュールについて解説します。SVG アイコンを出力するためのコンポーネントです。",
-		"category": "modules",
-		"headings": ["構造", "CSS", "Props", "Import", "Usage"],
-		"keywords": ["Icon", "アイコン", "SVG", "a--icon", "phosphor-icons"],
-		"snippet": "アイコンを表示するコンポーネント。外部パッケージ(react-icons, phosphor-icons等)のアイコン、プリセットアイコン、SVG直接記述、img指定に対応。"
-	},
-	{
-		"sourcePath": "modules/a--divider.mdx",
-		"title": "Divider / a--divider",
-		"description": "Lism CSS の Divider モジュールについて解説します。コンテンツ間に区切り線を描画するコンポーネントです。",
-		"category": "modules",
-		"headings": ["構造", "CSS", "Props", "Import", "Usage"],
-		"keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border"],
-		"snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
-	},
-	{
-		"sourcePath": "modules/a--media.mdx",
-		"title": "Media / a--media",
-		"description": "Lism CSS の Media モジュールについて解説します。画像や動画などのメディア要素に適用する汎用クラスとコンポーネントです。",
-		"category": "modules",
-		"headings": ["Props", "Import"],
-		"keywords": ["Media", "メディア", "img", "video", "iframe", "a--media", "画像", "filter"],
-		"snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPosition, filter系プロパティに対応。Next.js/AstroのImageコンポーネントとの連携も可能。"
-	},
-	{
-		"sourcePath": "modules/a--spacer.mdx",
-		"title": "Spacer / a--spacer",
-		"description": "Lism CSS の Spacer モジュールについて解説します。要素間にスペースを確保するための空要素を出力します。",
-		"category": "modules",
-		"headings": ["構造", "Props", "Import", "Usage"],
-		"keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer"],
-		"snippet": "空白を挿入するコンポーネント。w, h で幅・高さを指定。SPACEトークンの値も使用可能。"
-	},
-	{
-		"sourcePath": "modules/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'がデフォルトで付与される。"
-	},
-	{
-		"sourcePath": "ui/Accordion.mdx",
-		"title": "Accordion",
-		"description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["基本構造", "ソースコード", "Import", "Props", "Examples"],
-		"keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ"],
-		"snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Modal.mdx",
-		"title": "Modal",
-		"description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Props", "Usage"],
-		"keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ"],
-		"snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Tabs.mdx",
-		"title": "Tabs",
-		"description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["基本構造", "CSS", "JavaScript", "Import", "Props", "Usage", "スタイルバリエーションの作成例", "Opt-in"],
-		"keywords": ["Tabs", "タブ", "切り替え", "panel"],
-		"snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Details.mdx",
-		"title": "Details",
-		"description": "@lism-css/ui で提供する Details コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples"],
-		"keywords": ["Details", "details", "summary", "開閉"],
-		"snippet": "HTMLのdetails/summary要素をラップ。ネイティブのHTML要素を使用したアコーディオン。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Alert.mdx",
-		"title": "Alert",
-		"description": "@lism-css/ui で提供する Alert コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Only lism-css"],
-		"keywords": ["Alert", "アラート", "注意", "notice", "warning", "info"],
-		"snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
-	},
-	{
-		"sourcePath": "ui/Callout.mdx",
-		"title": "Callout",
-		"description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Only lism-css", "Only Core"],
-		"keywords": ["Callout", "コールアウト", "補足", "note", "注意書き"],
-		"snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Button.mdx",
-		"title": "Button",
-		"description": "@lism-css/ui で提供する Button コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Opt-in", "Only lism-css"],
-		"keywords": ["Button", "ボタン", "クリック", "outline", "action"],
-		"snippet": "ボタンコンポーネント。variant (outline 等) と keycolor でバリエーションを表現。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Badge.mdx",
-		"title": "Badge",
-		"description": "@lism-css/ui で提供する Badge コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Only lism-css"],
-		"keywords": ["Badge", "バッジ", "ラベル", "タグ", "status"],
-		"snippet": "バッジ (ラベル) コンポーネント。カテゴリやステータスの表示に使用。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Avatar.mdx",
-		"title": "Avatar",
-		"description": "@lism-css/ui で提供する Avatar コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Only lism-css"],
-		"keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸"],
-		"snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/Chat.mdx",
-		"title": "Chat",
-		"description": "@lism-css/ui で提供する Chat コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples", "Opt-in"],
-		"keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon"],
-		"snippet": "チャット風の吹き出しコンポーネント。会話形式のUI表現に使用。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/NavMenu.mdx",
-		"title": "NavMenu",
-		"description": "@lism-css/ui で提供する NavMenu コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples"],
-		"keywords": ["NavMenu", "ナビ", "メニュー", "navigation", "リンク"],
-		"snippet": "ナビゲーションメニュー。リンクリストの表示に使用。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/ShapeDivider.mdx",
-		"title": "ShapeDivider",
-		"description": "@lism-css/ui で提供する ShapeDivider コンポーネントについて解説します。",
-		"category": "ui",
-		"headings": ["How to use", "Examples"],
-		"keywords": ["ShapeDivider", "波", "wave", "区切り", "SVG", "セクション"],
-		"snippet": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。@lism-css/uiパッケージで提供。"
-	},
-	{
-		"sourcePath": "ui/examples/Card.mdx",
-		"title": "Card",
-		"description": "Lism CSS で実装するカード型コンテンツレイアウトの実装例です。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["Card", "カード", "example", "実装例"],
-		"snippet": "Lism CSS を使ったカードレイアウトの実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Banner.mdx",
-		"title": "Banner",
-		"description": "Banner の実装例。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["Banner", "バナー", "example", "hero"],
-		"snippet": "バナーの実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Hero.mdx",
-		"title": "Hero",
-		"description": "Hero セクションの実装例。",
-		"category": "ui",
-		"headings": ["Examples", "別ページで確認する"],
-		"keywords": ["Hero", "ヒーロー", "メインビジュアル", "example"],
-		"snippet": "ヒーローセクション（メインビジュアル）の実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/FAQ.mdx",
-		"title": "FAQ",
-		"description": "FAQ の実装例。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["FAQ", "よくある質問", "example", "accordion"],
-		"snippet": "FAQ（よくある質問）セクションの実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Steps.mdx",
-		"title": "Steps",
-		"description": "Steps の実装例。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["Steps", "ステップ", "手順", "example"],
-		"snippet": "ステップ（手順）表示の実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Timeline.mdx",
-		"title": "Timeline",
-		"description": "Lism CSS で実装するタイムラインレイアウトの実装例です。",
-		"category": "ui",
-		"headings": ["Create Component", "Usage"],
-		"keywords": ["Timeline", "タイムライン", "年表", "example"],
-		"snippet": "タイムライン表示の実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Breadcrumb.mdx",
-		"title": "Breadcrumb",
-		"description": "Breadcrumb の実装例。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["Breadcrumb", "パンくず", "ナビゲーション", "example"],
-		"snippet": "パンくずリストの実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/DividerLabel.mdx",
-		"title": "DividerLabel",
-		"description": "DividerLabel の実装例。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["DividerLabel", "区切り", "ラベル", "example"],
-		"snippet": "ラベル付き区切り線の実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Reel.mdx",
-		"title": "Reel",
-		"description": "Lism CSS で実装する、コンテンツを横スクロールで表示するリールコンポーネントの実装例です。",
-		"category": "ui",
-		"headings": ["Flex で実装する例", "Gridで実装する例", "ナビゲーションをつける", "大きい画面サイズでReelを解除する", "縦向きのリール"],
-		"keywords": ["Reel", "横スクロール", "scroll", "carousel", "example"],
-		"snippet": "横スクロール（リール）レイアウトの実装例。Flex/Grid両方の実装パターンを紹介。"
-	},
-	{
-		"sourcePath": "ui/examples/BalloonBox.mdx",
-		"title": "BalloonBox",
-		"description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
-		"category": "ui",
-		"headings": ["Import", "Props", "Usage"],
-		"keywords": ["BalloonBox", "吹き出し", "ふきだし", "balloon", "装飾", "ボックス", "example"],
-		"snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
-	},
-	{
-		"sourcePath": "ui/examples/Decorations.mdx",
-		"title": "Decorations",
-		"description": "Lism CSS で実装する装飾ボックスパターンの実装例です。",
-		"category": "ui",
-		"headings": ["Examples"],
-		"keywords": ["Decorations", "装飾", "デコレーション", "ボックス", "example"],
-		"snippet": "装飾ボックスの実装例。Call, Kakko, Sticky など様々な装飾パターンを紹介。"
-	},
-	{
-		"sourcePath": "ui/examples/List.mdx",
-		"title": "List",
-		"description": "Lism CSS で実装する、アイコン付き装飾リストの実装例です。",
-		"category": "ui",
-		"headings": ["Create Component", "Usage"],
-		"keywords": ["List", "リスト", "アイコン", "装飾リスト", "example"],
-		"snippet": "アイコンを使った装飾リストの作成例。List(.c--list)コンポーネントの実装と使い方を紹介。"
-	},
-	{
-		"sourcePath": "ui/examples/Others.mdx",
-		"title": "Others",
-		"description": "Lism CSS で実装する、ステップナビゲーションやメニュー表などその他のUIパターンの実装例です。",
-		"category": "ui",
-		"headings": ["独自ユーティリティクラスの作成例"],
-		"keywords": ["Others", "その他", "ステップ", "ナビゲーション", "メニュー", "example"],
-		"snippet": "ステップナビゲーションやメニュー表など、その他のUIパターンの実装例。"
-	},
-	{
-		"sourcePath": "ui/examples/Table.mdx",
-		"title": "Table",
-		"description": "Lism CSS で実装する、行・列の固定表示に対応した汎用テーブルレイアウトの実装例です。",
-		"category": "ui",
-		"headings": ["Create Component", "Usage"],
-		"keywords": ["Table", "テーブル", "表", "固定", "スクロール", "example"],
-		"snippet": "行・列の固定表示に対応した汎用Tableレイアウトの実装例。CSS変数でボーダースタイルを調整可能。"
-	}
+  {
+    "sourcePath": "overview.mdx",
+    "title": "概要",
+    "description": "Lism CSS の概要と特徴について解説します。",
+    "category": "guide",
+    "headings": ["Lism CSS の特徴", "Inspirations"],
+    "keywords": ["overview", "概要", "特徴", "レイアウトファースト", "ゼロビルド", "コンテナクエリ", "Every Layout", "framework"],
+    "snippet": "Lism CSS は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSSフレームワークです。レイアウトファーストなモジュール設計とCSS変数を組み合わせたレスポンシブなユーティリティ設計が特徴です。"
+  },
+  {
+    "sourcePath": "installation.mdx",
+    "title": "インストール",
+    "description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
+    "category": "guide",
+    "headings": ["CSS設計のみを導入したい場合", "専用のコンポーネントを使用したい場合", "AIツール連携 (MCP)"],
+    "keywords": ["install", "インストール", "CDN", "npm", "setup", "セットアップ", "導入", "MCP", "AI"],
+    "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。AIコーディングツール向けのMCPサーバーも提供。"
+  },
+  {
+    "sourcePath": "css-methodology.mdx",
+    "title": "CSS設計",
+    "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
+    "category": "guide",
+    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "命名規則について", "単語の省略について"],
+    "keywords": [
+      "CSS設計",
+      "methodology",
+      "レイヤー",
+      "layer",
+      "命名規則",
+      "naming",
+      "BEM",
+      "Prop 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) の命名規則を説明。"
+  },
+  {
+    "sourcePath": "tokens.mdx",
+    "title": "Design Tokens",
+    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
+    "category": "guide",
+    "headings": ["COLOR", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
+    "keywords": ["token", "トークン", "design token", "カラー", "スペーシング", "spacing", "color", "font-size", "shadow", "radius"],
+    "snippet": "タイポグラフィ、余白、カラー、シャドウなどの主要なプロパティに対してデザイントークンを定義。CSS変数で管理し、一貫性のあるデザインを実現。"
+  },
+  {
+    "sourcePath": "prop-class.mdx",
+    "title": "Prop Class",
+    "description": "CSSプロパティに紐づいた Prop Class の一覧とその使い方について解説します。",
+    "category": "props",
+    "headings": [
+      "このページの表の見方",
+      "Typography",
+      "Colors",
+      "Spacing",
+      "Width & Height",
+      "Displays",
+      "Positions",
+      "Layouts",
+      "Styling",
+      "Other CSS"
+    ],
+    "keywords": [
+      "prop class",
+      "utility",
+      "ユーティリティ",
+      "クラス",
+      "CSS property",
+      "g",
+      "p",
+      "m",
+      "fz",
+      "fw",
+      "ff",
+      "lh",
+      "d",
+      "ta",
+      "td",
+      "c",
+      "bgc",
+      "bd",
+      "bdrs",
+      "bxsh",
+      "w",
+      "h",
+      "pos",
+      "ov",
+      "ar",
+      "o",
+      "ai",
+      "jc",
+      "ac",
+      "fx",
+      "gt",
+      "gc",
+      "gr",
+      "z",
+      "gap",
+      "padding",
+      "margin",
+      "font-size",
+      "display",
+      "text-align",
+      "color",
+      "background",
+      "border",
+      "width",
+      "height",
+      "position",
+      "overflow",
+      "opacity",
+      "flex",
+      "grid"
+    ],
+    "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。"
+  },
+  {
+    "sourcePath": "responsive.mdx",
+    "title": "Prop Responsive",
+    "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
+    "category": "guide",
+    "headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
+    "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",
+    "description": "Lism CSS が提供する軽量な Reset CSS の内容と読み込み方法について解説します。",
+    "category": "guide",
+    "headings": [],
+    "keywords": ["reset", "リセット", "normalize", "reset css"],
+    "snippet": "Lism CSS に組み込まれたリセットCSS。reset.css レベルからサイト全体のCSS設計を担う。"
+  },
+  {
+    "sourcePath": "customize.mdx",
+    "title": "Customize",
+    "description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
+    "category": "guide",
+    "headings": ["@layerをオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
+    "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
+    "snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
+  },
+  {
+    "sourcePath": "utility-class.mdx",
+    "title": "Utilitiy 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 等を解説。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "Set Class",
+    "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
+    "category": "guide",
+    "headings": [],
+    "keywords": [
+      "set",
+      "set class",
+      "set--plain",
+      "set--shadow",
+      "set--transition",
+      "set--hov",
+      "set--bp",
+      "set--cqUnit",
+      "set--innerRs",
+      "set--gutter"
+    ],
+    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--cqUnit, set--innerRs, set--gutter を解説。"
+  },
+  {
+    "sourcePath": "module-class.mdx",
+    "title": "Module Class",
+    "description": "Lism CSS のモジュールクラス（is--, l--, a--, c--）の分類と使い方について解説します。",
+    "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) も解説。"
+  },
+  {
+    "sourcePath": "base-styles.mdx",
+    "title": "Base Styles",
+    "description": "@lism-base レイヤーで定義される Reset CSS やHTML要素のベーススタイルについて解説します。",
+    "category": "guide",
+    "headings": ["Reset CSS", "Base styles"],
+    "keywords": ["html", "base", "ベース", "スタイル", "要素", "reset"],
+    "snippet": "Lism CSS がHTML要素に対して適用するベーススタイルについて解説。Reset CSSと@lism-baseレイヤーで定義されるベーススタイルを紹介。"
+  },
+  {
+    "sourcePath": "changelog.mdx",
+    "title": "Changelog",
+    "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
+    "category": "guide",
+    "headings": [
+      "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 (大幅な変更)",
+      "v.0.7",
+      "v.0.7.1",
+      "v.0.7.2",
+      "v.0.7.3",
+      "v.0.6",
+      "v.0.5（大幅な変更）",
+      "~ v.0.3"
+    ],
+    "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
+  },
+  {
+    "sourcePath": "props/bd.mdx",
+    "title": "-bd",
+    "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
+    "category": "props",
+    "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",
+    "title": "-hov",
+    "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
+    "category": "props",
+    "headings": ["基本的な使い方", ".set--hov と特殊変数"],
+    "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
+    "snippet": "ホバー関連のProp。hov を使ったホバーエフェクトの設定方法。set--hovとset--transitionの活用、子要素へのホバー状態伝播を解説。"
+  },
+  {
+    "sourcePath": "props/max-sz.mdx",
+    "title": "サイズ制御クラス -max-sz:",
+    "description": "コンテンツの最大幅を制御する -max-sz ユーティリティクラスの使い方について解説します。",
+    "category": "props",
+    "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 の特殊クラスも解説。"
+  },
+  {
+    "sourcePath": "core-components/Lism.mdx",
+    "title": "Lism",
+    "description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "Lism Props", "補足"],
+    "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps", "HTML.button", "HTML.xxx"],
+    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+  },
+  {
+    "sourcePath": "core-components/Text.mdx",
+    "title": "Text",
+    "description": "<p>タグを出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "基本的な使い方"],
+    "keywords": ["Text", "テキスト", "paragraph", "p", "ブロック", "コンポーネント", "HTML.p", "HTML.xxx"],
+    "snippet": "<p>タグを出力するLismコンポーネント。<Lism as=\"p\">のエイリアス。as prop で div / blockquote / address / figcaption / pre に変更可能。"
+  },
+  {
+    "sourcePath": "core-components/Inline.mdx",
+    "title": "Inline",
+    "description": "<span>タグを出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "基本的な使い方"],
+    "keywords": ["Inline", "インライン", "span", "em", "strong", "コンポーネント", "HTML.span", "HTML.xxx"],
+    "snippet": "<span>タグを出力するLismコンポーネント。<Lism as=\"span\">のエイリアス。テキストの一部にスタイルを適用したい場合に使用。as prop で em / strong / small / code 等に変更可能。"
+  },
+  {
+    "sourcePath": "core-components/Group.mdx",
+    "title": "Group",
+    "description": "<div>タグを出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "基本的な使い方"],
+    "keywords": ["Group", "グループ", "div", "コンテナ", "コンポーネント", "HTML.div", "HTML.xxx"],
+    "snippet": "<div>タグを出力するLismコンポーネント。<Lism as=\"div\">のエイリアス。要素をグルーピングするための汎用コンテナ。as prop で section / article / figure / nav / aside 等に変更可能。"
+  },
+  {
+    "sourcePath": "core-components/Heading.mdx",
+    "title": "Heading",
+    "description": "見出しタグ（<h1>〜<h6>）を出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Props", "Import", "基本的な使い方", "見出しレベルの指定"],
+    "keywords": ["Heading", "見出し", "h1", "h2", "h3", "h4", "h5", "h6", "level", "コンポーネント", "HTML.h", "HTML.xxx"],
+    "snippet": "見出しタグを出力するLismコンポーネント。level プロパティで h1〜h6 を指定。デフォルトは h2。"
+  },
+  {
+    "sourcePath": "core-components/Link.mdx",
+    "title": "Link",
+    "description": "<a>タグを出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "基本的な使い方"],
+    "keywords": ["Link", "リンク", "a", "アンカー", "href", "コンポーネント", "HTML.a", "HTML.xxx"],
+    "snippet": "<a>タグを出力するLismコンポーネント。<Lism as=\"a\">のエイリアス。全ての Lism Props が使用可能。"
+  },
+  {
+    "sourcePath": "core-components/List.mdx",
+    "title": "List & ListItem",
+    "description": "リストタグ（<ul>, <li>）を出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import", "基本的な使い方", "番号付きリスト", "定義リスト"],
+    "keywords": ["List", "ListItem", "リスト", "ul", "ol", "li", "dl", "dt", "dd", "コンポーネント", "HTML.ul", "HTML.ol", "HTML.li", "HTML.xxx"],
+    "snippet": "<ul>タグを出力するListと<li>タグを出力するListItemのLismコンポーネント。as prop で ol / dl や li / dt / dd に変更可能。"
+  },
+  {
+    "sourcePath": "ui/DummyText.mdx",
+    "title": "DummyText",
+    "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
+    "category": "ui",
+    "headings": ["Props", "Import", "使用例"],
+    "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum"],
+    "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
+  },
+  {
+    "sourcePath": "ui/DummyImage.mdx",
+    "title": "DummyImage",
+    "description": "プレースホルダー用のダミー画像を出力するコンポーネントです。",
+    "category": "ui",
+    "headings": ["Import", "使用例"],
+    "keywords": ["DummyImage", "ダミー画像", "プレースホルダー", "テスト画像"],
+    "snippet": "cdn.lism-css.comからダミーのプレースホルダー画像を出力するコンポーネント。@lism-css/uiパッケージから提供。"
+  },
+  {
+    "sourcePath": "modules/l--box.mdx",
+    "title": "Box / l--box",
+    "description": "Lism CSS の Box モジュールについて解説します。コンテンツをグループ化するシンプルなレイアウトモジュールです。",
+    "category": "modules",
+    "headings": ["対応コンポーネント", "Usage"],
+    "keywords": ["Box", "ボックス", "layout", "レイアウト", "l--box"],
+    "snippet": "最も基本的なレイアウトモジュール。コンテンツをグループ化するだけのシンプルな汎用ボックス要素。l--box クラスが付与される。"
+  },
+  {
+    "sourcePath": "modules/l--flex.mdx",
+    "title": "Flex / l--flex",
+    "description": "Lism CSS の Flex モジュールについて解説します。コンテンツを Flexbox で配置するためのレイアウトモジュールです。",
+    "category": "modules",
+    "headings": ["CSS", "Import", "Props", "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",
+    "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"],
+    "snippet": "縦方向に要素を積み重ねるFlexレイアウト。flex-direction: column のFlex。ai='center'で内在的な中央寄せも可能。"
+  },
+  {
+    "sourcePath": "modules/l--grid.mdx",
+    "title": "Grid / l--grid",
+    "description": "Lism CSS の Grid モジュールについて解説します。コンテンツを CSS Grid で配置するためのレイアウトモジュールです。",
+    "category": "modules",
+    "headings": ["Import", "Props", "Usage"],
+    "keywords": [
+      "Grid",
+      "グリッド",
+      "layout",
+      "l--grid",
+      "CSS Grid",
+      "subgrid",
+      "display",
+      "display: grid",
+      "grid-template-columns",
+      "grid-template-rows"
+    ],
+    "snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridや-gt:repeatもサポート。"
+  },
+  {
+    "sourcePath": "modules/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"],
+    "snippet": "子要素を中央揃えにするレイアウト。place-items: center の Grid。高さがあれば上下左右中央揃え。"
+  },
+  {
+    "sourcePath": "modules/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"],
+    "snippet": "横方向に要素を並べ、自動的に折り返すFlexレイアウト。タグやバッジの並びに適している。"
+  },
+  {
+    "sourcePath": "modules/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"],
+    "snippet": "均等幅のカラムレイアウト。cols で列数を指定する Grid。レスポンシブ対応可能。subgridも活用可能。"
+  },
+  {
+    "sourcePath": "modules/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で余白打ち消しも可能。"
+  },
+  {
+    "sourcePath": "modules/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"],
+    "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
+  },
+  {
+    "sourcePath": "modules/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でアスペクト比を指定。"
+  },
+  {
+    "sourcePath": "modules/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で切り替えポイントを指定。"
+  },
+  {
+    "sourcePath": "modules/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'で反転も可能。"
+  },
+  {
+    "sourcePath": "modules/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"],
+    "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
+  },
+  {
+    "sourcePath": "modules/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プロパティも個別に指定可能。"
+  },
+  {
+    "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": "modules/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のプリセットサイズや任意値も設定可能。"
+  },
+  {
+    "sourcePath": "modules/a--icon.mdx",
+    "title": "Icon / a--icon",
+    "description": "Lism CSS の Icon モジュールについて解説します。SVG アイコンを出力するためのコンポーネントです。",
+    "category": "modules",
+    "headings": ["構造", "CSS", "Props", "Import", "Usage"],
+    "keywords": ["Icon", "アイコン", "SVG", "a--icon", "phosphor-icons"],
+    "snippet": "アイコンを表示するコンポーネント。外部パッケージ(react-icons, phosphor-icons等)のアイコン、プリセットアイコン、SVG直接記述、img指定に対応。"
+  },
+  {
+    "sourcePath": "modules/a--divider.mdx",
+    "title": "Divider / a--divider",
+    "description": "Lism CSS の Divider モジュールについて解説します。コンテンツ間に区切り線を描画するコンポーネントです。",
+    "category": "modules",
+    "headings": ["構造", "CSS", "Props", "Import", "Usage"],
+    "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border"],
+    "snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
+  },
+  {
+    "sourcePath": "core-components/Media.mdx",
+    "title": "Media",
+    "description": "画像や動画などのメディア要素を出力するLismコンポーネントです。",
+    "category": "core-components",
+    "headings": ["Import"],
+    "keywords": ["Media", "メディア", "img", "video", "iframe", "画像", "filter", "HTML.img", "HTML.xxx"],
+    "snippet": "img, video, iframe 等のメディア要素を統一的に扱うコンポーネント。objectPositionやfilter系はstyleで指定。Next.js/AstroのImageコンポーネントとの連携も可能。"
+  },
+  {
+    "sourcePath": "modules/a--spacer.mdx",
+    "title": "Spacer / a--spacer",
+    "description": "Lism CSS の Spacer モジュールについて解説します。要素間にスペースを確保するための空要素を出力します。",
+    "category": "modules",
+    "headings": ["構造", "Props", "Import", "Usage"],
+    "keywords": ["Spacer", "スペーサー", "余白", "空白", "a--spacer"],
+    "snippet": "空白を挿入するコンポーネント。w, h で幅・高さを指定。SPACEトークンの値も使用可能。"
+  },
+  {
+    "sourcePath": "modules/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'がデフォルトで付与される。"
+  },
+  {
+    "sourcePath": "ui/Accordion.mdx",
+    "title": "Accordion",
+    "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["基本構造", "ソースコード", "Import", "Props", "Examples"],
+    "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ"],
+    "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Modal.mdx",
+    "title": "Modal",
+    "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Props", "Usage"],
+    "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ"],
+    "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Tabs.mdx",
+    "title": "Tabs",
+    "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["基本構造", "CSS", "JavaScript", "Import", "Props", "Usage", "スタイルバリエーションの作成例", "Opt-in"],
+    "keywords": ["Tabs", "タブ", "切り替え", "panel"],
+    "snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Details.mdx",
+    "title": "Details",
+    "description": "@lism-css/ui で提供する Details コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples"],
+    "keywords": ["Details", "details", "summary", "開閉"],
+    "snippet": "HTMLのdetails/summary要素をラップ。ネイティブのHTML要素を使用したアコーディオン。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Alert.mdx",
+    "title": "Alert",
+    "description": "@lism-css/ui で提供する Alert コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Only lism-css"],
+    "keywords": ["Alert", "アラート", "注意", "notice", "warning", "info"],
+    "snippet": "短めの文言を目立たせて強調表示したい時に使えるコンポーネント。アイコンとキーカラーでバリエーション。"
+  },
+  {
+    "sourcePath": "ui/Callout.mdx",
+    "title": "Callout",
+    "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Only lism-css", "Only Core"],
+    "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き"],
+    "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Button.mdx",
+    "title": "Button",
+    "description": "@lism-css/ui で提供する Button コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Opt-in", "Only lism-css"],
+    "keywords": ["Button", "ボタン", "クリック", "outline", "action"],
+    "snippet": "ボタンコンポーネント。variant (outline 等) と keycolor でバリエーションを表現。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Badge.mdx",
+    "title": "Badge",
+    "description": "@lism-css/ui で提供する Badge コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Only lism-css"],
+    "keywords": ["Badge", "バッジ", "ラベル", "タグ", "status"],
+    "snippet": "バッジ (ラベル) コンポーネント。カテゴリやステータスの表示に使用。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Avatar.mdx",
+    "title": "Avatar",
+    "description": "@lism-css/ui で提供する Avatar コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Only lism-css"],
+    "keywords": ["Avatar", "アバター", "プロフィール", "画像", "丸"],
+    "snippet": "アバター画像用のコンポーネント。円形の画像表示に使用。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/Chat.mdx",
+    "title": "Chat",
+    "description": "@lism-css/ui で提供する Chat コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples", "Opt-in"],
+    "keywords": ["Chat", "チャット", "吹き出し", "会話", "balloon"],
+    "snippet": "チャット風の吹き出しコンポーネント。会話形式のUI表現に使用。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/NavMenu.mdx",
+    "title": "NavMenu",
+    "description": "@lism-css/ui で提供する NavMenu コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples"],
+    "keywords": ["NavMenu", "ナビ", "メニュー", "navigation", "リンク"],
+    "snippet": "ナビゲーションメニュー。リンクリストの表示に使用。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/ShapeDivider.mdx",
+    "title": "ShapeDivider",
+    "description": "@lism-css/ui で提供する ShapeDivider コンポーネントについて解説します。",
+    "category": "ui",
+    "headings": ["How to use", "Examples"],
+    "keywords": ["ShapeDivider", "波", "wave", "区切り", "SVG", "セクション"],
+    "snippet": "セクション間の波型などの装飾的な区切り要素。SVGベースの形状で区切りを表現。@lism-css/uiパッケージで提供。"
+  },
+  {
+    "sourcePath": "ui/examples/Card.mdx",
+    "title": "Card",
+    "description": "Lism CSS で実装するカード型コンテンツレイアウトの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["Card", "カード", "example", "実装例"],
+    "snippet": "Lism CSS を使ったカードレイアウトの実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Banner.mdx",
+    "title": "Banner",
+    "description": "Lism CSS で実装するバナーリンクの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["Banner", "バナー", "example", "hero"],
+    "snippet": "バナーの実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Hero.mdx",
+    "title": "Hero",
+    "description": "Lism CSS で実装するヒーローセクションの実装例です。",
+    "category": "ui",
+    "headings": ["Examples", "別ページで確認する"],
+    "keywords": ["Hero", "ヒーロー", "メインビジュアル", "example"],
+    "snippet": "ヒーローセクション（メインビジュアル）の実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/FAQ.mdx",
+    "title": "FAQ",
+    "description": "Lism CSS で実装するQ&A（よくある質問）レイアウトの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["FAQ", "よくある質問", "example", "accordion"],
+    "snippet": "FAQ（よくある質問）セクションの実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Steps.mdx",
+    "title": "Steps",
+    "description": "Lism CSS で実装する、手順を示すステップレイアウトの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["Steps", "ステップ", "手順", "example"],
+    "snippet": "ステップ（手順）表示の実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Timeline.mdx",
+    "title": "Timeline",
+    "description": "Lism CSS で実装するタイムラインレイアウトの実装例です。",
+    "category": "ui",
+    "headings": ["Create Component", "Usage"],
+    "keywords": ["Timeline", "タイムライン", "年表", "example"],
+    "snippet": "タイムライン表示の実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Breadcrumb.mdx",
+    "title": "Breadcrumb",
+    "description": "Lism CSS で実装するパンくずリストナビゲーションの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["Breadcrumb", "パンくず", "ナビゲーション", "example"],
+    "snippet": "パンくずリストの実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/DividerLabel.mdx",
+    "title": "DividerLabel",
+    "description": "Lism CSS で実装する、ラベル付き区切り線コンポーネントの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["DividerLabel", "区切り", "ラベル", "example"],
+    "snippet": "ラベル付き区切り線の実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Reel.mdx",
+    "title": "Reel",
+    "description": "Lism CSS で実装する、コンテンツを横スクロールで表示するリールコンポーネントの実装例です。",
+    "category": "ui",
+    "headings": ["Flex で実装する例", "Gridで実装する例", "ナビゲーションをつける", "大きい画面サイズでReelを解除する", "縦向きのリール"],
+    "keywords": ["Reel", "横スクロール", "scroll", "carousel", "example"],
+    "snippet": "横スクロール（リール）レイアウトの実装例。Flex/Grid両方の実装パターンを紹介。"
+  },
+  {
+    "sourcePath": "ui/examples/BalloonBox.mdx",
+    "title": "BalloonBox",
+    "description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
+    "category": "ui",
+    "headings": ["Import", "Props", "Usage"],
+    "keywords": ["BalloonBox", "吹き出し", "ふきだし", "balloon", "装飾", "ボックス", "example"],
+    "snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
+  },
+  {
+    "sourcePath": "ui/examples/Decorations.mdx",
+    "title": "Decorations",
+    "description": "Lism CSS で実装する装飾ボックスパターンの実装例です。",
+    "category": "ui",
+    "headings": ["Examples"],
+    "keywords": ["Decorations", "装飾", "デコレーション", "ボックス", "example"],
+    "snippet": "装飾ボックスの実装例。Call, Kakko, Sticky など様々な装飾パターンを紹介。"
+  },
+  {
+    "sourcePath": "ui/examples/List.mdx",
+    "title": "List",
+    "description": "Lism CSS で実装する、アイコン付き装飾リストの実装例です。",
+    "category": "ui",
+    "headings": ["Create Component", "Usage"],
+    "keywords": ["List", "リスト", "アイコン", "装飾リスト", "example"],
+    "snippet": "アイコンを使った装飾リストの作成例。List(.c--list)コンポーネントの実装と使い方を紹介。"
+  },
+  {
+    "sourcePath": "ui/examples/Others.mdx",
+    "title": "Others",
+    "description": "Lism CSS で実装する、ステップナビゲーションやメニュー表などその他のUIパターンの実装例です。",
+    "category": "ui",
+    "headings": ["独自ユーティリティクラスの作成例"],
+    "keywords": ["Others", "その他", "ステップ", "ナビゲーション", "メニュー", "example"],
+    "snippet": "ステップナビゲーションやメニュー表など、その他のUIパターンの実装例。"
+  },
+  {
+    "sourcePath": "ui/examples/Table.mdx",
+    "title": "Table",
+    "description": "Lism CSS で実装する、行・列の固定表示に対応した汎用テーブルレイアウトの実装例です。",
+    "category": "ui",
+    "headings": ["Create Component", "Usage"],
+    "keywords": ["Table", "テーブル", "表", "固定", "スクロール", "example"],
+    "snippet": "行・列の固定表示に対応した汎用Tableレイアウトの実装例。CSS変数でボーダースタイルを調整可能。"
+  }
 ]