@lism-css/mcp 0.14.0 → 0.15.1

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,9 +9,9 @@ description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIや
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.14.0` / `@lism-css/ui@0.14.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 の実装ガイド。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.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,21 +78,23 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 
 - 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
 - コンポーネントはできる限り `<Lism>`系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築すること。
-- カスタムクラスが必要な場合は `.c--{name}` の命名規則に従う。
+- カスタムクラスが必要な場合は `c--{name}` の命名規則に従う。
 
 ### 間違いやすい例
 
 | 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"` | スペーストークンの間違い |
 
+その他の典型的な 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,18 +113,20 @@ 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--`）の一覧と用途。カラムレイアウト系の使い分けガイドも含む。
+- [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}`形式のクラス）の一覧・記法。
 - [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**
 
@@ -129,16 +140,23 @@ 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 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 +165,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/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)
 
 ---
 
@@ -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,11 +16,11 @@ 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--外部コンポーネントとの連携)
 
-[詳細](https://lism-css.com/docs/core-components/lism-props/)
+[詳細](https://lism-css.com/docs/core-components/lism-props.md)
 
 ---
 
@@ -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
@@ -270,9 +274,9 @@ Trait Primitives クラス（`is--*`）を出力するためのプロパティ
 | `<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
@@ -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',
+  },
+};
 ```

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,51 +21,59 @@ 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-primitive
-      → @layer trait（.is-- Trait 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/primitives/)
+[詳細](https://lism-css.com/docs/naming.md)
 
-クラス名のプレフィックスによって、役割とレイヤーの所属が決まります。
+Lism CSSで定義されるクラスは、その役割とレイヤーの所属が決まっており、その分類によってプレフィックスが定められています。
 
-| プレフィックス | レイヤー | 役割 | 例 |
-|--------------|---------|------|-----|
-| `.set--` | lism-base | ベーススタイル上書き・トークン再定義 | `.set--plain`, `.set--transition` |
-| `.is--` | lism-primitive.trait | Trait Primitive（要素の静的特性） | `.is--container`, `.is--wrapper` |
-| `.l--` | lism-primitive.layout | Layout Primitive | `.l--grid`, `.l--flex`, `.l--stack` |
-| `.a--` | lism-primitive.atomic | Atomic Primitive | `.a--icon`, `.a--divider` |
-| `.c--` | lism-component | Component Class（BEM 構造を持つ UI 部品） | `.c--button`, `.c--accordion` |
-| `.u--` | lism-utility | 用途が明確なユーティリティ | `.u--cbox`, `.u--trim` |
-| `.-` | レイヤー外 | 単一プロパティ制御（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--` 同士は併用OK（Trait は複数併用できる）
-- `.is--` × `.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--` の判定軸:**
+
+|  | `is--` | `has--` |
+|---|---|---|
+| 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
+| CSS 変数 | 必須ではない | 必須（カスタマイズポイントを提供） |
 
 **記述順序:**
 class 属性にクラスを直接記述する場合は、以下の順序で並べてください。
 
 ```
-[customClass] [c--] [a--] [l--] [is--] [set--] [u--] [-]
+[customClass] [c--] [a--] [l--] [set--] [is--] [has--] [u--] [-]
 ```
 
 | # | 区分 | 例 |
@@ -74,10 +82,11 @@ class 属性にクラスを直接記述する場合は、以下の順序で並
 | 2 | Component（`c--`） | `c--box`, `c--box--primary` |
 | 3 | Atomic Primitive（`a--`） | `a--icon`, `a--divider` |
 | 4 | Layout Primitive（`l--`） | `l--flex`, `l--columns` |
-| 5 | Trait Primitives（`is--`） | `is--wrapper`, `is--layer` |
-| 6 | Set Class（`set--`） | `set--hov`, `set--transition` |
-| 7 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
-| 8 | Property Class（`-`） | `-p:20`, `-bgc:base-2` |
+| 5 | Set Class（`set--`） | `set--var:hov`, `set--var:bxsh` |
+| 6 | Trait Class 役割宣言（`is--`） | `is--wrapper`, `is--layer` |
+| 7 | Trait Class 機能付与（`has--`） | `has--transition`, `has--gutter` |
+| 8 | Utility Class（`u--`） | `u--cbox`, `u--trim` |
+| 9 | Property Class（`-`） | `-p:20`, `-bgc:base-2`, `-hov:-c` |
 
 ```html
 <!-- OK -->
@@ -98,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 は `_`（アンダースコア）一つ区切り
@@ -109,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 側での可視性を高める名前付けのためだけに利用しても構いません。
 
 
 ### 作成例