@lism-css/mcp 0.15.1 → 0.18.0

package/dist/data/docs-index.json

@@ -73,11 +73,11 @@
   {
     "sourcePath": "tokens.mdx",
     "title": "デザイントークン",
-    "description": "Lism CSS で定義されているカラー、スペーシング、シャドウなどのデザイントークン一覧を紹介します。",
+    "description": "Lism CSS で定義されているカラー、余白、シャドウなどのデザイントークン一覧を紹介します。",
     "category": "guide",
     "headings": ["COLOR", "Typography", "SPACE", "RADIUS", "SHADOW", "OPACITY", "SIZE"],
     "keywords": ["token", "トークン", "design token", "shadow", "radius", "opacity", "size", "color", "spacing", "typography"],
-    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・スペーシングは個別ページでも詳細を解説。"
+    "snippet": "デザイントークンの一覧ページ。COLOR, Typography, SPACE, RADIUS, SHADOW, OPACITY, SIZE トークンを掲載。カラー・タイポグラフィ・余白は個別ページでも詳細を解説。"
   },
   {
     "sourcePath": "tokens/colors.mdx",
@@ -108,8 +108,8 @@
   },
   {
     "sourcePath": "tokens/spacing.mdx",
-    "title": "スペーシングトークン",
-    "description": "Lism CSS のフィボナッチ数列に基づくスペーシングトークンと、対応するpropertyクラスについて解説します。",
+    "title": "余白トークン",
+    "description": "Lism CSS のフィボナッチ数列に基づく余白トークンと、対応するpropertyクラスについて解説します。",
     "category": "guide",
     "headings": ["SPACE: 余白のスケーリング", "対応する Property Class"],
     "keywords": ["spacing", "余白", "スペーシング", "フィボナッチ", "padding", "margin", "gap", "property class"],
@@ -200,7 +200,7 @@
   },
   {
     "sourcePath": "responsive.mdx",
-    "title": "Prop Responsive",
+    "title": "Responsive",
     "description": "Lism CSS におけるブレイクポイントとレスポンシブ対応の仕組みについて解説します。",
     "category": "guide",
     "headings": ["レスポンシブ対応", "コンテナクエリ・メディアクエリ", "ブレイクポイント"],
@@ -280,6 +280,12 @@
     "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)",
@@ -313,7 +319,7 @@
       "v.0.8 (大幅な変更)"
     ],
     "keywords": ["changelog", "変更履歴", "更新", "バージョン"],
-    "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）などがある。"
+    "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",
@@ -329,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 クラスで親要素ホバー時の子要素スタイル制御も可能。"
   },
@@ -338,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",

package/dist/data/guides/SKILL.md

@@ -9,7 +9,7 @@ description: "Lism CSS の設計・実装に関するガイド。CSSの編集・
 
 調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-> **バージョン情報:** このガイドは `lism-css@0.16.0` / `@lism-css/ui@0.16.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.18.0` / `@lism-css/ui@0.17.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
@@ -38,11 +38,15 @@ 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';
 ```
 
 
@@ -53,32 +57,96 @@ 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 カタログ
+- **コードを書く前のチェック** → [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}` の命名規則に従う。
 
 ### 間違いやすい例
 
@@ -103,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` で再定義**することで、トークン全体をデザインデータに揃える。
+     - 既存トークンの上書きで吸収できない場合に限り、`--s45` 等のカスタムトークンを追加する。
+
+4. 確認結果に従って実装する。
+
+#### 確認不要な例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- ブラウザ仕様上 px 必須の値（`media query`、`@container` の `min-width` 等）
+
 
 ## 詳細リファレンス
 
@@ -114,11 +216,11 @@ import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 - [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--`）の一覧と用途。カラムレイアウト系の使い分けガイドも含む。
-- [antipatterns.md](./antipatterns.md) — AI が生成しがちな NG パターンと OK 対応。Token typo / Prop 型ミス / レイアウト選択ミス / レスポンシブ抜け。
+- [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}`形式のクラス）の一覧・記法。
-- [prop-responsive.md](./prop-responsive.md) — レスポンシブ対応（ブレークポイント・コンテナクエリ）の書き方・仕様。
+- [responsive.md](./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` によるコアコンポーネント挙動のカスタマイズ方法。
@@ -169,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)
 
 
 ## このスキルファイル自身のアップデート方法

package/dist/data/guides/antipatterns.md

@@ -5,6 +5,11 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 ## TOC
 
 - [Token typo（存在しない値）](#token-typo存在しない値)
+- [px / 固定値の直書き](#px--固定値の直書き)
+- [Property Class で書けるのに CSS で書く](#property-class-で書けるのに-css-で書く)
+- [`is--` の誤用（状態・バリエーション）](#is---の誤用状態バリエーション)
+- [クラス名の命名ミス（kebab-case）](#クラス名の命名ミスkebab-case)
+- [`--keycolor` の誤用](#--keycolor-の誤用)
 - [Prop 型ミス](#prop-型ミス)
 - [レイアウト選択ミス](#レイアウト選択ミス)
 - [レスポンシブ抜け](#レスポンシブ抜け)
@@ -32,10 +37,13 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 
 ### スペース（`p` / `m` / `g` 等）
 
+スペーストークンの数値は**離散的**で、`5/10/15/20/25/30/35/40/50/60/70/80` のみが用意されている。`8/12/14/45/65/75` 等を書きそうになったら、必ず最寄りトークンに丸めるか、ユーザーに方針確認すること（→ [SKILL.md のデザイン取り込みフロー](./SKILL.md#デザインデータ取り込み時のフロー)）。
+
 | NG | OK | 理由 |
 |---|---|---|
-| `p="8"` | `p="10"` | スペーストークンは`5/10/15/20/30/40/50/60/70/80`。tailwindのような4の倍数ではない |
+| `p="8"` | `p="10"` | スペーストークンは離散値のみ。tailwindのような4の倍数で連続するスケールではない |
 | `g="6"` | `g="5"` | 同上 |
+| `m="45"`, `m="55"` | `m="40"` or `m="50"` | `40` 以降の中間値は用意されていない（前半は `5/15/25/35` まで補完済み） |
 | `m="100"` | `m="80"` | 上限は `80`（ユーザーが追加定義している可能性はある） |
 
 ### フォントサイズ（`fz`）
@@ -53,6 +61,296 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 | `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` |
 
+### プリセット外の値を Lism Props に渡している
+
+Lism Props では、props.ts で事前定義されたものが `-{prop}:{value}` クラスとして出力される。それ以外の値はそのまま出力されてCSSとして無効になる。
+
+```JSX
+// NG: 事前定義されたトークン値に合致しないため、-lts:2xl は出力されない
+<Text lts="2xl">...</Text>
+```
+
+独自にProperty Classを拡張したりトークン値を増やしたりする場合は、 [property-class.md の `:value` 記法](./property-class.md)を活用するか、[`lism.config.js`による拡張](./customize.md)が必要。
+
+---
+
+## px / 固定値の直書き
+
+デザインデータ由来の px / rem / em をそのまま書くと、Lism CSS のスケール統一が崩れる。**書く前に [SKILL.md のデザインデータ取り込み時のフロー](./SKILL.md#デザインデータ取り込み時のフロー) に従い、ユーザーに「A: そのまま採用 / B: 最寄りトークンに丸める / C: トークン基準値を上書きする」を確認すること**。確認なしに固定値を採用しない。
+
+### スペース・サイズ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `padding: 3px 10px` | `padding: var(--s5) var(--s10)` または Props で `py="5" px="10"` | `3px` はトークン外。最寄りは `--s5`(4px) |
+| `min-width: 28px; height: 28px` | `min-w` / `h` をトークン値に丸める、または基準値を上書き | `28px` はトークン外 |
+| `gap: var(--s5); padding: var(--s10) var(--s15)` を CSS で直書き | `<Lism g="5" py="10" px="15">` | Property Class / Props で書ける |
+
+### 角丸・ボーダー
+
+| NG | OK | 理由 |
+|---|---|---|
+| `border-radius: 2px` | `border-radius: var(--bdrs--10)`（4px） | 角丸トークンの最小は `--bdrs--10`（4px）。`2px` はトークン外 |
+| `border-radius: 6px` | `--bdrs--10`（4px）か `--bdrs--20`（8px）に丸める | 6px はトークン外 |
+
+### タイポグラフィ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `font-size: 13px` を直書き | `font-size: var(--fz--xs)` または Props で `fz="xs"` | フォントサイズは調和数列スケール。固定値は避ける |
+| `letter-spacing: 0.02 / 0.12 / 0.14 / 0.18 / 0.2 / 0.24em` を散在 | `--lts--s/-l/-xl` を使う、または独自の `--lts--*` を `global.css` で追加 | デフォルトの `lts` トークンは `s/l/xl` のみ。多種混在はデザイントークンとして不健全 |
+
+### 直書きしてよい例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- `media query` / `@container` の閾値など、ブラウザ仕様上 px 必須の値
+
+---
+
+## Property Class で書けるのに CSS で書く
+
+`c--*` を定義したくなったら、まず宣言ごとに Property Class へ落とせるか確認する。落とせる宣言を CSS に書くと、CSS が肥大化し、Property Class の利点（差分上書きの容易さ・読みやすさ）が失われる。
+
+| NG（CSS 直書き） | OK（Property Class） |
+|---|---|
+| `.c--tag { font-size: var(--fz--xs); padding: var(--s10); background: var(--base-2); border-radius: var(--bdrs--10); }` | `<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">` |
+| `.c--eyebrow { font-size: var(--fz--2xs); color: var(--text-2); text-transform: uppercase; }` | `<span class="c--eyebrow -fz:2xs -c:text-2 -tt:uppercase">` |
+
+
+CSS に残すのは、基本的には　`::before` / `> li` などの「Primitive / Trait / Property Class で書けないセレクタ」を伴う宣言。単一要素への装飾束は呼び出し側マークアップに移す。
+
+なお、**CSS が空になっても `c--*` クラス名はマークアップに残して構わない**（むしろ推奨）。コンポーネントとしての役割をソースから読み取りやすくする目的で、意味づけ用に付けたままにする。
+
+
+---
+
+## `is--` の誤用（状態・バリエーション）
+
+Lism CSS の `is--` プレフィックスは「**〜である**」という**役割・存在の宣言**を表す trait 用（`is--container` / `is--wrapper` / `is--layer` / `is--boxLink` / `is--coverLink` / `is--skipFlow` / `is--side` 等）。ユーザーが独自に `is--*` を追加することは可能だが、**その要素の役割（trait）を宣言するもの**であることが条件で、**状態管理やスタイルバリエーション目的に流用しない**（`is--active` / `is--current` / `is--solid` などは誤用）。
+
+→ 詳細: [trait-class.md](./trait-class.md#is-trait役割宣言)
+
+`is--` と紛れがちな 2 つの用途は、Lism では別の手段で表現する：
+
+### 1. 状態管理 → `data-*` 属性を使う
+
+オン/オフが切り替わる状態（active / current / disabled / open / selected 等）は、`is--*` クラスを増やさず HTML の `data-*` 属性で表現する。CSS は属性セレクタで書く。
+
+| NG | OK |
+|---|---|
+| `<a class="c--catTab is--active">` + `.c--catTab.is--active { ... }` | `<a class="c--catTab" data-is-active>` + `.c--catTab[data-is-active] { ... }` |
+| `<li class="c--pager_num is--current">` + `.c--pager_num.is--current { ... }` | `<li class="c--pager_num" aria-current="page">` + `.c--pager_num[aria-current] { ... }` |
+| `<a class="c--pager_nav is--disabled">` + `.c--pager_nav.is--disabled { ... }` | `<a class="c--pager_nav" data-is-disabled>` + `.c--pager_nav[data-is-disabled] { ... }` |
+
+理由：
+
+- `is--*` は「役割宣言」用の trait であり、状態を表すクラスを `is--*` として増やすと意味体系（trait か state か）が混在して読みにくくなる
+- `data-*` は HTML 標準の状態表現で、JS からの切替（`element.dataset.isActive = ''` / `delete element.dataset.isActive`）も自然
+- ARIA 属性で意味が表せる場合（`aria-current` / `aria-disabled` / `aria-selected` 等）は ARIA を優先し、その属性自体を CSS セレクタにする
+
+### 2. スタイルバリエーション → BEM Modifier `c--{name}--{variant}`
+
+「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の Component Class](./css-rules.md#component-classc--)）。
+
+| NG | OK |
+|---|---|
+| `<span class="c--tag is--solid">` + `.c--tag.is--solid { ... }` | `<span class="c--tag c--tag--solid">` + `.c--tag.c--tag--solid { ... }` |
+| `<button class="c--button is--outline">` | `<button class="c--button c--button--outline">` |
+
+なお、「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+
+---
+
+## クラス名の命名ミス（kebab-case）
+
+Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `set--` 等）に続く名称は **camelCase** で書くのが規約。kebab-case で書くと、BEM の Modifier 区切り（`--`）と視覚的に紛れて読みにくくなる。
+
+→ 詳細: [naming.md](./naming.md#クラス名)
+
+| NG | OK | 理由 |
+|---|---|---|
+| `c--my-card` | `c--myCard` | プレフィックス後の名称は camelCase |
+| `c--my-card--primary` | `c--myCard--primary` | Modifier 区切り `--` と単語区切り `-` が混在して読みにくい |
+| `c--card_my-elem` | `c--card_myElem` | Element 名（`_` 後）も camelCase |
+| `is--side-bar` / `has--gutter-x` | `is--sideBar` / `has--gutterX` | `is--` / `has--` / `u--` 等にも同じ規則が適用される |
+
+```jsx
+// NG: kebab-case
+<Stack className="c--feature-card" />
+<div className="c--user-profile c--user-profile--compact" />
+
+// OK: camelCase
+<Stack className="c--featureCard" />
+<div className="c--userProfile c--userProfile--compact" />
+```
+
+---
+
+## `--keycolor` の誤用
+
+`--keycolor` は要素単位で「軸となる色」を切り替えるための**ローカル変数**。サイト全体のブランドカラーやリンクカラーには使わない。
+
+### `:root` でのグローバル上書き
+
+| NG | OK | 理由 |
+|---|---|---|
+| `:root { --keycolor: #c8553d; }` | `:root { --brand: #c8553d; }`（または `--accent` / `--link`） | サイト共通の色は `--brand` / `--accent` / `--link` などのセマンティックカラーで定義する |
+
+### アクセントカラーとしての `keycolor` 参照
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Link c="keycolor">` | `<Link c="brand">` または `<Link c="link">` | リンク・hover などの恒常的なアクセントは `brand` / `link` を使う |
+| `hov={{ c: 'keycolor' }}` | `hov={{ c: 'brand' }}` | 同上 |
+| `border-inline-start: 3px solid var(--keycolor)`（CSS 直書き） | `border-inline-start: 3px solid var(--brand)` | 同上 |
+
+### `--keycolor` を使うべき場面
+
+「**そのボックス／コンポーネント自身の軸色**」を切り替えたい時のみ：
+
+```html
+<!-- u--cbox や c--callout など、ボックス全体の色味を局所的に切り替える -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="--c: var(--keycolor)">danger 用カラーリング</p>
+</div>
+```
+
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
+詳細: [tokens.md のキーカラー変数セクション](./tokens.md#キーカラー変数-keycolor)
+
+---
+
+## px / 固定値の直書き
+
+デザインデータ由来の px / rem / em をそのまま書くと、Lism CSS のスケール統一が崩れる。**書く前に [SKILL.md のデザインデータ取り込み時のフロー](./SKILL.md#デザインデータ取り込み時のフロー) に従い、ユーザーに「A: そのまま採用 / B: 最寄りトークンに丸める / C: トークン基準値を上書きする」を確認すること**。確認なしに固定値を採用しない。
+
+### スペース・サイズ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `padding: 3px 10px` | `padding: var(--s5) var(--s10)` または Props で `py="5" px="10"` | `3px` はトークン外。最寄りは `--s5`(4px) |
+| `min-width: 28px; height: 28px` | `min-w` / `h` をトークン値に丸める、または基準値を上書き | `28px` はトークン外 |
+| `gap: var(--s5); padding: var(--s10) var(--s15)` を CSS で直書き | `<Lism g="5" py="10" px="15">` | Property Class / Props で書ける |
+
+### 角丸・ボーダー
+
+| NG | OK | 理由 |
+|---|---|---|
+| `border-radius: 2px` | `border-radius: var(--bdrs--10)`（4px） | 角丸トークンの最小は `--bdrs--10`（4px）。`2px` はトークン外 |
+| `border-radius: 6px` | `--bdrs--10`（4px）か `--bdrs--20`（8px）に丸める | 6px はトークン外 |
+
+### タイポグラフィ
+
+| NG | OK | 理由 |
+|---|---|---|
+| `font-size: 13px` を直書き | `font-size: var(--fz--xs)` または Props で `fz="xs"` | フォントサイズは調和数列スケール。固定値は避ける |
+| `letter-spacing: 0.02 / 0.12 / 0.14 / 0.18 / 0.2 / 0.24em` を散在 | `--lts--s/-l` を使う、または独自の `--lts--*` を `global.css` で追加 | デフォルトの `lts` トークンは `s/l` のみ。多種混在はデザイントークンとして不健全 |
+
+### 直書きしてよい例外
+
+- 1px / -1px の罫線・視覚補正（border / margin の打ち消し）
+- transform / vertical-align 等の微調整値（数 px 単位）
+- `media query` / `@container` の閾値など、ブラウザ仕様上 px 必須の値
+
+---
+
+## Property Class で書けるのに CSS で書く
+
+`c--*` を定義したくなったら、まず宣言ごとに Property Class へ落とせるか確認する。落とせる宣言を CSS に書くと、CSS が肥大化し、Property Class の利点（差分上書きの容易さ・読みやすさ）が失われる。
+
+| NG（CSS 直書き） | OK（Property Class） |
+|---|---|
+| `.c--tag { font-size: var(--fz--xs); padding: var(--s10); background: var(--base-2); border-radius: var(--bdrs--10); }` | `<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">` |
+| `.c--eyebrow { font-size: var(--fz--2xs); color: var(--text-2); text-transform: uppercase; }` | `<span class="c--eyebrow -fz:2xs -c:text-2 -tt:uppercase">` |
+
+
+CSS に残すのは、基本的には　`::before` / `> li` などの「Primitive / Trait / Property Class で書けないセレクタ」を伴う宣言。単一要素への装飾束は呼び出し側マークアップに移す。
+
+なお、**CSS が空になっても `c--*` クラス名はマークアップに残して構わない**（むしろ推奨）。コンポーネントとしての役割をソースから読み取りやすくする目的で、意味づけ用に付けたままにする。
+
+
+---
+
+## `is--` の誤用（状態・バリエーション）
+
+Lism CSS の `is--` プレフィックスは「**〜である**」という**役割・存在の宣言**を表す trait 用（`is--container` / `is--wrapper` / `is--layer` / `is--boxLink` / `is--coverLink` / `is--skipFlow` / `is--side` 等）。ユーザーが独自に `is--*` を追加することは可能だが、**その要素の役割（trait）を宣言するもの**であることが条件で、**状態管理やスタイルバリエーション目的に流用しない**（`is--active` / `is--current` / `is--solid` などは誤用）。
+
+→ 詳細: [trait-class.md](./trait-class.md#is-trait役割宣言)
+
+`is--` と紛れがちな 2 つの用途は、Lism では別の手段で表現する：
+
+### 1. 状態管理 → `data-*` 属性を使う
+
+オン/オフが切り替わる状態（active / current / disabled / open / selected 等）は、`is--*` クラスを増やさず HTML の `data-*` 属性で表現する。CSS は属性セレクタで書く。
+
+| NG | OK |
+|---|---|
+| `<a class="c--catTab is--active">` + `.c--catTab.is--active { ... }` | `<a class="c--catTab" data-is-active>` + `.c--catTab[data-is-active] { ... }` |
+| `<li class="c--pager_num is--current">` + `.c--pager_num.is--current { ... }` | `<li class="c--pager_num" aria-current="page">` + `.c--pager_num[aria-current] { ... }` |
+| `<a class="c--pager_nav is--disabled">` + `.c--pager_nav.is--disabled { ... }` | `<a class="c--pager_nav" data-is-disabled>` + `.c--pager_nav[data-is-disabled] { ... }` |
+
+理由：
+
+- `is--*` は「役割宣言」用の trait であり、状態を表すクラスを `is--*` として増やすと意味体系（trait か state か）が混在して読みにくくなる
+- `data-*` は HTML 標準の状態表現で、JS からの切替（`element.dataset.isActive = ''` / `delete element.dataset.isActive`）も自然
+- ARIA 属性で意味が表せる場合（`aria-current` / `aria-disabled` / `aria-selected` 等）は ARIA を優先し、その属性自体を CSS セレクタにする
+
+### 2. スタイルバリエーション → BEM Modifier `c--{name}--{variant}`
+
+「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の Component Class](./css-rules.md#component-classc--)）。
+
+| NG | OK |
+|---|---|
+| `<span class="c--tag is--solid">` + `.c--tag.is--solid { ... }` | `<span class="c--tag c--tag--solid">` + `.c--tag.c--tag--solid { ... }` |
+| `<button class="c--button is--outline">` | `<button class="c--button c--button--outline">` |
+
+なお、Modifier であってもまずは [Property Class で表現できないか](#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
+
+---
+
+## `--keycolor` の誤用
+
+`--keycolor` は要素単位で「軸となる色」を切り替えるための**ローカル変数**。サイト全体のブランドカラーやリンクカラーには使わない。
+
+### `:root` でのグローバル上書き
+
+| NG | OK | 理由 |
+|---|---|---|
+| `:root { --keycolor: #c8553d; }` | `:root { --brand: #c8553d; }`（または `--accent` / `--link`） | サイト共通の色は `--brand` / `--accent` / `--link` などのセマンティックカラーで定義する |
+
+### アクセントカラーとしての `keycolor` 参照
+
+| NG | OK | 理由 |
+|---|---|---|
+| `<Link c="keycolor">` | `<Link c="brand">` または `<Link c="link">` | リンク・hover などの恒常的なアクセントは `brand` / `link` を使う |
+| `hov={{ c: 'keycolor' }}` | `hov={{ c: 'brand' }}` | 同上 |
+| `border-inline-start: 3px solid var(--keycolor)`（CSS 直書き） | `border-inline-start: 3px solid var(--brand)` | 同上 |
+
+### `--keycolor` を使うべき場面
+
+「**そのボックス／コンポーネント自身の軸色**」を切り替えたい時のみ：
+
+```html
+<!-- u--cbox や c--callout など、ボックス全体の色味を局所的に切り替える -->
+<div class="u--cbox" style="--keycolor: var(--red)">
+  <p class="-c" style="--c: var(--keycolor)">danger 用カラーリング</p>
+</div>
+```
+
+```jsx
+<Lism class="u--cbox" keycolor="var(--red)">
+  <Text c="keycolor">...</Text>
+</Lism>
+```
+
+詳細: [tokens.md のキーカラー変数セクション](./tokens.md#キーカラー変数-keycolor)
+
 ---
 
 ## Prop 型ミス
@@ -87,7 +385,7 @@ Lism CSS側が用意しているトークン値と異なるものを書かない
 
 | NG | OK | 理由 |
 |---|---|---|
-| `style={{ maxWidth: '1200px' }}` | `<Box max-sz="l">` | ヘッダーやセクションなど、コンテンツサイズにはトークン値（`xs` / `s` / `m` / `l` / `xl` / `container`）をできるだけ活用する |
+| `style={{ maxWidth: '1200px' }}` | `<Box max-sz="l">` | ヘッダーやセクションなど、コンテンツサイズにはトークン値（`xs` / `s` / `m` / `l` / `xl` / `bleed`）をできるだけ活用する |
 
 ### サイドバー型レイアウト
 

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

@@ -66,8 +66,6 @@ Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイル
 |------|------------|------|
 | `--link-c` | `var(--link)` | リンクテキスト色 |
 | `--link-td` | `underline` | テキスト装飾の種類 |
-| `--link-td-thickness` | `auto` | 下線の太さ |
-| `--link-td-color` | `currentColor` | 下線の色 |
 
 ### リスト（ul, ol）
 
@@ -75,7 +73,7 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 
 | 変数 | フォールバック | 用途 |
 |------|------------|------|
-| `--list-px-s` | `var(--s30)` | リストの `padding-inline-start` |
+| `--list-px-s` | `1.75em` | リストの `padding-inline-start` |
 
 ### テーブル（table, td, th）
 
@@ -83,7 +81,7 @@ class を持たない `ul` / `ol` のみブラウザ標準スタイルが自動
 |------|------------|------|
 | `--td-c` | `inherit` | セルのテキスト色 |
 | `--td-bgc` | `transparent` | セルの背景色 |
-| `--td-p` | `var(--s10)` | セルのパディング |
+| `--td-p` | `var(--s10) var(--s15)` | セルのパディング |
 | `--td-min-sz` | `initial` | セルの最小幅 |
 | `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
 | `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |