@lism-css/mcp 0.15.0 → 0.15.1

package/dist/data/docs-index.json

@@ -230,9 +230,9 @@
     "title": "Utility Class",
     "description": "スタイルや装飾をまとめて適用できる Lism CSS のユーティリティクラスについて解説します。",
     "category": "guide",
-    "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 等を解説。"
+    "headings": ["u--cbox", "u--trim & u--trimAll", "u--srOnly", "u--divide & u--cells", "u--clipText", "Opt-in"],
+    "keywords": ["utility", "ユーティリティ", "class", "クラス", "u--cbox", "u--trim", "u--srOnly", "u--divide", "u--cells", "u--clipText"],
+    "snippet": "用途が明確な装飾・機能をまとめてセットするユーティリティクラス (.u--{style}) の一覧。u--cbox, u--trim, u--divide, u--cells 等を解説。"
   },
   {
     "sourcePath": "set-class.mdx",
@@ -249,8 +249,21 @@
     "description": "Lism CSS のプリミティブクラス（l--, a--）の分類と使い方について解説します。",
     "category": "guide",
     "headings": ["Layout Primitives", "Atomic Primitives"],
-    "keywords": ["primitive", "プリミティブ", "layout", "レイアウト", "class", "l--", "a--"],
-    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name} (Layout Primitives) と .a--{name} (Atomic Primitives) の命名規則を説明。"
+    "keywords": [
+      "primitive",
+      "プリミティブ",
+      "layout",
+      "レイアウト",
+      "class",
+      "l--",
+      "a--",
+      "比較表",
+      "選び方",
+      "使い分け",
+      "使い分けガイド",
+      "カラムレイアウト"
+    ],
+    "snippet": "レイアウトを組み立てる積み木として Primitive クラスを定義。.l--{name} (Layout Primitives) と .a--{name} (Atomic Primitives) の命名規則を説明。Layout Primitives 配下にカラムレイアウト Primitive（Columns / AutoColumns / SwitchColumns / WithSide / Grid / TileGrid）の使い分けガイド（比較表と用途別の選び方）も収録。"
   },
   {
     "sourcePath": "base-styles.mdx",
@@ -267,12 +280,20 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.16.0 (2026.04.21)",
+      "`u--trimChildren` のリネームと除外方式の整理 (#324, #326)",
+      "`u--collapseGrid` のリネームと `u--divide` の追加 (#323)",
+      "opacity トークンの命名変更 (#316)",
+      "Layout Primitive の命名整理 (#319)",
+      "`@lism-css/ui` v.0.16.0 (2026.04.21)",
+      "lism-css v.0.15.0 (2026.04.21)",
+      "`@lism-css/ui` v.0.15.0 (2026.04.21)",
+      "lism-css v.0.14.0 (2026.04.17)",
       "`@lism-css/ui` v.0.14.0 (2026.04.17)",
-      "v.0.14.0 (2026.04.17)",
+      "lism-css v.0.13.1 (2026.04.15)",
       "`@lism-css/ui` v.0.13.1 (2026.04.15)",
-      "v.0.13.1 (2026.04.15)",
+      "lism-css v.0.13.0 (2026.04.14)",
       "`@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)",
@@ -292,14 +313,14 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.16.0 の破壊的変更として Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）、v.0.15.0 では u--trimChildren → u--trimAll へのリネームと除外方式整理（#324/#326）、u--collapseGrid → u--cells へのリネームと u--divide の新設（#323）、opacity トークンのセマンティック命名変更（#316）などがある。"
   },
   {
     "sourcePath": "property-class/bd.mdx",
     "title": "-bd",
     "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
     "category": "property-class",
-    "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意の`border`をインライン出力する方法"],
+    "headings": ["方向指定", "bdwをブレイクポイントで切り替える"],
     "keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
     "snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
@@ -559,17 +580,17 @@
     "snippet": "コンテンツフロー用のレイアウト。子要素間の余白を margin で管理。見出しタグは余白が大きくなる。is--skipFlowで余白打ち消しも可能。"
   },
   {
-    "sourcePath": "primitives/l--fluidCols.mdx",
-    "title": "FluidCols / l--fluidCols",
-    "description": "l--fluidCols は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
+    "sourcePath": "primitives/l--autoColumns.mdx",
+    "title": "AutoColumns / l--autoColumns",
+    "description": "l--autoColumns は、カラム要素が指定した幅より小さくならないように自動で折り返す、ブレイクポイント非依存の段組みクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage"],
     "keywords": [
-      "FluidCols",
+      "AutoColumns",
       "流動カラム",
       "auto-fill",
       "fluid",
-      "l--fluidCols",
+      "l--autoColumns",
       "display",
       "display: grid",
       "auto-wrap",
@@ -590,21 +611,21 @@
     "snippet": "直下のメディア要素（img, video, iframe）を自身のサイズにフィットさせて表示するクラス。arでアスペクト比を指定。"
   },
   {
-    "sourcePath": "primitives/l--switchCols.mdx",
-    "title": "SwitchCols / l--switchCols",
-    "description": "l--switchCols は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
+    "sourcePath": "primitives/l--switchColumns.mdx",
+    "title": "SwitchColumns / l--switchColumns",
+    "description": "l--switchColumns は、複数列と1列の切り替えをコンテナクエリやメディアクエリを使わずに実装するクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage"],
-    "keywords": ["SwitchCols", "切り替え", "switch", "カラム", "l--switchCols", "responsive columns", "メディアクエリなし"],
+    "keywords": ["SwitchColumns", "切り替え", "switch", "カラム", "l--switchColumns", "responsive columns", "メディアクエリなし"],
     "snippet": "複数列以上と1列への切り替えをコンテナクエリ・メディアクエリを使わずに実装するクラス。breakSizeで切り替えポイントを指定。"
   },
   {
-    "sourcePath": "primitives/l--sideMain.mdx",
-    "title": "SideMain / l--sideMain",
-    "description": "l--sideMain は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
+    "sourcePath": "primitives/l--withSide.mdx",
+    "title": "WithSide / l--withSide",
+    "description": "l--withSide は、維持したいコンテンツの長さを基準にして、横並び・縦並びが自動で切り替わる2カラムレイアウトのクラスです。",
     "category": "primitives",
     "headings": ["CSS", "Lismコンポーネント", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
-    "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side", "two column"],
+    "keywords": ["WithSide", "サイドバー", "sidebar", "メイン", "l--withSide", "2カラム", "is--side", "two column"],
     "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。メディアクエリ・コンテナクエリに依存せず自動で切り替わる。"
   },
   {
@@ -957,12 +978,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--trim / u--trimChildren",
+    "title": "u--trim / u--trimAll",
     "description": "テキストのハーフレディング分の余白を調整するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--trim", "u--trimChildren"],
-    "keywords": ["u--trim", "u--trimChildren", "ハーフレディング", "行間調整", "テキスト余白", "margin-block", "トリム"],
-    "snippet": "u--trimは自身のmargin-blockを調整。u--trimChildrenは子要素全ての上下マージンを調整。img, figure, tableに対してはマージン調節を無効化。"
+    "headings": ["u--trim", "u--trimAll"],
+    "keywords": ["u--trim", "u--trimAll", "ハーフレディング", "行間調整", "テキスト余白", "margin-block", "トリム"],
+    "snippet": "u--trimは自身のmargin-blockを調整。u--trimAllは直下の子要素（:empty・figure・picture・video・button・textarea・table を除く）の上下マージンを一括調整する除外方式のクラス。"
   },
   {
     "sourcePath": "trait-class/is--boxLink.mdx",
@@ -984,12 +1005,12 @@
   },
   {
     "sourcePath": "utility-class.mdx",
-    "title": "u--collapseGrid",
-    "description": "グリッド・フレックス子要素間にボーダー（区切り線）を表示するユーティリティクラス。",
+    "title": "u--divide & u--cells",
+    "description": "グリッド・フレックス子要素間の区切り線・セル枠を表示するユーティリティクラス。",
     "category": "guide",
-    "headings": ["u--collapseGrid"],
-    "keywords": ["u--collapseGrid", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
-    "snippet": "box-shadowで子要素間に区切りボーダーを表示。p='0' ov='clip'で周囲のボーダーを非表示にでき、bd追加でカレンダー風の表現も可能。"
+    "headings": ["u--divide & u--cells"],
+    "keywords": ["u--divide", "u--cells", "グリッド区切り", "ボーダー", "テーブル風", "カレンダー", "box-shadow"],
+    "snippet": "u--divide は子要素間にのみ区切り線を表示（外周なし）。u--cells は各セルを枠で囲む（table セル／カレンダー風）。どちらも box-shadow で実装。"
   },
   {
     "sourcePath": "trait-class.mdx",

package/dist/data/guides/SKILL.md

@@ -1,6 +1,6 @@
 ---
 name: lism-css-guide
-description: "Lism CSS の設計・実装に関するガイド。CSSの編集・追加、UIコンポーネントやレイアウトの実装・編集時に参照。c--*, l--*, a--*, is--*, has--*, set--*, u--* -prop:value 形式のクラス・トークン(CSS変数)・命名規則・Layer規則・レスポンシブ対応について調べる時にも参照。
+description: "Lism CSS の設計・実装に関するガイド。CSSの編集・追加、UIコンポーネントやレイアウトの実装・編集時に参照。c--*, l--*, a--*, is--*, has--*, set--*, u--* -prop:value 形式のクラス・トークン(CSS変数)・命名規則・Layer規則・レスポンシブ対応について調べる時にも参照。"
 ---
 
 # Lism CSS Best Practices
@@ -9,9 +9,9 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.15.0` / `@lism-css/ui@0.15.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.16.0` / `@lism-css/ui@0.16.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
-公式ドキュメント: https://lism-css.com/docs/overview/
+公式ドキュメント: https://lism-css.com/docs/overview.md
 
 
 ## インストール
@@ -19,7 +19,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 ### CDNでCSSファイルのみ読み込む場合
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.15.0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.16.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
@@ -48,6 +48,13 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 
 ## 実装ルール
 
+### コードを書く前に必ず参照
+
+レイアウト選択ミスや典型的な記法ミスを避けるため、コード生成の前に以下を確認すること：
+
+- **どの Primitive を使うか迷ったら** → [primitive-class.md の「カラムレイアウト Primitive の使い分けガイド」](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド) — 比較表と用途別の選び方で判断材料を提供
+- **コードを書く前のチェック** → [antipatterns.md](./antipatterns.md) — Token typo / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜けの NG → OK カタログ
+
 ### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
 
 まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。
@@ -71,7 +78,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 
 - 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
 - コンポーネントはできる限り `<Lism>`系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築すること。
-- カスタムクラスが必要な場合は `.c--{name}` の命名規則に従う。
+- カスタムクラスが必要な場合は `c--{name}` の命名規則に従う。
 
 ### 間違いやすい例
 
@@ -82,10 +89,12 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 | `bgc="secondary"` | `bgc="base-2"` | カラートークンの間違い |
 | `p="8"`, `g="6"` | `p="20"`, `g="10"` | スペーストークンの間違い |
 
+その他の典型的な NG パターンは [antipatterns.md](./antipatterns.md) にカタログ化されているので、コード生成前に確認すること。
+
 #### NG: レスポンシブの考慮漏れ・Gridの直書き
 
 渡されたPCサイズのデザインだけをみて、カラムレイアウトを`<Grid gtc="repeat(3, 1fr)>`のように固定してしまわないようにすること。
-特に指示がなければ、レスポンシブを意識して実装する。`<Columns>`（`l--columns`）を使ってブレイクポイントで切り替えるか、`l--sideMain`や`l--fluidCols`で自動レスポンシブを採用することを検討する。
+特に指示がなければ、レスポンシブを意識して実装する。`<Columns>`（`l--columns`）を使ってブレイクポイントで切り替えるか、`l--withSide`や`l--autoColumns`で自動レスポンシブを採用することを検討する。
 
 また、Lism CSSではコンテナクエリを採用しているため、レスポンシブの値切り替えには先祖要素で `isContainer`(`is--container`クラス) が必要なことに注意。
 
@@ -104,7 +113,8 @@ 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 クラス（`l--`/`a--`）の一覧と用途。
+- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`l--`/`a--`）の一覧と用途。カラムレイアウト系の使い分けガイドも含む。
+- [antipatterns.md](./antipatterns.md) — AI が生成しがちな NG パターンと OK 対応。Token typo / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜け。
 - [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}`形式のクラス）の一覧・記法。
@@ -130,9 +140,9 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - `l--frame` / `<Frame>`: [primitives/l--frame.md](./primitives/l--frame.md)
 - `l--columns` / `<Columns>`: [primitives/l--columns.md](./primitives/l--columns.md)
 - `l--tileGrid` / `<TileGrid>`: [primitives/l--tileGrid.md](./primitives/l--tileGrid.md)
-- `l--fluidCols` / `<FluidCols>`: [primitives/l--fluidCols.md](./primitives/l--fluidCols.md)
-- `l--switchCols` / `<SwitchCols>`: [primitives/l--switchCols.md](./primitives/l--switchCols.md)
-- `l--sideMain` / `<SideMain>`: [primitives/l--sideMain.md](./primitives/l--sideMain.md)
+- `l--autoColumns` / `<AutoColumns>`: [primitives/l--autoColumns.md](./primitives/l--autoColumns.md)
+- `l--switchColumns` / `<SwitchColumns>`: [primitives/l--switchColumns.md](./primitives/l--switchColumns.md)
+- `l--withSide` / `<WithSide>`: [primitives/l--withSide.md](./primitives/l--withSide.md)
 
 **Trait Class (is--)**
 

package/dist/data/guides/antipatterns.md

@@ -0,0 +1,147 @@
+# アンチパターン辞書
+
+AI が Lism CSS のコードを生成する際に間違いやすい記法と、その正しい書き方をカタログ化したもの。コードを書く前に該当カテゴリを確認すること。
+
+## TOC
+
+- [Token typo（存在しない値）](#token-typo存在しない値)
+- [Prop 型ミス](#prop-型ミス)
+- [レイアウト選択ミス](#レイアウト選択ミス)
+- [レスポンシブ抜け](#レスポンシブ抜け)
+
+---
+
+## Token typo（存在しない値）
+
+Lism CSS側が用意しているトークン値と異なるものを書かないように注意する。  
+正確な一覧は [tokens.md](./tokens.md) を参照すること。
+
+ただし、ユーザーが独自に追加定義することは可能。あくまでデフォルトで用意されていないもので間違えやすいものを紹介しておく。
+
+### カラー
+
+| NG | OK | 理由 |
+|---|---|---|
+| `bgc="primary"` | `bgc="brand"` | セマンティックカラーに `primary`/`secondary` は無い。ブランド色は `brand`/`accent` |
+| `bgc="secondary"` | `bgc="base-2"` | サブ背景色は `base-2`（`base-3` がユーザーによって追加定義されている可能性もある） |
+| `c="muted"` | `c="text-2"` | 補助テキスト色は `text-2` |
+| `c="danger"` | `c="red"` | パレットカラーから選ぶ（`red` / `orange` 等） |
+
+- セマンティックカラー: `base` / `base-2` / `text` / `text-2` / `divider` / `link` / `brand` / `accent`
+- パレットカラー: `red` / `blue` / `green` / `yellow` / `purple` / `orange` / `pink` / `gray` / `white` / `black`
+
+### スペース（`p` / `m` / `g` 等）
+
+| NG | OK | 理由 |
+|---|---|---|
+| `p="8"` | `p="10"` | スペーストークンは`5/10/15/20/30/40/50/60/70/80`。tailwindのような4の倍数ではない |
+| `g="6"` | `g="5"` | 同上 |
+| `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
+
+### フォントサイズ（`fz`）
+
+| NG | OK | 理由 |
+|---|---|---|
+| `fz="14"` | `fz="s"` | `fz` は文字列キー（数値は不可） |
+| `fz="large"`, `fz="md"`  | `fz="l"` | 略号は `2xs` / `xs` / `s` / `m` / `l` / `xl` / `2xl` … |
+
+
+### 角丸 / 影
+
+| NG | OK | 理由 |
+|---|---|---|
+| `bdrs="sm"`, `bdrs="round"` | `bdrs="20"`, `bdrs="99"` | 角丸トークンは `10` / `20` / `30` / `40` / `99` / `inner` |
+| `bxsh="xs"`, `bxsh="sm"` | `bxsh="10"`, `bxsh="20"` | shadowトークンは `10` / `20` / `30` / `40` / `50` |
+
+---
+
+## Prop 型ミス
+
+### Heading の `level` は文字列
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Heading level={3}>` | `<Heading level="3">` | `level` は `'1'` 〜 `'6'` の文字列 union 型 |
+
+### レスポンシブ値は配列 or オブジェクト
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Columns cols="1,2,3">` | `<Columns cols={[1, 2, 3]}>` | レスポンシブは配列 |
+| `<Box p="20 30 40">` | `<Box p={[20, 30, 40]}>` | 同上 |
+
+---
+
+## レイアウト選択ミス
+
+詳細な選択基準は [primitive-class.md](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド) の使い分けガイドを参照。
+
+### Grid 直書き vs Columns
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Grid gtc="repeat(3, 1fr)">` | `<Columns cols={3}>` | 等幅 N 列は Columns で宣言的に書く |
+| `<Grid gtc={['1fr', '1fr 1fr', '1fr 1fr 1fr']}>` | `<Columns cols={[1, 2, 3]}>` | BP 切替も Columns のほうが簡潔 |
+
+### コンテンツ幅のハードコード
+
+| NG | OK | 理由 |
+|---|---|---|
+| `style={{ maxWidth: '1200px' }}` | `<Box max-sz="l">` | ヘッダーやセクションなど、コンテンツサイズにはトークン値（`xs` / `s` / `m` / `l` / `xl` / `container`）をできるだけ活用する |
+
+### サイドバー型レイアウト
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Grid gtc="1fr 240px">` で固定 | `<WithSide sideW="240px">` | コンテンツ幅で自動切替したいなら WithSide |
+| `<Flex>` で 2 カラム強制横並び | `<WithSide>` | 縦並びへの切替が必要なら WithSide |
+
+---
+
+## レスポンシブ抜け
+
+### `is--container` 祖先なしで BP 値を使用
+
+レスポンシブ値（配列・オブジェクト・`-{prop}_{bp}` クラス）は、デフォルト設定（SCSS 側 `$is_container_query: 1`）では `@container` クエリで発火するため、祖先要素のいずれかに `is--container`（コンポーネントなら `isContainer` prop）が必須。
+
+※ プロジェクトの SCSS 設定で `$is_container_query: 0` にして `@media` クエリ運用に切り替えている場合は、`is--container` 祖先は不要。
+
+```jsx
+// NG: container 祖先がないので sm/md 値が発火しない
+<div>
+  <Box p={[20, 30, 40]}>...</Box>
+</div>
+
+// OK: 祖先に isContainer
+<Stack isContainer>
+  <Box p={[20, 30, 40]}>...</Box>
+</Stack>
+```
+
+### BP 専用クラスをベース値なしで使う
+
+BP 専用クラス（`-{prop}_{bp}`）やコンポーネントの BP キー（`{ sm: ... }` 等）だけを指定すると、BP 未満では値が空になり意図しないレイアウト崩れを起こす。必ずベース値とセットで指定する。
+
+```jsx
+// NG: sm 未満で p が未指定になる
+<Box p={{ sm: 30 }}>...</Box>
+
+// OK: ベース値（base / 配列の先頭）を必ず添える
+<Box p={{ base: 20, sm: 30 }}>...</Box>
+<Box p={[20, 30]}>...</Box>
+```
+
+生 HTML / クラス指定で書く場合も同様：
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<div class="-p_sm" style="--p_sm: var(--s30)">` | `<div class="-p:20 -p_sm" style="--p_sm: var(--s30)">` | BP 未満では値が空になるため、ベースクラス `-{prop}:{value}` も必要 |
+
+### ブレイクポイントの誤用
+
+Lism CSS の標準出力で有効な BP は `sm: 480px` / `md: 800px` まで。`lg` 以降を使う場合は SCSS 設定で出力範囲を拡張する必要がある。`xs` は BP キーとして存在しない。
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Box p={{ xs: 10, sm: 20 }}>` | `<Box p={{ base: 10, sm: 20 }}>` | デフォルトは `base`（`xs` キーは無い） |
+| `cols={[1, 2, 3, 4]}` | `cols={[1, 2, 3]}` | 標準出力では `[base, sm, md]` までが有効。`lg` 以降は SCSS 設定が必要 |

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

@@ -9,7 +9,7 @@ Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベ
 - [Reset CSS](#reset-css)
 - [HTML 要素のベーススタイル](#html-要素のベーススタイル)
 
-[詳細](https://lism-css.com/docs/base-styles/)
+[詳細](https://lism-css.com/docs/base-styles.md)
 
 ---
 

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

@@ -20,7 +20,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 - [Layout Primitives](#layout-primitives)
 - [`getLismProps()`](#getlismprops--外部コンポーネントとの連携)
 
-[詳細](https://lism-css.com/docs/core-components/lism-props/)
+[詳細](https://lism-css.com/docs/core-components/lism-props.md)
 
 ---
 
@@ -274,9 +274,9 @@ Trait クラス（`is--*` / `has--*`）を出力するためのプロパティ
 | `<Frame>` | `l--frame` |
 | `<Columns>` | `l--columns` |
 | `<TileGrid>` | `l--tileGrid` |
-| `<FluidCols>` | `l--fluidCols` |
-| `<SwitchCols>` | `l--switchCols` |
-| `<SideMain>` | `l--sideMain` |
+| `<AutoColumns>` | `l--autoColumns` |
+| `<SwitchColumns>` | `l--switchColumns` |
+| `<WithSide>` | `l--withSide` |
 
 各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
 

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

@@ -27,7 +27,7 @@ import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
 - [DummyText](#dummytext)
 - [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
 
-[詳細](https://lism-css.com/ui/)
+[詳細](https://lism-css.com/ui.md)
 
 ---
 
@@ -68,7 +68,7 @@ import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
 | `type` | `'alert' \| 'point' \| 'warning' \| 'check' \| 'help' \| 'info'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
-| `layout` | `'flex' \| 'sideMain'` | `'flex'` | レイアウトプリミティブ |
+| `layout` | `'flex' \| 'withSide'` | `'flex'` | レイアウトプリミティブ |
 | `flow` | `string` | `'s'` | コンテンツを囲む要素のフロー余白 |
 
 ```jsx

package/dist/data/guides/css-rules.md

@@ -8,7 +8,7 @@
 - [カスタムCSS を追加する場合](#カスタムcss-を追加する場合)
 - [CSS の配置場所](#css-の配置場所)
 
-[詳細](https://lism-css.com/docs/css-methodology/)
+[詳細](https://lism-css.com/docs/css-methodology.md)
 
 > **命名規則の詳細**: CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルールについては [naming.md](./naming.md) を参照してください。
 
@@ -21,46 +21,46 @@ Lism CSS は CSS Layers による詳細度管理を採用しています。
 
 ```
 Settings（トークン定義）
-  → @layer lism-base（Reset CSS・トークン・.set--クラス）
+  → @layer lism-base（Reset CSS・トークン・set-- クラス）
       → @layer reset（リセットCSS）
-  → @layer lism-trait（.is-- / .has-- Trait Class）
+  → @layer lism-trait（is-- / has-- Trait Class）
   → @layer lism-primitive
-      → @layer layout（.l-- Layout Primitive）
-      → @layer atomic（.a-- Atomic Primitive）
-  → @layer lism-component（.c-- Component Class — BEM 構造を持つ UI 部品）
+      → @layer layout（l-- Layout Primitive）
+      → @layer atomic（a-- Atomic Primitive）
+  → @layer lism-component（c-- Component Class — BEM 構造を持つ UI 部品）
   → @layer lism-custom（ユーザーカスタマイズ用）
-  → @layer lism-utility（.u-- ユーティリティクラス）
+  → @layer lism-utility（u-- ユーティリティクラス）
   → Property Class（レイヤー外 — 最も詳細度が高い）
 ```
 
 
 ## クラス分類とプレフィックス
 
-[詳細](https://lism-css.com/docs/naming/)
+[詳細](https://lism-css.com/docs/naming.md)
 
 Lism CSSで定義されるクラスは、その役割とレイヤーの所属が決まっており、その分類によってプレフィックスが定められています。
 
 | 分類 | 役割 | プレフィックス | 例 |
 |---|---|---|---|
-| Set Class | ベーススタイル上書き・変数提供 | `set--` | `.set--plain`, `.set--revert`, `.set--var:hov`, `.set--var:bxsh` |
-| Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `.l--grid`, `.l--flex`, `.l--stack` |
-| Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `.a--icon`, `.a--divider` |
-| Component Class | BEM 構造を持つ UI 部品 | `c--` | `.c--button`, `.c--accordion` |
-| `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `.is--container`, `.is--wrapper`, `.is--layer`, `.is--boxLink` |
-| `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `.has--transition`, `.has--gutter`, `.has--snap`, `.has--mask` |
-| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `.u--cbox`, `.u--trim`, `.u--collapseGrid` |
-| Property Class | 単一プロパティの制御 | `-` | `.-fz:l`, `.-p:20`, `.-d:none` |
+| Set Class | ベーススタイル上書き・変数提供 | `set--` | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
+| Layout Primitive | レイアウトの構成単位となる Primitive | `l--` | `l--grid`, `l--flex`, `l--stack` |
+| Atomic Primitive | レイアウトの最小単位となる Primitive | `a--` | `a--icon`, `a--divider` |
+| Component Class | BEM 構造を持つ UI 部品 | `c--` | `c--button`, `c--accordion` |
+| `is--` Trait | 要素に役割（〜である）を宣言 | `is--` | `is--container`, `is--wrapper`, `is--layer`, `is--boxLink` |
+| `has--` Trait | 要素に機能（〜を持つ）を付与 | `has--` | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
+| Utility Class | 用途が明確な装飾系ユーティリティ | `u--` | `u--cbox`, `u--trim`, `u--divide`, `u--cells` |
+| Property Class | 単一プロパティの制御 | `-` | `-fz:l`, `-p:20`, `-d:none` |
 
 **併用ルール:**
-- `.l--` と `.c--` は併用OK（例: `<div class="l--flex c--nav">`）
-- 同カテゴリ内の Primitive 併用は不可（例: `.l--flex` と `.l--grid`、`.a--icon` と `.a--divider` は同要素に付けない）
-- `.l--` × `.a--` は非推奨（役割的に同居しない想定）
-- `.is--` / `.has--` 同士は併用OK（Trait は複数併用できる）
-- `.is--` / `.has--` × `.l--` / `.a--` も併用OK
+- `l--` と `c--` は併用OK（例: `<div class="l--flex c--nav">`）
+- 同カテゴリ内の Primitive 併用は不可（例: `l--flex` と `l--grid`、`a--icon` と `a--divider` は同要素に付けない）
+- `l--` × `a--` は非推奨（役割的に同居しない想定）
+- `is--` / `has--` 同士は併用OK（Trait は複数併用できる）
+- `is--` / `has--` × `l--` / `a--` も併用OK
 - `c--` の Block 同士の併用（`.c--xxx.c--yyy`）は基本 NG。ただし以下は許容:
   - Block と自身の Modifier: `.c--button.c--button--outline`
   - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
-- 子要素: `.c--card_header`, `.c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
+- 子要素: `c--card_header`, `c--card_body`（`c--` のみ Element を持つ。`_` 一つ区切り）
 
 **`is--` と `has--` の判定軸:**
 
@@ -107,9 +107,9 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 
 | 分類 | 形式 | 例 |
 |---|---|---|
-| Block | `.c--{name}` | `.c--button`, `.c--card` |
-| Modifier | `.c--{name}--{modifier}` | `.c--button--outline` |
-| Element | `.c--{name}_{element}` | `.c--card_header`, `.c--card_body` |
+| Block | `c--{name}` | `c--button`, `c--card` |
+| Modifier | `c--{name}--{modifier}` | `c--button--outline` |
+| Element | `c--{name}_{element}` | `c--card_header`, `c--card_body` |
 
 - Modifier は Block と併記して使用: `.c--button.c--button--outline`
 - Element は `_`（アンダースコア）一つ区切り
@@ -118,7 +118,7 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
   - Block と他 Block の Element: `.c--xxx.c--yyy_elem`
 - `a--` / `l--` には `variant` の BEM 展開は適用されない**
 
-`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`.l--`, `.is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
+`c--` を使った独自コンポーネントを使う場合でも、他の Primitive クラス（`l--`, `is--`）や Property Class（`-{prop}:{value}`）との組み合わせを前提とした設計にすることで CSS の記述量を削減できます。`c--` クラスにスタイルが全くなく、HTML 側での可視性を高める名前付けのためだけに利用しても構いません。
 
 
 ### 作成例

package/dist/data/guides/customize.md

@@ -9,7 +9,7 @@
 - [`lism.config.js` でのカスタマイズ](#lismconfigjs-でのカスタマイズ)
 - [追加スタイルを読み込ませる方法](#追加スタイルを読み込ませる方法)
 
-[詳細](https://lism-css.com/docs/customize/)
+[詳細](https://lism-css.com/docs/customize.md)
 
 ---
 

package/dist/data/guides/naming.md

@@ -7,7 +7,7 @@
 - [`{prop}` の省略ルール](#prop-の省略ルール)
 - [`{value}` の省略ルール](#value-の省略ルール)
 
-[詳細](https://lism-css.com/docs/naming/)
+[詳細](https://lism-css.com/docs/naming.md)
 
 ---
 
@@ -30,9 +30,11 @@
 | `s`, `m`, `l`, `xl`... | ベース値を中心に大小の段階を示す | `--fz--s`, `--fz--l` |
 | `base` | `:root`/`body` の初期値にセットされるもの | `--fz--base`, `--lh--base` |
 | `10`, `20`, `30`... | `0`(`none`)基準で段階的に増加 | `--bdrs--20`, `--bxsh--30` |
-| `-10`, `-20`, `-30`... | `0`(`none`)基準で段階的に減少 | `--o---10`, `--o---20` |
 | セマンティック名 | 上記に当てはまらない場合 | `--ar--og` |
 
+> 🎵 **例外: opacity トークン**
+> opacity（`--o--mp` / `--o--p` / `--o--pp` / `--o--ppp`）は、音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用している。`p`（piano / 弱く）の反復回数が多いほど透明度が増す構造で、「文字の反復回数で段階を表す」命名は Lism 内で opacity のみの例外。
+
 ### Property Class 用の変数
 
 | 形式 | 説明 | 例 |
@@ -71,10 +73,10 @@
 | `set--` | HTML 要素の基礎スタイリング / 変数セット | `set--plain`, `set--revert`, `set--var:hov`, `set--var:bxsh` |
 | `is--` | 〜である（役割・存在の宣言）。CSS 変数は必須ではない | `is--container`, `is--wrapper`, `is--layer` |
 | `has--` | 〜を持つ（単一機能 trait の付与）。CSS 変数でカスタマイズ可 | `has--transition`, `has--gutter`, `has--snap`, `has--mask` |
-| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--collapseGrid` |
+| `u--` | 装飾的効果（単独 or 子要素の装飾） | `u--trim`, `u--cbox`, `u--divide`, `u--cells` |
 
-- `set--` は `@lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
-- `is--` / `has--` は `@lism-trait` 層に属する。
+- `set--` は `lism-base` 層で HTML 要素の基礎スタイル・変数を提供するもの。
+- `is--` / `has--` は `lism-trait` 層に属する。
 
 Property Class の形式:
 
@@ -194,15 +196,18 @@ NG例: `flex` → `fx` としたうえで `flex-shrink` を `fsh` にする（`f
 ```
 .-c:text-2        → color: var(--text-2);
 .-fz:l            → font-size: var(--fz--l);
-.-p10             → padding: var(--s10);
+.-p:10            → padding: var(--s10);
 .-fw:bold         → font-weight: var(--fw--bold);
 .-bdrs:20         → border-radius: var(--bdrs--20);
 ```
 
-トークン値が `-{NUM}` のものも、値をそのまま連結した変数名になる。
+opacity トークンは音楽記号に由来する例外的な命名で、そのままクラス化される。
 
 ```
-.-o:-10          → opacity: var(--o---10);
+.-o:mp            → opacity: var(--o--mp);
+.-o:p             → opacity: var(--o--p);
+.-o:pp            → opacity: var(--o--pp);
+.-o:ppp           → opacity: var(--o--ppp);
 ```
 
 ### 長いキーワード値の省略