@lism-css/mcp 0.14.0 → 0.15.1

package/dist/data/guides/trait-class/has--mask.md

@@ -0,0 +1,66 @@
+# has--mask
+
+`--maskImg` 変数と組み合わせて、要素自身にマスク画像を適用する Trait クラス。SVG を使った異形シェイプ表示などに使う。
+
+## 基本情報
+
+- クラス名: `has--mask`
+- Lism props: `hasMask`（`<Lism hasMask>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_mask.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--mask
+
+## SCSS 定義
+
+```scss
+.has--mask {
+  --maskPos: 50%;
+  --maskSize: contain;
+  --maskRepeat: no-repeat;
+  mask: var(--maskImg) var(--maskRepeat) var(--maskPos) / var(--maskSize);
+}
+```
+
+`--maskImg` は定義されていないため、利用側で必ず指定すること。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--maskImg` | マスク画像（`url(...)` で指定。SVG data URI が多い） | **未定義（必須）** |
+| `--maskPos` | マスクの位置 | `50%` |
+| `--maskSize` | マスクのサイズ | `contain` |
+| `--maskRepeat` | マスクの繰り返し | `no-repeat` |
+
+## Usage
+
+`Frame` コンポーネント（または任意の要素）に `has--mask` を付与し、`--maskImg` に SVG の data URI をセットする。
+
+```html
+<div
+  class="l--frame has--mask -ar:og"
+  style="--maskImg: url('data:image/svg+xml,<svg viewBox=&quot;0 0 200 200&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;><path fill=&quot;%23000000&quot; d=&quot;M170.4,25.7...Z&quot; /></svg>')"
+>
+  <img src="..." width="960" height="640" alt="" />
+</div>
+```
+```jsx
+<Frame
+  hasMask
+  ar="og"
+  style={{
+    '--maskImg': `url('data:image/svg+xml,<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"><path fill="%23000000" d="M170.4,25.7...Z" /></svg>')`
+  }}
+>
+  <img src="..." width="960" height="640" alt="" />
+</Frame>
+```
+
+### 実装メモ
+
+- HTML 属性内で SVG data URI を使う場合、`<` / `>` / `"` をエンティティ化する必要がある
+- JSX の `style` オブジェクトで渡す場合はテンプレートリテラルでそのまま書ける
+- マスクの位置や繰り返しを変えたい場合は `--maskPos` / `--maskSize` / `--maskRepeat` を個別に上書き
+
+## 関連
+
+- `l--frame` — アスペクト比制御。マスク画像をフィットさせるラッパーとして併用することが多い

package/dist/data/guides/trait-class/has--snap.md

@@ -0,0 +1,68 @@
+# has--snap
+
+`scroll-snap-*` 系のプロパティを CSS 変数経由でセットする Trait クラス。横スクロールカルーセルなどで子要素のスナップ位置を制御したい時に使う。
+
+## 基本情報
+
+- クラス名: `has--snap`
+- Lism props: `hasSnap`（`<Lism hasSnap>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_snap.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--snap
+
+## SCSS 定義
+
+```scss
+.has--snap {
+  --snapType: both mandatory;
+  --snapAlign: start;
+  --snapStop: normal;
+  scroll-snap-type: var(--snapType);
+
+  & > * {
+    scroll-snap-align: var(--snapAlign);
+    scroll-snap-stop: var(--snapStop);
+  }
+}
+```
+
+自身に `scroll-snap-type` を、**直下の子要素**に `scroll-snap-align` / `scroll-snap-stop` を適用する構造。
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--snapType` | `scroll-snap-type` | `both mandatory` |
+| `--snapAlign` | 子要素の `scroll-snap-align` | `start` |
+| `--snapStop` | 子要素の `scroll-snap-stop` | `normal` |
+
+## Usage
+
+`ov="auto"`（または `overflow: auto`）と一緒に使い、スクロールコンテナとして成立させる必要がある。
+
+```html
+<div class="has--snap -ov:auto -ar:16/9 -bd">
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+  <div class="l--frame -ar:16/9 -p:15"><img src="..." /></div>
+</div>
+```
+```jsx
+<Box hasSnap ov="auto" ar="16/9" bd>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+  <Frame ar="16/9" p="15"><img src="..." /></Frame>
+</Box>
+```
+
+### スナップ方向を水平だけに限定する例
+
+```html
+<div class="has--snap -ov:auto" style="--snapType: x mandatory">...</div>
+```
+```jsx
+<Box hasSnap ov="auto" style={{ '--snapType': 'x mandatory' }}>...</Box>
+```
+
+## 関連
+
+- `-ov:*` プロパティクラス — スクロールコンテナ化に必須

package/dist/data/guides/trait-class/has--transition.md

@@ -0,0 +1,73 @@
+# has--transition
+
+`transition` 系のプロパティを CSS 変数経由でセットする Trait クラス。主に `-hov:*` クラスと組み合わせて、ホバー時のスムーズな変化に使う。
+
+## 基本情報
+
+- クラス名: `has--transition`
+- Lism props: `hasTransition`（`<Lism hasTransition>` / `<Box hasTransition>` 等）
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_transition.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--transition
+
+## SCSS 定義
+
+```scss
+.has--transition {
+  --duration: var(--transition-duration, 0.25s);
+  --ease: ease;
+  --delay: 0s;
+  --transitionProps: all;
+  transition: var(--duration) var(--ease) var(--delay);
+  transition-property: var(--transitionProps);
+}
+```
+
+## CSS 変数
+
+| 変数 | 役割 | デフォルト |
+|------|------|-----------|
+| `--transitionProps` | transition 対象プロパティ | `all` |
+| `--duration` | トランジションの長さ | `var(--transition-duration, 0.25s)` |
+| `--ease` | イージング関数 | `ease` |
+| `--delay` | ディレイ | `0s` |
+| `--transition-duration` | 全体のデフォルト duration を `:root` などから上書きするためのグローバル変数 | `0.25s` |
+
+## Usage
+
+### 基本：`-hov:*` と組み合わせる
+
+```html
+<div class="has--transition -hov:-c" style="--transitionProps: color; --hov-c: var(--red);">Example</div>
+```
+```jsx
+<Lism hasTransition hov={{c: 'red'}} style={{ '--transitionProps': 'color'}}>Example</Lism>
+```
+
+### `duration` を個別に上書き
+
+```html
+<a class="is--boxLink has--transition -hov:-bdc -bd -p:20" style="--hov-bdc: var(--red); --duration: 0.5s">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition hov={{ bdc: 'red' }} bd p="20" style={{ '--duration': '.5s' }}>
+  ...
+</BoxLink>
+```
+
+### `box-shadow` を変化させる例
+
+```html
+<a href="###" class="is--boxLink has--transition -bxsh:10 -hov:-bxsh -bd -p:20" style="--hov-bxsh: var(--bxsh--40)">
+  ...
+</a>
+```
+```jsx
+<BoxLink href="###" hasTransition bxsh="10" hov={{ bxsh: '40' }} bd p="20">...</BoxLink>
+```
+
+## 関連
+
+- [`-hov:*` プロパティクラス](../property-class.md) — ホバー時の変化を定義
+- [`set--var:hov`](../set-class.md#set--varhov) — 親のホバー状態を子要素に伝播させる仕組み

package/dist/data/guides/{primitives → trait-class}/is--boxLink.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--boxLink`
 - コンポーネント: `<BoxLink>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_boxLink.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--boxLink/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_boxLink.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--boxLink.md
 
 ## 専用Props
 
@@ -26,7 +26,7 @@ BoxLink には主に2通りの使い方があります。
 `href` を指定すると `<BoxLink>` 自体が `<a>` タグとして出力されます。シンプルなカード全体リンクに最適。
 
 ```jsx
-<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="o">
+<BoxLink href="/article/1" p="30" bgc="base" bd bdrs="30" hov="-o">
   <Group fz="xl" fw="bold">Heading text</Group>
   <Text lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group fz="s" c="text-2" ta="right" lh="1" my-s="10">
@@ -36,7 +36,7 @@ BoxLink には主に2通りの使い方があります。
 ```
 
 ```html
-<a class="is--boxLink -hov:o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
+<a class="is--boxLink -hov:-o -p:30 -bgc:base -bd -bdrs:30" href="/article/1">
   <p class="-fz:xl -fw:bold">Heading text</p>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <p class="-fz:s -c:text-2 -ta:right -lh:1 -my-s:10">MORE →</p>
@@ -48,7 +48,7 @@ BoxLink には主に2通りの使い方があります。
 `<BoxLink>` は `<div>` にしたまま、内部のアンカー要素に `is--coverLink` クラスを付けてボックス全体をクリック可能にします。**BoxLink 内部にさらに別のリンクを配置したい場合はこちらを選ぶこと**。
 
 ```jsx
-<BoxLink as="section" p="30" bgc="base" bd bdrs="30" set="transition" hov="bxsh">
+<BoxLink as="section" p="30" bgc="base" bd bdrs="30" hasTransition hov="-bxsh">
   <Group fz="xl" fw="bold">
     <Link isCoverLink href="/article/1">
       Heading link text
@@ -56,19 +56,19 @@ BoxLink には主に2通りの使い方があります。
   </Group>
   <Text c="text-2" lh="s" my-s="15">記事の抜粋テキスト...</Text>
   <Group my-s="10">
-    <a href="/tag/foo" className="-hov:o">Inner Link</a>
+    <a href="/tag/foo" className="-hov:-o">Inner Link</a>
   </Group>
 </BoxLink>
 ```
 
 ```html
-<div class="is--boxLink -hov:bxsh -p:30 -bgc:base -bd -bdrs:30 set--transition">
+<div class="is--boxLink -hov:-bxsh -p:30 -bgc:base -bd -bdrs:30 has--transition">
   <div class="-fz:xl -fw:bold">
     <a class="is--coverLink" href="/article/1">Heading link text</a>
   </div>
   <p class="-c:text-2 -lh:s -my-s:15">記事の抜粋テキスト...</p>
   <div class="-my-s:10">
-    <a href="/tag/foo" class="-hov:o">Inner Link</a>
+    <a href="/tag/foo" class="-hov:-o">Inner Link</a>
   </div>
 </div>
 ```

package/dist/data/guides/{primitives → trait-class}/is--container.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--container`
 - コンポーネント: `<Container>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_container.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--container/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_container.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--container.md
 
 ## 使い方
 
@@ -15,7 +15,7 @@
 
 | Prop | 出力 |
 |------|------|
-| `isContainer` | `.is--container` |
+| `isContainer` | `is--container` |
 
 ## Usage
 
@@ -39,8 +39,14 @@
 
 子要素側は `p={['10', '30']}` のようなブレイクポイント配列指定にすることで、親の `is--container` を基準としたコンテナクエリで値が切り替わります。
 
+## `--sz--container` の提供
+
+`is--container` は直下の子要素に `--sz--container: 100cqi` をセットします。`-max-sz:container` はこの値を参照しており、`is--container` 基準の幅まで広がります。
+
+`has--gutter` と併用した場合は `calc(100cqi + var(--gutter-size) * 2)` に自動調整され、gutter 分を含めた端〜端の幅になります。
+
 ## 関連プリミティブ
 
 - [is--wrapper](./is--wrapper.md) — コンテンツ幅ラッパー（`isContainer` と併用可）
-- [l--flow](./l--flow.md) — 記事コンテンツ向けフローレイアウト
-- [l--box](./l--box.md) — 汎用ボックス
+- [l--flow](../primitives/l--flow.md) — 記事コンテンツ向けフローレイアウト
+- [l--box](../primitives/l--box.md) — 汎用ボックス

package/dist/data/guides/{primitives → trait-class}/is--layer.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--layer`
 - コンポーネント: `<Layer>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_layer.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--layer/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_layer.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--layer.md
 
 ## 使い方
 
@@ -66,6 +66,6 @@
 
 ## 関連プリミティブ
 
-- [l--frame](./l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
-- [l--grid](./l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
-- [l--center](./l--center.md) — レイヤー内のコンテンツ中央寄せ
+- [l--frame](../primitives/l--frame.md) — `isLayer` 併用でメディア背景のレイヤー化
+- [l--grid](../primitives/l--grid.md) — `ga="1/1"` で position を使わずに重ね配置する代替パターン
+- [l--center](../primitives/l--center.md) — レイヤー内のコンテンツ中央寄せ

package/dist/data/guides/{primitives → trait-class}/is--wrapper.md

@@ -6,8 +6,8 @@
 
 - クラス名: `is--wrapper`
 - コンポーネント: `<Wrapper>`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_wrapper.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--wrapper/
+- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/is/_wrapper.scss
+- 公式ドキュメント: https://lism-css.com/docs/trait-class/is--wrapper.md
 
 ## 使い方
 
@@ -15,10 +15,10 @@
 
 | 指定 | 出力 |
 |------|------|
-| `isWrapper` | `.is--wrapper` |
-| `isWrapper="s"` | `.is--wrapper .-contentSize:s` |
-| `isWrapper="l"` | `.is--wrapper .-contentSize:l` |
-| `isWrapper="20rem"`（任意値） | `.is--wrapper` + `style="--contentSize: 20rem"` |
+| `isWrapper` | `is--wrapper` |
+| `isWrapper="s"` | `is--wrapper -contentSize:s` |
+| `isWrapper="l"` | `is--wrapper -contentSize:l` |
+| `isWrapper="20rem"`（任意値） | `is--wrapper` + `style="--contentSize: 20rem"` |
 
 ## 専用Props
 
@@ -83,5 +83,5 @@
 ## 関連プリミティブ
 
 - [is--container](./is--container.md) — コンテナクエリ基準（`isContainer` と併用可）
-- [l--flow](./l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
-- [l--box](./l--box.md) — 汎用ボックス
+- [l--flow](../primitives/l--flow.md) — 記事フローレイアウト（`layout="flow"` で結合）
+- [l--box](../primitives/l--box.md) — 汎用ボックス

package/dist/data/guides/trait-class.md

@@ -0,0 +1,77 @@
+# Trait クラス
+
+Lism CSS では、要素に対して宣言的に「役割」や「機能」を付与するクラス群を **Trait クラス**（`is--` / `has--`）として定義します。これらは `@layer lism-trait` に属します。
+
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [`is--` Trait（役割宣言）](#is-- trait役割宣言)
+- [`has--` Trait（機能付与）](#has-- trait機能付与)
+
+[詳細](https://lism-css.com/docs/trait-class.md)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | レイヤー | 役割 |
+|--------------|------|---------|------|
+| `is--` | Trait（役割宣言） | `lism-trait` | 要素に「〜である」という役割・存在を宣言する |
+| `has--` | Trait（機能付与） | `lism-trait` | 要素に「〜を持つ」という単一機能を付与する。CSS 変数でカスタマイズ可能 |
+
+併用ルールおよび `is--` / `has--` の判定軸は [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
+
+
+## `is--` Trait（役割宣言）
+
+要素に**役割・存在の宣言**を付与するクラスです。他の Primitive / Component と自由に組み合わせられます。
+
+| クラス | 用途 |
+|--------|------|
+| `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
+| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
+| `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
+| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
+| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
+| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
+| `is--side` | `l--withSide` 直下で使用し、サイド側の要素であることを示す |
+
+Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます（例: `<Lism isContainer>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [is--container](./trait-class/is--container.md)
+- [is--wrapper](./trait-class/is--wrapper.md)
+- [is--layer](./trait-class/is--layer.md)
+- [is--boxLink](./trait-class/is--boxLink.md)
+
+
+## `has--` Trait（機能付与）
+
+要素に**単一機能の trait を付与**するクラスです。CSS 変数によりカスタマイズポイントを提供します。
+
+| クラス | 用途 | 主な CSS 変数 |
+|--------|------|--------------|
+| `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
+| `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter-size`（デフォルト `var(--s30)`） |
+| `has--snap` | `scroll-snap-` 系プロパティを CSS 変数経由でセットできるようにする | `--snapType`, `--snapAlign` 等 |
+| `has--mask` | `--maskImg` 変数と組み合わせて、要素自身にマスクを適用する | `--maskImg`, `--maskPos`（`50%`）, `--maskSize`（`contain`）, `--maskRepeat`（`no-repeat`） |
+
+Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます（例: `<Lism hasTransition>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [has--transition](./trait-class/has--transition.md)
+- [has--gutter](./trait-class/has--gutter.md)
+- [has--snap](./trait-class/has--snap.md)
+- [has--mask](./trait-class/has--mask.md)
+
+
+## `is--` と `has--` の判断軸
+
+| | `is--` | `has--` |
+|---|---|---|
+| 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
+| CSS 変数 | 必須ではない | 必須（カスタマイズポイント） |
+
+- その要素が **何であるか**（役割）を表すなら → `is--`
+- その要素に **どんな機能を持たせるか**（カスタマイズポイント付き）なら → `has--`

package/dist/data/guides/utility-class.md

@@ -16,7 +16,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 - [Opt-in ユーティリティ](#opt-in-ユーティリティ)
 - [ユーザー定義のユーティリティクラス](#ユーザー定義のユーティリティクラス)
 
-[詳細](https://lism-css.com/docs/utility-class/)
+[詳細](https://lism-css.com/docs/utility-class.md)
 
 ---
 
@@ -26,12 +26,12 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 
 | クラス | 用途 | ソースファイル |
 |--------|------|---------------|
-| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
-| `u--trimChildren` | 子要素すべてにハーフレディングトリムを適用（`img`, `figure`, `button` は除外） | [`_trimHL.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trimHL.scss) |
+| `u--trim` | ハーフレディングのネガティブマージンでテキスト上下の余白を詰める | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
+| `u--trimAll` | 直下の子要素（`:empty`, `figure`, `picture`, `video`, `button`, `textarea`, `table` を除く）にハーフレディングトリムを一括適用する除外方式のクラス | [`_trim.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_trim.scss) |
 | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
-| `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
-| `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.scss) |
-| `u--snap` | スクロールスナップコンテナ。`--snapType`, `--snapAlign`, `--snapStop` で制御 | [`_snap.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_snap.scss) |
+| `u--divide` | Grid / Flex の子要素**間**にのみ `box-shadow` で区切り線を表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
+| `u--cells` | Grid / Flex の各子要素を `box-shadow` で枠囲みし、table セル風に表示する | [`_divide.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_divide.scss) |
+| `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_srOnly.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_srOnly.scss) |
 | `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
 
@@ -44,8 +44,8 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 <!-- u--trim: テキスト余白の詰め -->
 <p class="u--trim">テキスト...</p>
 
-<!-- u--collapseGrid: グリッド子要素間の境界線 -->
-<div class="l--grid u--collapseGrid" style="--gtc: 1fr 1fr">
+<!-- u--divide: グリッド子要素間の区切り線 -->
+<div class="l--grid u--divide" style="--gtc: 1fr 1fr">
   <div>A</div>
   <div>B</div>
 </div>
@@ -55,7 +55,7 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 // JSX での使用（className で指定）
 <Lism className="u--cbox" keycolor="red" bd p="20">...</Lism>
 <Text className="u--trim">テキスト...</Text>
-<Grid className="u--collapseGrid" gtc="1fr 1fr">...</Grid>
+<Grid className="u--divide" gtc="1fr 1fr">...</Grid>
 ```
 
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-17',
-    sourceCommit: '38761f59',
+    generatedAt: '2026-04-27',
+    sourceCommit: '09525769',
     docsVersion: '0.1.0',
 };

package/dist/lib/load-markdown.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // スキル Markdown の正本を直接参照（開発・テスト時）
 // npm パッケージとして利用される場合は dist/data/guides/ にフォールバック
-const skillsDir = resolve(__dirname, '..', '..', '..', '..', '.claude', 'skills', 'lism-css-guide');
+const skillsDir = resolve(__dirname, '..', '..', '..', '..', 'skills', 'lism-css-guide');
 const distDir = resolve(__dirname, '..', 'data', 'guides');
 const guidesDir = existsSync(skillsDir) ? skillsDir : distDir;
 const cache = new Map();

package/dist/lib/search.js

@@ -97,7 +97,8 @@ export function searchDocs(entries, query, options) {
 /**
  * `sourcePath`（実 MDX ファイルの相対パス）を公開 URL のスラッグに変換する。
  *
- * - `primitives/` 配下のみファイル名の casing を保持（CSS クラス名と URL を一致させるための例外）
+ * - `primitives/` / `trait-class/` 配下のみファイル名の casing を保持
+ *   （CSS クラス名と URL を一致させるための例外）
  * - それ以外は全て小文字化（Astro content collections の `generateId` と揃える）
  *
  * IMPORTANT: `apps/docs/src/lib/contentSlug.ts` の `toContentSlug` と必ず同じロジックに保つこと。
@@ -105,11 +106,13 @@ export function searchDocs(entries, query, options) {
  * apps/docs 側を変更した場合は必ずここも合わせて更新する。
  *
  * 例:
- *   `primitives/l--tileGrid.mdx`   → `primitives/l--tileGrid`
- *   `core-components/Group.mdx`    → `core-components/group`
- *   `ui/DummyText.mdx`             → `ui/dummytext`
+ *   `primitives/l--tileGrid.mdx`    → `primitives/l--tileGrid`
+ *   `trait-class/is--boxLink.mdx`   → `trait-class/is--boxLink`
+ *   `core-components/Group.mdx`     → `core-components/group`
+ *   `ui/DummyText.mdx`              → `ui/dummytext`
  */
+const PRESERVE_CASE_PREFIXES = ['primitives/', 'trait-class/'];
 function sourcePathToUrlSlug(sourcePath) {
     const withoutExt = sourcePath.replace(/\.mdx$/, '');
-    return withoutExt.startsWith('primitives/') ? withoutExt : withoutExt.toLowerCase();
+    return PRESERVE_CASE_PREFIXES.some((prefix) => withoutExt.startsWith(prefix)) ? withoutExt : withoutExt.toLowerCase();
 }

package/dist/tools/get-component.js

@@ -23,9 +23,10 @@ function parsePrimitiveHeading(md) {
         return null;
     return { className: match[1], componentName: match[2] };
 }
+const ALIAS_SOURCE_DIRS = ['primitives/', 'trait-class/'];
 let classAliasMap = null;
 let componentAliasMap = null;
-/** primitives/*.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
+/** primitives/ および trait-class/ 配下の *.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
  *  angle-bracket 形式の問い合わせには componentAliasMap のみを照合し、
  *  クラス専用プリミティブへの false positive を避けるために分離している。 */
 function buildAliasMaps() {
@@ -34,7 +35,7 @@ function buildAliasMaps() {
     const classMap = new Map();
     const componentMap = new Map();
     for (const filename of getGuideFilenames()) {
-        if (!filename.startsWith('primitives/'))
+        if (!ALIAS_SOURCE_DIRS.some((dir) => filename.startsWith(dir)))
             continue;
         const parsed = parsePrimitiveHeading(loadMarkdown(filename));
         if (!parsed)
@@ -136,7 +137,7 @@ export function registerGetComponent(server) {
                     for (const [key, file] of map) {
                         if (key.includes(normalizedKey) && !seenFiles.has(file)) {
                             seenFiles.add(file);
-                            moduleCandidates.push(file.replace(/^primitives\//, '').replace(/\.md$/, ''));
+                            moduleCandidates.push(file.replace(new RegExp(`^(${ALIAS_SOURCE_DIRS.join('|')})`), '').replace(/\.md$/, ''));
                         }
                     }
                 }

package/dist/tools/get-guide.js

@@ -14,11 +14,18 @@ const GUIDE_TOPICS = {
         label: 'UI components (Accordion, Modal, Tabs, Button, etc.)',
     },
     'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
-    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--shadow, set--hov, etc.)' },
-    'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
+    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
+    'primitive-class': {
+        file: 'primitive-class.md',
+        label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--), with column-layout primitive selection guide',
+    },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },
     responsive: { file: 'prop-responsive.md', label: 'Responsive design, breakpoints, container queries' },
+    antipatterns: {
+        file: 'antipatterns.md',
+        label: 'AI code-generation antipatterns: token typos, prop type mistakes, layout choice errors, responsive omissions',
+    },
 };
 const TOPIC_DESCRIPTION = Object.entries(GUIDE_TOPICS)
     .map(([key, { label }]) => `- ${key}: ${label}`)

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.14.0",
+  "version": "0.15.1",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "scripts": {
     "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../.claude/skills/lism-css-guide dist/data/guides",
+    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../skills/lism-css-guide dist/data/guides",
     "dev": "tsc --watch",
     "test": "vitest run"
   }