@lism-css/mcp 0.12.0 → 0.14.0

package/dist/data/docs-index.json

@@ -4,25 +4,25 @@
     "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",
     "title": "CSS設計",
     "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
     "category": "guide",
-    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "命名規則について", "単語の省略について"],
+    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計"],
     "keywords": [
       "CSS設計",
       "methodology",
@@ -32,22 +32,51 @@
       "naming",
       "BEM",
       "Property Class",
-      "Module Class",
+      "Primitive Class",
+      "Component Class",
       "Set Class",
       "Utility Class",
       "省略",
       "Emmet"
     ],
-    "snippet": "CSSの階層構造を明確に定義。@layer lism-reset → lism-base → lism-modules → lism-custom → lism-utility の順。lism-custom はユーザー独自プレフィックスのクラス用レイヤー。Module Class (.l--name, .a--name 等)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
+    "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": "naming.mdx",
+    "title": "命名規則",
+    "description": "Lism CSS における Property Class の Prop 名・値名の省略ルールや、CSS変数の命名規則について解説します。",
+    "category": "guide",
+    "headings": ["CSS変数の命名規則", "クラスの命名規則", "`{prop}` の省略ルール", "`{value}` の省略ルール"],
+    "keywords": [
+      "命名規則",
+      "naming",
+      "省略",
+      "省略形",
+      "shorthand",
+      "Emmet",
+      "prop",
+      "value",
+      "CSS変数",
+      "カスタムプロパティ",
+      "Property Class",
+      "prefix",
+      "camelCase",
+      "token",
+      "breakpoint",
+      "方向指定",
+      "max-",
+      "min-"
+    ],
+    "snippet": "Lism CSS の命名規則をまとめたページ。CSS変数はトークン変数 `--{prop}--{token}`、Property Class 用変数 `--{prop}` / `--{prop}_{bp}`、状態管理用の内部変数 `--_{varName}` などの形式で統一。クラスはプレフィックス（`c--`, `a--`, `l--`, `is--`, `set--`, `u--`）で分類を示し、続く名称は camelCase。Prop 名は Emmet を参考に 1 文字プロパティ（p, m, g, c, f, w, h, d, o, v, i, t, b, l, r, z）やグループ略称 + サブプロパティ形式（fz, bgc, gtc 等）で省略。方向サフィックスは `-t` / `-b` / `-l` / `-r` / `-x` / `-y` / `-s` / `-e` を使用し、p/m のみ最初のハイフンを省略（pt, px, my 等）。値は基本的に CSS の実値をそのまま使用し、トークン値を使う場合は `--{prop}--{value}` の `{value}` 部分を採用。"
   },
   {
     "sourcePath": "tokens.mdx",
-    "title": "Design Tokens",
-    "description": "Lism CSS で定義されているデザイントークンの概要ページ。RADIUS, SHADOW, OPACITY, SIZE トークンと、カラー・タイポグラフィ・スペーシングの各サブページへのリンク。",
+    "title": "デザイントークン",
+    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
-    "headings": ["RADIUS", "SHADOW", "OPACITY", "SIZE"],
-    "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size"],
-    "snippet": "デザイントークンの概要。RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページで詳細を解説。"
+    "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": "tokens/colors.mdx",
@@ -63,7 +92,7 @@
     "title": "タイポグラフィトークン",
     "description": "Lism CSS で使用するフォントファミリー、フォントサイズ、行間などのタイポグラフィ関連のデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["FF: font-family", "FW: font-weight", "FZ: font-size", "LTS: letter-spacing"],
+    "headings": ["FF: font-family", "FW : font-weight", "FZ: font-size", "LH: line-height", "LTS: letter-spacing"],
     "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "font-size"],
     "snippet": "フォントサイズ（調和数列ベース）、文字間隔などのタイポグラフィ設計を解説。フォントサイズのスケーリング規則を紹介。"
   },
@@ -72,9 +101,9 @@
     "title": "ハーフレディング（line-height）",
     "description": "Lism CSS のハーフレディングによる line-height 管理の仕組みと、関連するデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["トークン", "ハーフレディング管理のメリット"],
+    "headings": ["仕組み", "トークン", "lh クラス", "ハーフレディング管理のメリット"],
     "keywords": ["line-height", "half-leading", "ハーフレディング", "行間", "lh", "--hl"],
-    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。--hl変数によりフォントサイズに依存しない一定の行間を実現。トークン（xs/s/base/l）とlhクラスの使い方を解説。"
+    "snippet": "line-heightをハーフレディング（文字上下の余白）で管理する仕組み。`calc(1em + var(--hl) * 2)` によりフォントサイズに依存しない一定の行間を実現。--hl--xs/s/base/l のトークンと -lh:{token} クラスの使い方を解説。"
   },
   {
     "sourcePath": "tokens/spacing.mdx",
@@ -89,7 +118,7 @@
     "sourcePath": "property-class.mdx",
     "title": "Property Class",
     "description": "CSSプロパティに紐づいた Property Class の一覧とその使い方について解説します。",
-    "category": "props",
+    "category": "property-class",
     "headings": [
       "このページの表の見方",
       "Typography",
@@ -100,6 +129,7 @@
       "Positions",
       "Layouts",
       "Styling",
+      "Background",
       "Other CSS"
     ],
     "keywords": [
@@ -109,6 +139,8 @@
       "クラス",
       "CSS property",
       "g",
+      "cg",
+      "rg",
       "p",
       "m",
       "fz",
@@ -152,7 +184,15 @@
       "overflow",
       "opacity",
       "flex",
-      "grid"
+      "grid",
+      "wm",
+      "writing-mode",
+      "iso",
+      "isolation",
+      "float",
+      "clear",
+      "whs",
+      "white-space"
     ],
     "snippet": "単一のCSSプロパティに対応するユーティリティクラス。-{prop}:{value} の形式（例: -g:5, -p:20, -fz:l）。HTMLでは class=\"-g:5\" のように使用。レスポンシブ対応の -_{bp} 形式もサポート。"
   },
@@ -185,24 +225,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",
@@ -210,24 +238,24 @@
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
     "headings": [],
-    "keywords": ["set", "set class", "set--plain", "set--shadow", "set--transition", "set--hov", "set--bp", "set--innerRs", "set--gutter"],
-    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, set--bp, set--innerRs, set--gutter を解説。"
+    "keywords": ["set", "set class", "set--plain", "set--shadow", "set--transition", "set--hov", "set--innerRs", "set--gutter"],
+    "snippet": "ベーススタイルの上書きやトークンの再定義、機能的なプロパティを初期セットするためのクラス (.set--{style})。set--plain, set--shadow, set--transition, set--hov, 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"],
+    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name}, .a--{name}, .is--{name} 等の命名規則。Trait Primitives (is--container, is--wrapper, is--layer, is--boxLink) も解説。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レイヤーで定義されるベーススタイルを紹介。"
   },
@@ -237,6 +265,13 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "`@lism-css/ui` v.0.13.1 (2026.04.15)",
+      "v.0.13.1 (2026.04.15)",
+      "`@lism-css/ui` v.0.13.0 (2026.04.14)",
+      "v.0.13.0 (2026.04.14)",
+      "`@lism-css/ui` v.0.12.0 (2026.04.10)",
+      "`@lism-css/ui` v.0.11.0 (2026.04.05)",
+      "v.0.12.0 (2026.04.10)",
       "v.0.11.0 (2026.04.05)",
       "v.0.10.5 (2026.04.05)",
       "v.0.10.4 (2026.04.04)",
@@ -256,28 +291,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",
-    "title": "サイズ制御クラス -max-sz:",
-    "description": "コンテンツの最大幅を制御する -max-sz ユーティリティクラスの使い方について解説します。",
-    "category": "props",
+    "sourcePath": "property-class/max-sz.mdx",
+    "title": "-max-sz",
+    "description": "コンテンツの最大幅を制御する -max-sz プロパティクラスの使い方について解説します。",
+    "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 の特殊クラスも解説。"
@@ -287,9 +322,39 @@
     "title": "Lism",
     "description": "LismのCSS設計に対応した様々なプロパティを受け取ることができる汎用的なコンポーネントです。",
     "category": "core-components",
-    "headings": ["Import", "Lism Props", "補足"],
-    "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "lismClass", "variant", "layout", "as", "exProps"],
-    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+    "headings": ["Import", "Lism Props"],
+    "keywords": ["Lism", "core", "コア", "基盤", "コンポーネント", "className", "layout", "atomic", "as", "exProps"],
+    "snippet": "全コンポーネントの基盤。Props システムによる CSS クラス・スタイルの自動変換を提供。className で c-- クラスや任意クラスを指定、layout で l-- クラス、atomic で a-- クラス（divider / spacer / decorator）を指定可能。as prop で出力要素や外部コンポーネントを指定可能。レスポンシブ指定は配列またはオブジェクト形式で対応。"
+  },
+  {
+    "sourcePath": "core-components/lism-props.mdx",
+    "title": "Lism Props",
+    "description": "<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。",
+    "category": "core-components",
+    "headings": ["as", "className", "layout / atomic", "set / util", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "keywords": [
+      "Lism Props",
+      "props",
+      "プロパティ",
+      "as",
+      "className",
+      "layout",
+      "atomic",
+      "set",
+      "util",
+      "exProps",
+      "CSS Props",
+      "Trait Props",
+      "isWrapper",
+      "isLayer",
+      "isBoxLink",
+      "isContainer",
+      "responsive",
+      "レスポンシブ",
+      "shorthand",
+      "省略記法"
+    ],
+    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で c-- クラス（Component Class）や任意クラスを直接指定、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isContainer などの Trait Props も提供。CSS Props (p, fz, c 等) は値の種類に応じて class / CSS変数 / style属性を自動で切り替え、配列・オブジェクト形式でレスポンシブ指定も可能。exProps で外部コンポーネント向け props を明示的に渡せる。生成される class 属性は className → a-- → l-- → is-- → set-- → u-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -355,38 +420,29 @@
     "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",
+    "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"],
+    "description": "l--stack は、複数の要素を Flex レイアウトで縦並びに配置するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
       "Stack",
       "スタック",
@@ -403,11 +459,11 @@
     "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",
       "グリッド",
@@ -421,14 +477,14 @@
       "grid-template-rows",
       "格子"
     ],
-    "snippet": "CSS Gridレイアウトを構成。gtc, gtr, gta, cols, rows 等で列・行を制御。subgridもサポート。均等タイルは l--tileGrid を参照。"
+    "snippet": "CSS Gridレイアウトを構成。subgridもサポート。均等タイルは l--tileGrid を参照。"
   },
   {
-    "sourcePath": "modules/l--tilegrid.mdx",
+    "sourcePath": "primitives/l--tileGrid.mdx",
     "title": "TileGrid / l--tileGrid",
-    "description": "Lism CSS の TileGrid モジュールについて解説します。均等な行列グリッド（タイル型レイアウト）を構成するためのレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["Props", "CSS", "Import", "Usage"],
+    "description": "l--tileGrid は、列数と行数を指定して均等なタイル型グリッドレイアウトを構成するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
       "TileGrid",
       "タイル",
@@ -445,32 +501,32 @@
       "tile",
       "均等"
     ],
-    "snippet": "colsとrowsで均等なタイル型グリッドレイアウトを構成。grid-template: repeat(rows, 1fr) / repeat(cols, 1fr) のGrid。ブレイクポイント指定も可能。"
+    "snippet": "colsとrowsで均等なタイル型グリッドレイアウトを構成。grid-template: repeat(rows, minmax(0, 1fr)) / repeat(cols, minmax(0, 1fr)) のGrid。ブレイクポイント指定も可能。"
   },
   {
-    "sourcePath": "modules/l--center.mdx",
+    "sourcePath": "primitives/l--center.mdx",
     "title": "Center / l--center",
-    "description": "Lism CSS の Center モジュールについて解説します。要素を上下左右中央揃えで配置するためのレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["CSS", "主なProps", "Import", "Usage"],
+    "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"],
+    "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"],
+    "description": "l--columns は、ブレイクポイントごとに指定した列数で表示できるカラムクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
       "Columns",
       "カラム",
@@ -487,20 +543,20 @@
     "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 を入れ子にする時の注意点"],
+    "description": "l--flow は、子要素間の余白を margin で管理するフロークラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage", "`l--flow` を入れ子にする時の注意点"],
     "keywords": ["Flow", "フロー", "コンテンツ", "記事", "l--flow", "本文", "is--skipFlow", "display: flow-root", "article body", "縦方向余白"],
-    "snippet": "コンテンツフロー用のレイアウト。display: flow-root で子要素間の余白を管理。見出しタグは余白が2倍。is--skipFlowで余白打ち消しも可能。"
+    "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"],
+    "description": "l--fluidCols は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
       "FluidCols",
       "流動カラム",
@@ -518,47 +574,47 @@
     "snippet": "子要素が最小幅に達すると自動的に折り返すグリッドレイアウト。メディアクエリに依存しない。cols で最小幅を指定。"
   },
   {
-    "sourcePath": "modules/l--frame.mdx",
+    "sourcePath": "primitives/l--frame.mdx",
     "title": "Frame / l--frame",
-    "description": "Lism CSS の Frame モジュールについて解説します。直下のメディア要素を自身のサイズに合わせて表示するレイアウトモジュールです。",
-    "category": "modules",
-    "headings": ["対応コンポーネント", "Usage"],
+    "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でアスペクト比を指定。"
+    "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"],
+    "description": "l--switchCols は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols", "responsive columns", "メディアクエリなし"],
-    "snippet": "複数列以上と1列への切り替えをメディアクエリを使わずに実装するレイアウト。breakSizeで切り替えポイントを指定。"
+    "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`を使って似たレイアウトを構成する例"],
+    "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で幅を制御。fxd='row-reverse'で反転も可能。"
+    "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"],
+    "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"],
+    "description": "is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
     "keywords": [
       "Layer",
       "レイヤー",
@@ -572,41 +628,53 @@
       "重ねる",
       "背景装飾"
     ],
-    "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。blur等のbackdrop-filterプロパティも個別に指定可能。"
+    "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"],
+    "description": "is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネントでの使い方", "Usage"],
     "keywords": ["Wrapper", "ラッパー", "コンテンツ幅", "max-width", "is--wrapper", "contentSize", "幅制限", "width limiter"],
-    "snippet": "コンテンツ幅を制限するラッパー要素。contentSizeで幅を指定。s, lのプリセットサイズや任意値も設定可能。"
+    "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"],
+    "description": "a--divider は、コンテンツ間に区切り線を描画するためのクラスです。",
+    "category": "primitives",
+    "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": ["Divider", "区切り線", "hr", "a--divider", "セパレーター", "border", "separator", "仕切り"],
     "snippet": "区切り線を表示するコンポーネント。水平・垂直の区切りを表現。bds, bdw, bdc でスタイルをカスタマイズ可能。"
   },
@@ -620,22 +688,22 @@
     "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"],
+    "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"],
+    "description": "a--decorator は、コンテンツを装飾するための空要素として使うクラスです。",
+    "category": "primitives",
+    "headings": ["Lismコンポーネント", "Usage"],
     "keywords": ["Decorator", "デコレーター", "装飾", "a--decorator", "visual decoration"],
-    "snippet": "装飾用の空要素を出力するコンポーネント。size, filter系プロパティ, clipPathに対応。aria-hidden='true'がデフォルトで付与される。"
+    "snippet": "装飾用の空要素を出力するコンポーネント。aria-hidden='true'がデフォルトで付与される。"
   },
   {
     "sourcePath": "ui/Accordion.mdx",
@@ -890,13 +958,13 @@
     "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
   },
   {
-    "sourcePath": "utility-class.mdx",
-    "title": "u--expandedLink",
-    "description": "クリック範囲を親要素に広げるユーティリティクラス。is--linkBoxと併用。",
-    "category": "guide",
-    "headings": ["u--expandedLink"],
-    "keywords": ["u--expandedLink", "クリック範囲", "リンク拡張", "linkBox"],
-    "snippet": "クリック範囲を親要素に広げるためのクラス。主にis--linkBoxと併用して、内部のリンクをボックス全体に広げるために使用。"
+    "sourcePath": "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",
@@ -989,12 +1057,37 @@
     "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter-size変数（初期値 var(--s30)）で余白量を制御。"
   },
   {
-    "sourcePath": "set-class.mdx",
-    "title": "set--bp",
-    "description": "特定のブレイクポイント以上でのみスタイルを適用するSetクラス。",
+    "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": ["set--bp"],
-    "keywords": ["set--bp", "ブレイクポイント", "メディアクエリ", "レスポンシブ", "--_is_sm", "条件付きスタイル"],
-    "snippet": "特定のブレイクポイント以上でのみスタイルを適用するクラス。var(--_is_sm) 等の変数を使い、レスポンシブ対応していないプロパティを条件付きで変化させるハック的手段。"
+    "headings": ["セットアップ", "アップデート", "ファイル構成"],
+    "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
+    "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
   }
 ]