@lism-css/mcp 0.15.0 → 0.17.0

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,26 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "lism-css v.0.17.0 (2026.05.09)",
+      "-max-sz:bleed の新設 (#360)",
+      "--REM 廃止と --fz--base の簡素化",
+      "a タグのリンク装飾スタイル廃止",
+      "Bug Fixes",
+      "lism-css v.0.16.1 (2026.04.29)",
+      "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 +319,14 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。"
+    "snippet": "Lism CSS の各バージョンにおける変更内容を記載。v.0.17.0 の破壊的変更として -max-sz:container 廃止と -max-sz:bleed 新設（#360）、--REM 廃止と --fz--base の 1rem 統一、a タグのリンク装飾スタイル廃止など。v.0.16.0 では Layout Primitive 命名整理（l--sideMain → l--withSide, l--fluidCols → l--autoColumns, l--switchCols → l--switchColumns）、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 を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
@@ -308,7 +335,7 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": [".-hov:-{prop} の使い方", ".-hov:{preset} の使い方", ".-hov:in:{preset} の使い方", "トランジションを設定する方法"],
+    "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 クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
@@ -317,9 +344,9 @@
     "title": "-max-sz",
     "description": "コンテンツの最大幅を制御する -max-sz プロパティクラスの使い方について解説します。",
     "category": "property-class",
-    "headings": ["-max-sz:full, -max-sz:container", "DEMOページ"],
-    "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "container"],
-    "snippet": "max-sz (max-inline-size) の Prop。xs, s, m, l, xl のサイズトークンで最大幅を指定。-max-sz:full, -max-sz:container の特殊クラスも解説。"
+    "headings": ["full & bleed", "DEMOページ"],
+    "keywords": ["max-sz", "max-inline-size", "最大サイズ", "幅", "full", "bleed"],
+    "snippet": "max-sz (max-inline-size) の Prop。xs, s, m, l, xl のサイズトークンで最大幅を指定。-max-sz:full（親要素いっぱいに広がる）と -max-sz:bleed（最外側の is--container 幅まで広がる）特殊クラスも解説。"
   },
   {
     "sourcePath": "core-components/Lism.mdx",
@@ -559,17 +586,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 +617,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 +984,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 +1011,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.17.0` / `@lism-css/ui@0.17.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 パッケージ
@@ -38,40 +38,115 @@ import 'lism-css/main.css';
 ```jsx
 // React
 import { Flex, Stack, Grid, Columns } from 'lism-css/react';
-import { Accordion, Tabs, Button } from '@lism-css/ui/react';
+import { Accordion } from '@lism-css/ui/react/Accordion';
+import { Tabs } from '@lism-css/ui/react/Tabs';
+import { Button } from '@lism-css/ui/react/Button';
 
 // Astro
 import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
-import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
+import { Accordion } from '@lism-css/ui/astro/Accordion';
+import { Tabs } from '@lism-css/ui/astro/Tabs';
+import { Button } from '@lism-css/ui/astro/Button';
 ```
 
 
 ## 実装ルール
 
+### コードを書く前に必ず参照
+
+レイアウト選択ミスや典型的な記法ミスを避けるため、コード生成の前に以下を確認すること：
+
+- **どの Primitive を使うか迷ったら** → [primitive-class.md の「カラムレイアウト Primitive の使い分けガイド」](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド) — 比較表と用途別の選び方で判断材料を提供
+- **コードを書く前のチェック** → [antipatterns.md](./antipatterns.md) — Token typo / px 直書き / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜けの NG → OK カタログ
+
+### プリフライト・プリミティブ選定（必須）
+
+実装対象の UI 構造を見て、**まずどのプリミティブ／コンポーネントを使うかを決めること**。ここを飛ばすと `<div>` + Property Class でゴリ押すコードになり、レイアウトの一貫性が失われる。
+
+検討順：
+
+1. **レイアウトプリミティブ** — `Stack` / `Flex` / `Cluster` / `Grid` / `Columns` / `WithSide` / `Center` / `Frame` / `Flow` / `TileGrid` / `AutoColumns` / `SwitchColumns` / `Box` のいずれかで構造を組めないか？
+2. **Trait クラス** — `Container`(`is--container`) / `Wrapper`(`is--wrapper`) / `Layer`(`is--layer`) / `BoxLink`(`is--boxLink`) で表現すべき役割が無いか？
+3. **Atomic プリミティブ** — `Icon` / `Divider` / `Spacer` / `Decorator` で置き換えられる装飾要素が無いか？
+4. **UI コンポーネント** — `@lism-css/ui` の `Accordion` / `Modal` / `Tabs` / `Button` / `Badge` / `Callout` 等で済む UI が無いか？
+
+判断に迷う場合：
+
+- カラム系の使い分け → [primitive-class.md の使い分けガイド](./primitive-class.md#カラムレイアウト-primitive-の使い分けガイド)
+- 典型的な選択ミス → [antipatterns.md のレイアウト選択ミス](./antipatterns.md#レイアウト選択ミス)
+
+### プリフライト・トークン照合（必須）
+
+コードを書き始める前に、**これから使う予定の数値・キー名・カラー名をすべて列挙し、[tokens.md](./tokens.md) の値リストと照合すること**。照合が済むまでコードを書かない。
+
+頻出ミス（spacing 中間値・角丸/影の数値外し・fz の他FW混入・存在しないカラー名・`--keycolor` 誤用 など）の NG → OK 例は [antipatterns.md](./antipatterns.md) を参照。
+
+照合中に「該当トークンが無い／揺れる」値が見つかった場合は、そのまま実装に進まず [デザインデータ取り込み時のフロー](#デザインデータ取り込み時のフロー) に従ってユーザー確認すること。
+
+### プリフライト・c-- 定義時の分解（必須）
+
+`c--*` を新規に定義する／既存に追記する前に、書こうとしている各 CSS 宣言を以下の 2 グループに分解する：
+
+1. **Property Class / Props で書ける宣言** — マークアップ側に `-{prop}:{value}` または Lism Props として移す。CSS に書かない。
+2. **CSS でしか書けない宣言** — 擬似クラス・擬似要素・状態切替・子孫セレクタなど。これらは `.c--*` の CSS に残す。
+
+**CSS が 1 行も残らなくても、`c--*` クラス名はマークアップに付けたまま残してよい。**
+むしろコンポーネントとしての意味づけがソースから読み取れるので、空の `c--*` クラスは付けておくことを推奨する（CSS ファイル側にセレクタを書く必要は無い）。
+
+例：
+
+NG（全部 CSS に書く）
+
+```css
+.c--tag {
+  font-size: var(--fz--xs);
+  padding: var(--s10);
+  background-color: var(--base-2);
+  border-radius: var(--bdrs--10);
+}
+```
+
+OK（Property Class でマークアップに移し、`c--tag` は意味づけとして残す）
+
+```html
+<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">React</span>
+```
+
+`.c--tag` の CSS には、`:hover` 等の擬似クラスや、Modifier（`.c--tag--solid`）・状態切替（`[data-is-active]` 等）の宣言が出てきた時にだけ書く。そういう宣言が無ければ CSS は空のままで OK（クラス名はマークアップに残す）。
+
+> **注意**: `is--*` は「〜である（役割・存在の宣言）」を表す trait 用プレフィックス。ユーザー定義の `is--*` を追加することは可能だが、**状態管理（`is--active` 等）やスタイルバリエーション（`is--solid` 等）への流用は誤用**。状態は `data-*` 属性、バリエーションは BEM Modifier（`c--{name}--{variant}`）で表現する。詳細: [antipatterns.md の `is--` の誤用](./antipatterns.md#is---の誤用状態バリエーション)
+
+詳細な NG → OK 例は [antipatterns.md の「Property Class で書けるのに CSS で書く」](./antipatterns.md#property-class-で書けるのに-css-で書く) を参照。
+
 ### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
 
-まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。
+プリフライトでプリミティブとトークンを決めたら、細部を以下のチェックリストで検討する：
 
-- `l--`,`a--`,`is--` などの Primitive Class や `c--` などの Component Class を用いることができるか？（React, Astroの場合は `Lism`, `Stack`, `Flex`, `Columns` 等のコンポーネントを利用して構築できるか？）
 - Lism の用意している `set--`系クラス、`u--`系クラスは使えないか？
 - Property Class (`-{prop}:{value}` or `<Lism prop="value">`))を使ってスタイリングできるか？
 - 値をレスポンシブに切り替える時は Lism の Property Class (`-{prop}_{bp}` or `<Lism prop={[...]}>`)を使って実装できるか？
 - カラー・余白・フォントサイズ・タイポグラフィ・行間（ハーフレディング）・サイズ・角丸・シャドウなどはトークン値を流用できないか？
 - その他、Lismが用意するCSS変数を活用できないか？
 
-### ネイティブCSS で書くもの（必要に応じて適切な `@layer` 内で書くこと）
+### ネイティブCSS で書くかどうか
+
+`c--*` クラスを定義する際、Primitive Class / Trait Class / Property Class / Lism Props で書ける宣言は CSS に直接書かない。
+
+CSS（`@layer lism-component` 等）に書くのは、以下のいずれかに該当する宣言のみ：
+
+- 擬似クラス・擬似要素（`:focus`, `::before`, `::after`, `:nth-child` 等）
+- 状態切替（data属性で管理する`[data-is-active]`等）で複数プロパティを切り替える場合
+- 自分でクラスを付けられない子孫要素のスタイル（MDX/markdown レンダリング配下の `h2` / `p` / `blockquote` 等）
+- その他、Lism の既存クラスで表現できないスタイル。（計算式・特殊なスタイル、アニメーションなど。）
+
+
+### コンポーネント化のルール（CSS ではなくマークアップで束ねる）
 
-- Lismにないアニメーションやhoverエフェクト（適宜クラスを追加して使用する）
-- 独自コンポーネントの実装に合わせた`c--`クラス(`@layer lism-component`内で定義する)
-- 複雑なセレクタ（`:nth-child`, `::before`, `::after` 等）を使用する必要があるスタイル
-- カスタムプロパティを使った独自の計算式が必要なスタイル
-- その他、Lism のトークンやプリミティブでカバーできない特殊なスタイル
+同じ Property Class の組み合わせが 3 箇所以上で繰り返されるなら、**まず Astro/React コンポーネントとして切り出して Props で共通化** することを検討する。CSS の `c--*` を新設して中にスタイルを書くのはそれができない場合の手段とする。
 
-### コンポーネント化のルール
+- コンポーネントはできる限り `<Lism>` 系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築する。
+- カスタムコンポーネントクラスは `c--{name}` の命名規則に従う（CSS が空でも意味づけとして付ける）。
 
-- 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
-- コンポーネントはできる限り `<Lism>`系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築すること。
-- カスタムクラスが必要な場合は `.c--{name}` の命名規則に従う。
 
 ### 間違いやすい例
 
@@ -82,10 +157,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`クラス) が必要なことに注意。
 
@@ -94,6 +171,40 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 ページ全体のデザインデータを渡された時、サイト幅やセクションエリアのサイズをpxでハードコーディングする前に、`--sz--`トークンを活用できないかをまずは考えてください。
 `<Lism as="section" max-sz="m"`>(`-max-sz:m`クラス) などの指定でコンテンツ幅を管理することができます。
 
+### デザインデータ取り込み時のフロー
+
+Figma 等のデザインデータから値を読み取って実装する場合、px / rem / em の固定値が含まれることが多い。**実装に着手する前に**以下の手順でユーザーに方針を確認すること。確認せずに px 直書きで進めない。
+
+#### 手順
+
+1. **px / rem / em で書かれた値を抽出**（spacing / radius / size / fz / lh / lts / shadow など）
+2. **対応するトークン候補と差分を表で提示**
+
+   | デザイン値 | 最寄りトークン | 差分 |
+   |---|---|---|
+   | `padding: 12px` | `--s15`（≒12px） | 一致 |
+   | `padding: 3px` | `--s5`（≒4px） | +1px |
+   | `border-radius: 6px` | `--bdrs--10`（4px）／`--bdrs--20`（8px） | ±2px |
+   | `font-size: 13px` | `--fz--xs`（mol/(mol+2)） | スケール基準でズレる |
+
+3. **ユーザーに方針を確認**（候補は以下の3択）
+
+   - **A. デザイン値を優先して px / rem / em で直書きする**
+     - 一貫性より忠実度を優先するケース。デザイントークンの恩恵は失う。
+   - **B. 最寄りトークンに丸める（推奨）**
+     - 一貫性・スケーラビリティを優先。微差は許容する。
+   - **C. トークン全体の基準値を上書きする**
+     - デザインのスケールに合わせて、`--s-unit` / `--fz-mol` などの基準変数や、 `--s10`, `--fz--xl` , `--bdrs--10` などの**具体的な各トークン変数を `global.css` で再定義**することで、トークン全体をデザインデータに揃える。
+     - 既存トークンの上書きで吸収できない場合に限り、`--s25` 等のカスタムトークンを追加する。
+
+4. 確認結果に従って実装する。
+
+#### 確認不要な例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- ブラウザ仕様上 px 必須の値（`media query`、`@container` の `min-width` 等）
+
 
 ## 詳細リファレンス
 
@@ -104,7 +215,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 / px 直書き / `--keycolor` 誤用 / 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 +242,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--)**
 
@@ -159,7 +271,7 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 
 - `-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)
+- `-max-sz:full` / `-max-sz:bleed`: [property-class/max-sz.md](./property-class/max-sz.md)
 
 
 ## このスキルファイル自身のアップデート方法