@lism-css/mcp 0.14.0 → 0.15.0

package/dist/data/docs-index.json

@@ -13,7 +13,7 @@
     "title": "インストール",
     "description": "Lism CSS のインストール方法と基本的な使い方を解説します。",
     "category": "guide",
-    "headings": ["CSS設計のみを導入したい場合", "Lism専用のJSXコンポーネントを使用したい場合", "Lism UI の導入", "AIツール連携"],
+    "headings": ["CSS設計のみを導入する", "クイックスタート", "React/Astro コンポーネントを使用する", "Lism UI の導入", "AIツール連携"],
     "keywords": ["install", "インストール", "CDN", "npm", "setup", "セットアップ", "導入", "MCP", "AI"],
     "snippet": "CSSを読み込むだけでも導入でき、CDN経由でも利用可能。npm パッケージとしてインストールし、lism-css/react や lism-css/astro からコンポーネントをインポートして使用。UIコンポーネントは別パッケージ @lism-css/ui として提供。AIコーディングツール向けのSkills・MCPサーバーも提供。"
   },
@@ -22,7 +22,7 @@
     "title": "CSS設計",
     "description": "Lism CSS の階層構造やクラス設計の方針など、CSS設計の全体像について解説します。",
     "category": "guide",
-    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計"],
+    "headings": ["Lism CSSの階層構造", "デザイントークン", "CSSのクラス設計", "独自クラスの命名と定義場所", "動的な状態管理はdata属性"],
     "keywords": [
       "CSS設計",
       "methodology",
@@ -33,13 +33,14 @@
       "BEM",
       "Property Class",
       "Primitive Class",
+      "Trait Class",
       "Component Class",
       "Set Class",
       "Utility Class",
       "省略",
       "Emmet"
     ],
-    "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) の命名規則を説明。"
+    "snippet": "CSSの階層構造を明確に定義。@layer lism-base → lism-trait → lism-primitive → lism-component → lism-custom → lism-utility の順。Primitive Class (.l--name, .a--name)、Trait Class (.is--name, .has--name)、Component Class (.c--name)、Property Class (.-prop:value)、Set Class (.set--name) の命名規則を説明。"
   },
   {
     "sourcePath": "naming.mdx",
@@ -130,7 +131,8 @@
       "Layouts",
       "Styling",
       "Background",
-      "Other CSS"
+      "Other Properties",
+      "hover"
     ],
     "keywords": [
       "property class",
@@ -228,8 +230,8 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "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"],
+    "headings": ["u--cbox", "u--trim & u--trimChildren", "u--srOnly", "u--collapseGrid", "u--clipText", "Opt-in"],
+    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--collapseGrid", "u--clipText"],
     "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--collapseGrid 等を解説。"
   },
   {
@@ -238,17 +240,17 @@
     "description": "ベーススタイルの上書きやトークン再定義に使用する set-- 形式のユーティリティクラスについて解説します。",
     "category": "guide",
     "headings": [],
-    "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 を解説。"
+    "keywords": ["set", "set class", "set--plain", "set--revert", "set--var:bxsh", "set--var:hov", "set--var:bdrsInner"],
+    "snippet": "HTML 要素の基礎スタイリングや変数セットを行うためのクラス (.set--{style})。set--plain / set--revert（基礎スタイリング）と set--var:bxsh / set--var:hov / set--var:bdrsInner（変数のセット）の 2 カテゴリで解説。"
   },
   {
     "sourcePath": "primitives.mdx",
     "title": "Primitive Class",
-    "description": "Lism CSS のプリミティブクラス（is--, l--, a--）の分類と使い方について解説します。",
+    "description": "Lism CSS のプリミティブクラス（l--, a--）の分類と使い方について解説します。",
     "category": "guide",
-    "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）に配置される。"
+    "headings": ["Layout Primitives", "Atomic Primitives"],
+    "keywords": ["primitive", "プリミティブ", "layout", "レイアウト", "class", "l--", "a--"],
+    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name} (Layout Primitives) と .a--{name} (Atomic Primitives) の命名規則を説明。"
   },
   {
     "sourcePath": "base-styles.mdx",
@@ -265,6 +267,8 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "`@lism-css/ui` v.0.14.0 (2026.04.17)",
+      "v.0.14.0 (2026.04.17)",
       "`@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)",
@@ -304,9 +308,9 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": ["基本的な使い方", "`.set--hov` と `-hov:to:xxx`"],
-    "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
-    "snippet": "ホバー関連のProp。-hov:{prop} クラスでホバーエフェクトを設定。set--transition との組み合わせでアニメーション実現。set--hov と -hov:to:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
+    "headings": [".-hov:-{prop} の使い方", ".-hov:{preset} の使い方", ".-hov:in:{preset} の使い方", "トランジションを設定する方法"],
+    "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--var:hov", "has--transition", "transition"],
+    "snippet": "ホバー関連のProp。-hov:-{prop} クラスでホバーエフェクトを設定。has--transition との組み合わせでアニメーション実現。set--var:hov と -hov:in:xxx クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
   {
     "sourcePath": "property-class/max-sz.mdx",
@@ -331,7 +335,7 @@
     "title": "Lism Props",
     "description": "<Lism> 系コンポーネントが受け取る、Lism CSS 専用プロパティの一覧と使い方です。",
     "category": "core-components",
-    "headings": ["as", "className", "layout / atomic", "set / util", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
+    "headings": ["as", "className", "set / util", "layout / atomic", "Trait Props", "CSS Props", "exProps", "クラスの出力順"],
     "keywords": [
       "Lism Props",
       "props",
@@ -349,12 +353,15 @@
       "isLayer",
       "isBoxLink",
       "isContainer",
+      "hasTransition",
+      "hasGutter",
+      "hasSnap",
       "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-- → - の順で出力される。"
+    "snippet": "<Lism>系コンポーネントが受け取るLism CSS専用プロパティの解説。as で出力要素や外部コンポーネントを指定、className で c-- クラス（Component Class）や任意クラスを直接指定、layout / atomic で l-- / a-- クラス、set / util で set-- / u-- クラスを指定（'-' prefix で除外可）。isWrapper, isLayer, isBoxLink, isContainer, hasTransition, hasGutter, hasSnap などの Trait Props も提供。CSS Props (p, fz, c 等) は値の種類に応じて class / CSS変数 / style属性を自動で切り替え、配列・オブジェクト形式でレスポンシブ指定も可能。exProps で外部コンポーネント向け props を明示的に渡せる。生成される class 属性は className → a-- → l-- → set-- → is-- / has-- → u-- → - の順で出力される。"
   },
   {
     "sourcePath": "core-components/Text.mdx",
@@ -415,7 +422,7 @@
     "title": "DummyText",
     "description": "プロトタイピングやデザインモックアップ用のダミーテキストを出力するコンポーネントです。",
     "category": "ui",
-    "headings": ["Props", "Import", "使用例"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["DummyText", "ダミー", "テスト", "プレビュー", "プレースホルダー", "lorem ipsum", "placeholder"],
     "snippet": "ダミーテキストを生成するコンポーネント。複数の言語とテキスト長に対応。@lism-css/uiパッケージから提供。"
   },
@@ -601,7 +608,7 @@
     "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。メディアクエリ・コンテナクエリに依存せず自動で切り替わる。"
   },
   {
-    "sourcePath": "primitives/is--container.mdx",
+    "sourcePath": "trait-class/is--container.mdx",
     "title": "Container / is--container",
     "description": "is--container は、container-type を宣言してコンテナクエリを有効にするためのクラスです。",
     "category": "primitives",
@@ -610,7 +617,7 @@
     "snippet": "コンテナクエリの基準要素。container-typeをセットし、子要素のレスポンシブ対応の基準となる。isContainerプロパティでどのコンポーネントからでも呼び出し可能。"
   },
   {
-    "sourcePath": "primitives/is--layer.mdx",
+    "sourcePath": "trait-class/is--layer.mdx",
     "title": "Layer / is--layer",
     "description": "is--layer は、absoluteで親要素の上に被せて配置するオーバーレイ用のクラスです。",
     "category": "primitives",
@@ -631,7 +638,7 @@
     "snippet": "親要素に対して絶対配置で重なるレイヤー要素。オーバーレイや背景装飾に使用。backdrop-filterの活用も解説。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "BoxLink / is--boxLink",
     "description": "is--boxLink は、ボックス全体をクリック可能にするクラスです。",
     "category": "primitives",
@@ -652,7 +659,7 @@
     "snippet": "ボックス全体をリンク領域にする。hrefを指定してaタグにする方法と、内部にis--coverLink（旧u--expandedLink）を配置する方法の2通りがある。"
   },
   {
-    "sourcePath": "primitives/is--wrapper.mdx",
+    "sourcePath": "trait-class/is--wrapper.mdx",
     "title": "Wrapper / is--wrapper",
     "description": "is--wrapper は、その直下のコンテンツ幅を一括制御できるクラスです。",
     "category": "primitives",
@@ -710,7 +717,7 @@
     "title": "Accordion",
     "description": "@lism-css/ui で提供する Accordion コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["基本構造", "ソースコード", "Import", "Props", "Examples"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["Accordion", "アコーディオン", "開閉", "toggle", "FAQ", "折りたたみ", "collapsible"],
     "snippet": "クリックでコンテンツの開閉を切り替えるアコーディオンUI。@lism-css/uiパッケージで提供。"
   },
@@ -719,7 +726,7 @@
     "title": "Modal",
     "description": "@lism-css/ui で提供する Modal コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Props", "Usage"],
+    "headings": ["How to use", "Examples"],
     "keywords": ["Modal", "モーダル", "dialog", "ダイアログ", "ポップアップ", "popup"],
     "snippet": "モーダルダイアログUI。dialog要素を使用。@lism-css/uiパッケージで提供。"
   },
@@ -728,7 +735,7 @@
     "title": "Tabs",
     "description": "@lism-css/ui で提供する Tabs コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["基本構造", "CSS", "JavaScript", "Import", "Props", "Usage", "スタイルバリエーションの作成例", "Opt-in"],
+    "headings": ["How to use", "Examples", "Opt-in"],
     "keywords": ["Tabs", "タブ", "切り替え", "panel", "tab navigation"],
     "snippet": "タブ切り替えUI。タブをクリックしてコンテンツパネルを切り替える。@lism-css/uiパッケージで提供。"
   },
@@ -755,7 +762,7 @@
     "title": "Callout",
     "description": "@lism-css/ui で提供する Callout コンポーネントについて解説します。",
     "category": "ui",
-    "headings": ["How to use", "Examples", "Only lism-css", "Only Core"],
+    "headings": ["How to use", "Examples", "Only lism-css"],
     "keywords": ["Callout", "コールアウト", "補足", "note", "注意書き", "強調ボックス", "highlight"],
     "snippet": "記事の中で重要なポイントを示すためのコンポーネント。@lism-css/uiパッケージで提供。"
   },
@@ -899,7 +906,7 @@
     "title": "BalloonBox",
     "description": "Lism CSS で実装するふきだし風装飾ボックスの実装例です。",
     "category": "ui",
-    "headings": ["Import", "Props", "Usage"],
+    "headings": ["Source Code", "Props", "Usage"],
     "keywords": ["BalloonBox", "吹き出し", "ふきだし", "balloon", "装飾", "ボックス", "example"],
     "snippet": "ふきだし風装飾ボックスの作成例。variant でふきだしの方向、keycolor で色を指定。"
   },
@@ -958,7 +965,7 @@
     "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
   },
   {
-    "sourcePath": "primitives/is--boxLink.mdx",
+    "sourcePath": "trait-class/is--boxLink.mdx",
     "title": "is--coverLink",
     "description": "クリック範囲を親要素全体に広げるためのクラス。is--boxLinkと併用。",
     "category": "primitives",
@@ -985,12 +992,12 @@
     "snippet": "box-shadowで子要素間に区切りボーダーを表示。p='0' ov='clip'で周囲のボーダーを非表示にでき、bd追加でカレンダー風の表現も可能。"
   },
   {
-    "sourcePath": "utility-class.mdx",
-    "title": "u--snap",
-    "description": "scroll-snap系プロパティをCSS変数で制御するユーティリティクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--snap",
+    "description": "scroll-snap系プロパティをCSS変数で制御する Trait クラス。",
     "category": "guide",
-    "headings": ["u--snap"],
-    "keywords": ["u--snap", "スクロールスナップ", "scroll-snap", "カルーセル"],
+    "headings": ["has--snap"],
+    "keywords": ["has--snap", "スクロールスナップ", "scroll-snap", "カルーセル"],
     "snippet": "scroll-snap-type等のプロパティをCSS変数でセットできるようにするクラス。"
   },
   {
@@ -1013,47 +1020,56 @@
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--shadow",
+    "title": "set--revert",
+    "description": "ブラウザデフォルトの見た目を明示的に復活させるSetクラス。",
+    "category": "guide",
+    "headings": ["set--revert"],
+    "keywords": ["set--revert", "revert", "リバート", "list-style", "ul", "ol", "箇条書き"],
+    "snippet": "ブラウザデフォルトの見た目を明示的に復活させるクラス。単体ではスタイルを持たず、現状は ul / ol のみ対象。Property Class 付きリストで箇条書き表示を維持したい場合に使用。"
+  },
+  {
+    "sourcePath": "set-class.mdx",
+    "title": "set--var:bxsh",
     "description": "シャドウを構成するCSS変数を再定義するSetクラス。",
     "category": "guide",
-    "headings": ["set--shadow"],
-    "keywords": ["set--shadow", "シャドウ", "影", "box-shadow", "--shc"],
-    "snippet": "set--shadowクラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
+    "headings": ["set--var:bxsh"],
+    "keywords": ["set--var:bxsh", "シャドウ", "影", "box-shadow", "--shc"],
+    "snippet": "set--var:bxsh クラスを指定した要素では --bxsh-- 変数が再定義される。--shc変数でシャドウの色味をカスタマイズ可能。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--hov",
+    "title": "set--var:hov",
     "description": "ホバー状態の判定変数（--_isHov, --_notHov）をセットするSetクラス。",
     "category": "guide",
-    "headings": ["set--hov"],
-    "keywords": ["set--hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
+    "headings": ["set--var:hov"],
+    "keywords": ["set--var:hov", "ホバー", "hover", "--_isHov", "--_notHov", "空変数トリック", "子要素ホバー"],
     "snippet": "hover/focus-within状態を空変数トリックで判定。var(--_isHov, 値)でhover時のみスタイル適用。親要素に付与して子要素のホバースタイルを制御可能。"
   },
   {
-    "sourcePath": "set-class.mdx",
-    "title": "set--transition",
-    "description": "CSS変数を用いてtransitionプロパティをセットするSetクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--transition",
+    "description": "CSS変数を用いてtransitionプロパティをセットする Trait クラス。",
     "category": "guide",
-    "headings": ["set--transition"],
-    "keywords": ["set--transition", "トランジション", "アニメーション", "transition"],
-    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--hovと組み合わせてスムーズなホバーアニメーションを実現。"
+    "headings": ["has--transition"],
+    "keywords": ["has--transition", "トランジション", "アニメーション", "transition"],
+    "snippet": "専用のCSS変数を用いてtransitionプロパティをセットするクラス。set--var:hov と組み合わせてスムーズなホバーアニメーションを実現。"
   },
   {
     "sourcePath": "set-class.mdx",
-    "title": "set--innerRs",
+    "title": "set--var:bdrsInner",
     "description": "親要素の角丸とPaddingから内側の角丸を自動計算するSetクラス。",
     "category": "guide",
-    "headings": ["set--innerRs"],
-    "keywords": ["set--innerRs", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
+    "headings": ["set--var:bdrsInner"],
+    "keywords": ["set--var:bdrsInner", "角丸", "内側角丸", "border-radius", "自動計算", "--bdrs--inner"],
     "snippet": "親要素の --bdrs と --p から内側の角丸 --bdrs--inner を自動計算。子要素で -bdrs:inner を使って適用。レスポンシブ対応。"
   },
   {
-    "sourcePath": "set-class.mdx",
-    "title": "set--gutter",
-    "description": "コンテンツの左右に統一した余白をつけるSetクラス。",
+    "sourcePath": "trait-class.mdx",
+    "title": "has--gutter",
+    "description": "コンテンツの左右に統一した余白をつける Trait クラス。",
     "category": "guide",
-    "headings": ["set--gutter"],
-    "keywords": ["set--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
+    "headings": ["has--gutter"],
+    "keywords": ["has--gutter", "ガター", "左右余白", "サイド余白", "padding", "--gutter-size"],
     "snippet": "サイト全体で統一した左右余白を確保するクラス。--gutter-size変数（初期値 var(--s30)）で余白量を制御。"
   },
   {
@@ -1086,8 +1102,41 @@
     "title": "Skills",
     "description": "プロジェクトにSKILL.mdファイルを配置して、AIエージェントに Lism CSS の設計ルール・Props・トークン・命名規則を伝える方法。",
     "category": "guide",
-    "headings": ["セットアップ", "アップデート", "ファイル構成"],
+    "headings": ["セットアップ"],
     "keywords": ["skills", "SKILL.md", "AIエージェント", "設計ルール", "Claude", "コーディング支援"],
     "snippet": "プロジェクトにSKILL.mdファイルを配置することでAIエージェントにLism CSSの設計ルール・Props・トークン・命名規則を伝えられる。npxコマンドで導入・アップデート可能。"
+  },
+  {
+    "sourcePath": "trait-class.mdx",
+    "title": "Trait Class",
+    "description": "役割宣言の is--* と機能付与の has--* からなる Trait Class について解説します。",
+    "category": "guide",
+    "headings": ["`is--*`（役割宣言）", "`has--*`（機能付与）", "has--transition", "has--gutter", "has--snap", "has--mask"],
+    "keywords": [
+      "trait",
+      "trait class",
+      "is--",
+      "has--",
+      "is--container",
+      "is--wrapper",
+      "is--layer",
+      "is--boxLink",
+      "has--transition",
+      "has--gutter",
+      "has--snap",
+      "has--mask",
+      "役割宣言",
+      "機能付与"
+    ],
+    "snippet": "Trait Class は要素に「役割」を宣言（is--*）したり「機能」を付与（has--*）するためのクラス群。@layer lism-trait に属する。is--container, is--wrapper, is--layer, is--boxLink, has--transition, has--gutter, has--snap, has--mask を提供。"
+  },
+  {
+    "sourcePath": "trait-class.mdx",
+    "title": "has--mask",
+    "description": "--maskImg 変数と組み合わせて、自身にマスクを適用する Trait クラス。",
+    "category": "guide",
+    "headings": ["has--mask"],
+    "keywords": ["has--mask", "マスク", "mask", "--maskImg", "--maskPos", "--maskSize", "mask-image"],
+    "snippet": "--maskImg変数にSVG等を指定して自身にマスクを適用するクラス。--maskPos, --maskSize, --maskRepeat 変数でマスクの表示をコントロール可能。"
   }
 ]

package/dist/data/guides/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: lism-css-guide
-description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIやページレイアウトの実装・コーディング、JSX・React・Astroでコンポーネントを実装・編集する時に参照。ユーティリティクラス・デザイントークン・レイアウトプリミティブ・命名規則・CSSのLayer規則・レスポンシブ対応・ベーススタイリングのルール・CSS設計を提供する。"
+description: "Lism CSS の設計・実装に関するガイド。CSSの編集・追加、UIコンポーネントやレイアウトの実装・編集時に参照。c--*, l--*, a--*, is--*, has--*, set--*, u--* -prop:value 形式のクラス・トークン(CSS変数)・命名規則・Layer規則・レスポンシブ対応について調べる時にも参照。
 ---
 
 # Lism CSS Best Practices
@@ -9,7 +9,7 @@ description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIや
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.14.0` / `@lism-css/ui@0.14.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.15.0` / `@lism-css/ui@0.15.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview/
 
@@ -19,7 +19,7 @@ description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIや
 ### CDNでCSSファイルのみ読み込む場合
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.14.0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.15.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
@@ -78,7 +78,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 | NG | OK | 理由 |
 |----|-----|------|
 | `<Heading level={3}>` | `<Heading level="3">` | `level` は文字列型（`'1'`〜`'6'`） |
-| `hov="shadow"` | `hov="bxsh"` | Lism の省略名は `bxsh`（box-shadow） |
+| `hov="shadow"` | `hov="-bxsh"` | Lism の省略名は `bxsh`（box-shadow） |
 | `bgc="secondary"` | `bgc="base-2"` | カラートークンの間違い |
 | `p="8"`, `g="6"` | `p="20"`, `g="10"` | スペーストークンの間違い |
 
@@ -104,18 +104,19 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - [naming.md](./naming.md) — 命名規則の詳細。（CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルール）
 - [base-styles.md](./base-styles.md) — HTML要素のベーススタイリング。（Reset CSSやHTML要素の基本スタイルをカスタマイズできるCSS変数）
 - [set-class.md](./set-class.md) — ベーススタイル・変数セットに使用する`set--` クラスの一覧と用途。
-- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`is--`/`l--`/`a--`）の一覧と用途。
+- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`l--`/`a--`）の一覧と用途。
+- [trait-class.md](./trait-class.md) — 要素に役割・機能を宣言する Trait クラス（`is--`/`has--`）の一覧と用途。
 - [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
 - [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
 - [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
 - [components-core.md](./components-core.md) — `lism-css`パッケージに含まれるコアコンポーネントの一覧と用途。（React, Astroで使える`<Lism>`・Lism Props・getLismProps ）
 - [components-ui.md](./components-ui.md) — `@lism-css/ui`パッケージに含まれるUIコンポーネント（Accordion・Modal・Tabs・Button 等）の Props・構造とCLIコマンドによるインストール方法。
+- [customize.md](./customize.md) — SCSS変数の上書きによる、lism-cssのコアCSSの挙動カスタマイズ方法・`lism.config.js` によるコアコンポーネント挙動のカスタマイズ方法。
 
 これら各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。
 
-### Primitive 単位の詳細リファレンス
+### クラス単位の詳細リファレンス
 
-`l--*` / `is--*` / `a--*` クラスや対応するコンポーネント（`<Flex>`, `<Grid>` 等）を使ってUIを実装する時は、以下の Primitive 別ファイルを参照してください。
 
 **Layout Primitives**
 
@@ -133,12 +134,19 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `l--switchCols` / `<SwitchCols>`: [primitives/l--switchCols.md](./primitives/l--switchCols.md)
 - `l--sideMain` / `<SideMain>`: [primitives/l--sideMain.md](./primitives/l--sideMain.md)
 
-**Trait Primitives**
+**Trait Class (is--)**
 
-- `is--container` / `<Container>`: [primitives/is--container.md](./primitives/is--container.md)
-- `is--wrapper` / `<Wrapper>`: [primitives/is--wrapper.md](./primitives/is--wrapper.md)
-- `is--layer` / `<Layer>`: [primitives/is--layer.md](./primitives/is--layer.md)
-- `is--boxLink` / `<BoxLink>`: [primitives/is--boxLink.md](./primitives/is--boxLink.md)
+- `is--container` / `<Container>`: [trait-class/is--container.md](./trait-class/is--container.md)
+- `is--wrapper` / `<Wrapper>`: [trait-class/is--wrapper.md](./trait-class/is--wrapper.md)
+- `is--layer` / `<Layer>`: [trait-class/is--layer.md](./trait-class/is--layer.md)
+- `is--boxLink` / `<BoxLink>`: [trait-class/is--boxLink.md](./trait-class/is--boxLink.md)
+
+**Trait Class (has--)**
+
+- `has--transition` (`hasTransition` prop): [trait-class/has--transition.md](./trait-class/has--transition.md)
+- `has--gutter` (`hasGutter` prop): [trait-class/has--gutter.md](./trait-class/has--gutter.md)
+- `has--snap` (`hasSnap` prop): [trait-class/has--snap.md](./trait-class/has--snap.md)
+- `has--mask` (`hasMask` prop): [trait-class/has--mask.md](./trait-class/has--mask.md)
 
 **Atomic Primitives**
 
@@ -147,8 +155,14 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `a--spacer` / `<Spacer>`: [primitives/a--spacer.md](./primitives/a--spacer.md)
 - `a--decorator` / `<Decorator>`: [primitives/a--decorator.md](./primitives/a--decorator.md)
 
+**Property Class（特殊仕様）**
+
+- `-bd` / `-bd-{side}` 系: [property-class/bd.md](./property-class/bd.md)
+- `-hov:*` 系: [property-class/hov.md](./property-class/hov.md)
+- `-max-sz:full` / `-max-sz:container`: [property-class/max-sz.md](./property-class/max-sz.md)
+
 
 ## このスキルファイル自身のアップデート方法
 
 `skills add lism-css/lism-css` を再実行してください。
-更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/.claude/skills/lism-css-guide) を直接チェックしてください。
+更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/skills/lism-css-guide) を直接チェックしてください。

package/dist/data/guides/base-styles.md

@@ -71,6 +71,8 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 
 ### リスト（ul, ol）
 
+class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動で復活する（`_html.scss`）。Property Class のみが付いた `ul` / `ol` では list-style が消えたままになるため、箇条書き表示を維持したい場合は [`set--revert`](./set-class.md#set--revert) を付与する。
+
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
 | `--list-px-s` | `var(--s30)` | リストの `padding-inline-start` |

package/dist/data/guides/components-core.md

@@ -16,7 +16,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 - [Lism Props](#lism-props)
 - [セマンティックコンポーネント](#セマンティックコンポーネント)
 - [Atomic Primitives](#atomic-primitives)
-- [Trait Primitives](#trait-primitives)
+- [Trait Components](#trait-components)
 - [Layout Primitives](#layout-primitives)
 - [`getLismProps()`](#getlismprops--外部コンポーネントとの連携)
 
@@ -55,7 +55,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | `variant` | `lismClass` 先頭クラスに対する BEM Modifier を付与（`c--` 専用。`a--` / `l--` には展開されない） | `variant="secondary"` |
 | `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
 | `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
-| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="gutter"`, `set="transition plain"`, `set="-plain"` |
+| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="plain"`, `set="var:hov var:bxsh"`, `set="-plain"` |
 | `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
 | `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
 
@@ -81,12 +81,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 // → p, fz は Lism が処理、size は HogeIcon に直接渡される
 
 // set でセットクラスを付与（layout と同じ要領）
-<Box set="shadow" p="30">...</Box>
-// → <div class="l--box set--shadow -p:30">...</div>
+<Box set="var:bxsh" p="30">...</Box>
+// → <div class="l--box set--var:bxsh -p:30">...</div>
 
 // set を複数指定（スペース区切り）
-<Stack set="shadow hov" p="30">...</Stack>
-// → <div class="l--stack set--shadow set--hov -p:30">...</div>
+<Stack set="var:bxsh var:hov" p="30">...</Stack>
+// → <div class="l--stack set--var:bxsh set--var:hov -p:30">...</div>
 
 // `-` prefix で除外（コンポーネント内部で適用済みの set を打ち消す用途）
 <AccordionButton set="-plain">...</AccordionButton>
@@ -113,7 +113,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 | 値 | 出力形式 | 例 |
 |------|------|-----|
 | トークン値・プリセット値 | `-{prop}:{value}` クラスのみ | `fz='l'` → `class="-fz:l"` |
-| `true` または `"-"` | `-{prop}` クラスのみ（変数なし） | `bd` / `bd='-'` → `class="-bd"` |
+| `true` | `-{prop}` クラスのみ（変数なし） | `bd` / `bd={true}` → `class="-bd"` |
 | `:` で始まる値 | 強制的にクラス化 | `p=':hoge'` → `class="-p:hoge"` |
 | その他の値（レスポンシブ対応プロパティ） | `-{prop}` + `--{prop}` | `fz='20px'` → `class="-fz"` + `style="--fz:20px"` |
 | その他の値（レスポンシブ非対応プロパティ） | `style` 属性に直接出力 | `o='0.7'` → `style="opacity:0.7"` |
@@ -139,8 +139,8 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 <Lism bd bdc="#000" bdw="2px">...</Lism>
 // 出力 → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>
 
-// `-` でクラスだけ出力（変数は親から継承したい場合などに使う）
-<Lism p='-' bdrs>...</Lism>
+// `true` でクラスだけ出力（変数は親から継承したい場合などに使う）
+<Lism p bdrs>...</Lism>
 // 出力 → <div class="-p -bdrs">...</div>
 
 // `:` で強制ユーティリティクラス化
@@ -177,7 +177,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 
 ### Trait Props
 
-Trait Primitives クラス（`is--*`）を出力するためのプロパティ群です。
+Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ群です。
 
 | Prop | 出力クラス |
 |------|-----------|
@@ -190,6 +190,10 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 | `isContainer` | `is--container` |
 | `isSide` | `is--side` |
 | `isSkipFlow` | `is--skipFlow` |
+| `hasTransition` | `has--transition` |
+| `hasGutter` | `has--gutter` |
+| `hasSnap` | `has--snap` |
+| `hasMask` | `has--mask` |
 
 ```jsx
 // Trait Props の使用例
@@ -240,9 +244,9 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
 
 
-## Trait Primitives
+## Trait Components
 
-`<Lism isXxx>`のエイリアスコンポーネントです。
+`<Lism isXxx>`のエイリアスコンポーネントです。`is--*` クラスを出力します。
 
 | コンポーネント | 内部処理 | 出力クラス |
 |-------------|------------|-----------|
@@ -251,7 +255,7 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 | `<Layer>` | `isLayer` | `is--layer` |
 | `<BoxLink>` | `isBoxLink` | `is--boxLink` |
 
-各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+各 Trait クラスの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `trait-class/` 配下の各ファイルを参照。`has--*` については [trait-class.md](./trait-class.md) を参照。
 
 
 ## Layout Primitives

package/dist/data/guides/components-ui.md

@@ -316,24 +316,29 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 
 `@lism-css/ui` の UI コンポーネントは、CLI コマンドで自分のプロジェクトにソースコードをコピーして使うこともできます。コピーしたファイルは自由にカスタマイズ可能です。
 
+コンポーネント名は `import` するときと同じ PascalCase で指定します。
+
 ```bash
 # 初期設定（framework、出力先ディレクトリを対話的に設定）
-npx lism-ui init
+npx lism-cli ui init
 
 # コンポーネントを追加
-npx lism-ui add Button Modal
-npx lism-ui add -a          # 全コンポーネントを追加
+npx lism-cli ui add Button Modal
+npx lism-cli ui add NavMenu
+npx lism-cli ui add --all        # 全コンポーネントを追加
 
 # 利用可能なコンポーネント一覧を表示
-npx lism-ui list
+npx lism-cli ui list
 ```
 
-`init` で生成される `lism-ui.json`:
+`ui init` で生成される `lism.config.js` の `cli` セクション:
 
-```json
-{
-  "framework": "react",
-  "componentsDir": "src/components/ui",
-  "helperDir": "src/components/ui/_helper"
-}
+```js
+export default {
+  cli: {
+    framework: 'react',
+    componentsDir: 'src/components/ui',
+    helperDir: 'src/components/ui/_helper',
+  },
+};
 ```