@lism-css/mcp 0.24.0 → 0.26.0

package/dist/data/guides/SKILL.md

@@ -1,21 +1,21 @@
 ---
 name: lism-css-guide
-description: 'Lism CSSでUIやページを実装・修正する時に使う実装ガイド。Primitive選定・トークン照合・Property Class/Lism Props活用・レスポンシブ設計・アンチパターンセルフチェックを行う。c--*, l--*, a--*, is--*, has--*, set--*, u--*, -prop:value形式のクラスやトークンの逆引きにも使う。'
+description: 'Lism CSSでUIやページを実装・修正する時に使う実装ガイド。Primitive選定・トークン照合・Property Class/Lism Props活用・レスポンシブ設計・アンチパターンセルフチェックを行う。b--*, c--*, l--*, a--*, is--*, has--*, set--*, u--*, -prop:value形式のクラスやトークンの逆引きにも使う。'
 ---
 
-# Lism CSS実装ガイド
+# Lism CSS 実装ガイド
 
-Lism CSSでUI・ページ・コンポーネントを実装する時の判断の起点です。単なるリファレンスではなく、**実装前チェック→実装→提出前セルフチェック**を必ず通し、Primitive・トークン・Property Class・レスポンシブ設計の取りこぼしを防ぎます。
+Lism CSSでUI・ページ・コンポーネントを実装する時の判断の起点です。単なるリファレンスではなく、まず変更規模から「事前チェック実行レベル」を判定し、そのレベルに応じて**実装前チェック→実装→提出前セルフチェック**を通すことで、Primitive・トークン・Property Class・レスポンシブ設計の取りこぼしを防ぎます。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
-> **バージョン情報:** このガイドは`lism-css@0.24.0`/`@lism-css/ui@0.24.0`時点の情報に基づきます。プロジェクトで使用中のバージョンが異なる場合は、ユーザーにその旨を伝え、パッケージ側の更新・またはこのスキルの更新を案内してください。
+> **バージョン情報:** このガイドは`lism-css@0.26.0`/`@lism-css/ui@0.26.0`時点の情報に基づきます。プロジェクトで使用中のバージョンが異なる場合は、ユーザーにその旨を伝え、パッケージ側の更新・またはこのスキルの更新を案内してください。
 
 ## 実装フロー（厳守）
 
 資料確認は、コード上の操作の直前に行う。どの操作の手前で何を読むかは「資料確認トリガー」に従う。
 
-0. **実行レベル判定**: 変更規模から「事前チェック実行レベル」（不要/軽量/通常/値照合付き）を判定する。「不要」に該当する場合、以降の手順は省略してよい。
+0. **実行レベル判定**: 変更規模から「事前チェック実行レベル」（不要/軽量/通常/値照合付き）を判定する。判定に迷う場合は一つ上のレベルを選ぶ。「不要」の場合、手順6（実装）以外の手順1〜5・7は行わない（`.lism/`へのファイル作成もしない）。「軽量」の場合、手順7はチャット内の数行の確認に簡略化し、`.lism/review.md`は作らない。
 1. **初期確認**: SKILL.mdだけで実装しない。実装対象に明らかに関係する最小限の詳細ファイルだけを先に開き、実装プランに「初期確認した資料」を列挙する。リンク表を眺めただけは確認済みにしない。
 2. 目的別実装ガイドでPrimitive/コンポーネントの候補を選定する。
 3. 実装前チェック（C0–C8）を行い、初期確認した資料、使うPrimitive、コンポーネント、トークン、レスポンシブ方針を列挙した**実装プラン**を出す。未読のまま採用できない判断は🔁を付け、対応する「読む資料」を実装プランの判断行に紐づける。値照合付きレベルでは、実装プランをチャットの返答としてではなく`.lism/plan.md`として保存する（規約は[`references/verification.md`](./references/verification.md)）。
@@ -62,12 +62,12 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 
 ## 事前チェック実行レベル
 
-| レベル | 条件 | 確認するC | 出力 |
-| --- | --- | --- | --- |
-| 不要 | 説明のみ/コード変更なし/既存の書き方に沿った微修正 | — | — |
-| 軽量 | 数行の小変更・既存パターン内の変更 | C1・C5中心 | 3〜5行の箇条書き |
-| 通常 | 新規UI/コンポーネント/セクション | 必須=初期確認した資料、C0、C1、C5、C6。該当時だけC2/C3/C4/C7/C8 | 項目別の表 |
-| 値照合付き | Figma/スクショ等のデザイン再現 | 通常+C5/C7を詳しく確認 | 項目別の表＋トークン差分表（差分列必須）。`.lism/plan.md`へ保存 |
+| レベル | 条件 | 確認するC | 出力 | 提出前セルフチェック |
+| --- | --- | --- | --- | --- |
+| 不要 | 説明のみ/コード変更なし/既存の書き方に沿った微修正 | — | — | 行わない |
+| 軽量 | 数行の小変更・既存パターン内の変更 | C1・C5中心 | 3〜5行の箇条書き | チャット内で数行。`.lism/review.md`は作らない |
+| 通常 | 新規UI/コンポーネント/セクション | 必須=初期確認した資料、C0、C1、C5、C6。該当時だけC2/C3/C4/C7/C8 | 項目別の表 | 実施し、`.lism/review.md`へ保存 |
+| 値照合付き | Figma/スクショ等のデザイン再現 | 通常+C5/C7を詳しく確認 | 項目別の表＋トークン差分表（差分列必須）。`.lism/plan.md`へ保存 | 実施し、`.lism/review.md`へ保存 |
 
 通常レベルでも該当しないCは省略して構いません。表を形だけ埋めず、実装に影響する項目だけ列挙してください。
 
@@ -83,8 +83,8 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 | hover/focus等の状態スタイルを書く | `property-class/hov.md`（必要に応じて`trait-class/has--transition.md`） |
 | トークン外の数値・色をコードに書く（丸める場合を含む。CSS/Props問わず） | `tokens.md`、`antipatterns.md`の「px / 固定値の直書き」節 |
 | レスポンシブの切替を決める | `responsive.md` |
-| `c--*`を新しく作る/名前を付ける | `naming.md`、`css-rules.md`の該当節 |
-| `c--*`のCSSを書く | `css-rules.md`の`@layer lism-component`/`c--*`節 |
+| 独自クラス（`b--*`/`c--*`）を新しく作る/名前を付ける | `naming.md`、`css-rules.md`の`独自クラスの選び方（2分類）`節 |
+| `b--*`/`c--*`のCSSを書く | `css-rules.md`の`Block Class（b--）`/`Custom Class（c--）`節 |
 | 状態・バリエーションを設計する | `trait-class.md` |
 
 「必要なら参照」などの曖昧な表現で代替しない。対象操作の直前に読む。
@@ -94,12 +94,13 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 次のルールを常に守る。迷う・例外にする・既存実装と衝突する場合は、該当資料を読んで🔁を✅または⏸へ解消する。
 
 - 構造は`<div>`+素のCSSよりPrimitiveを優先する。候補は「目的別実装ガイド」の表から選ぶ。
-- `c--*`命名はBlockをcamelCase、Elementを`_`ひとつ、Modifierを`--`ふたつにする。`c--feature-card`や`__`は使わない。
-- `c--*`のCSSは必ず`@layer lism-component`内に置く。
+- `c--*`/`b--*`命名はBlockをcamelCase、Elementを`_`ひとつ、Modifierを`--`ふたつにする。`c--feature-card`や`__`は使わない。
+- 独自クラスは2分類（ベーススタイルを CSS 側で管理する共通基礎部品→`b--`／それ以外のカスタムクラス全般→`c--`）で命名する。
+- 独自CSSは必ず`@layer lism-custom`内に置く（`b--`のベーススタイルだけ`@layer lism-block`）。
 - トークン外のpx/rem/em値を勝手に丸めたり直書きしたりしない。丸め・新規トークン・直書き例外は⏸にする（`antipatterns.md`の「直書きしてよい例外」に該当する場合のみ`✅例外`にできる）。
-- 単一要素にだけ効く宣言はCSSに書かず、まずLism Props/Property Classで表せないか確認する。CSSに残すのは擬似要素・子孫セレクタ・状態切替などProperty Classで書けない宣言だけにする。
+- `c--*`のクラスでは、単一要素にだけ効く宣言はCSSに書かず、まずLism Props/Property Classで表せないか確認する。CSSに残すのは擬似要素・子孫セレクタ・状態切替などProperty Classで書けない宣言だけにする。`b--*`のベーススタイルは対象外で、トークンを使って`@layer lism-block`にCSSとして書いてよい（BP切替・hover・例外的な調整はProperty Class）。
 - レスポンシブ値はbaseを必ず置く。container query運用なら必要な`isContainer`祖先を確認する。
-- 状態は`data-*`/ARIA、見た目バリエーションは`c--name--variant`で表す。`is--active`のようにTrait Classを状態名へ流用しない。
+- 状態は`data-*`/ARIA、見た目バリエーションはBlockと同じプレフィックスのModifier（`c--`なら`c--name--variant`、`b--`なら`b--name--variant`）で表す。`is--active`のようにTrait Classを状態名へ流用しない。
 
 ## 目的別実装ガイド
 
@@ -115,11 +116,13 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 | ボタン | `@lism-css/ui`の`Button`。素の`<button>`を整えるならreset済みの`set--plain` | `components-ui.md`、`set-class.md` |
 | hover効果 | `-hov:*`/`hov={{}}`/`set--hov`/`has--transition`（component CSSの`:hover`より先に検討） | `property-class/hov.md`、`trait-class/has--transition.md` |
 | ボックス・カードの全体リンク | `BoxLink`/`is--boxLink`（クリック領域と重なり順を任せる） | `trait-class/is--boxLink.md` |
-| 小さいUI部品 | `c--*`＋Property Class（`c--*`は意味名に留め、単一要素の見た目はProperty Class/Lism Propsへ） | `property-class.md`、`css-rules.md#component-classc--` |
+| 小さいUI部品 | `c--*`＋Property Class（`c--*`は何のパーツかを示す名前に留め、単一要素の見た目はProperty Class/Lism Propsへ）。ベーススタイルを CSS 側で管理する共通部品なら`b--*` | `property-class.md`、`css-rules.md#custom-classc--`、`css-rules.md#block-classb--` |
 | ページの定番セクション（ヒーロー・サイトヘッダー・フッター等） | `Group`＋`Wrapper`/`Stack`/`Cluster`の定番構成 | `references/page-sections.md` |
 
 ## 提出前セルフチェック
 
+**実行条件**: この節の照合と`.lism/review.md`の作成を行うのは、実行レベルが「通常」「値照合付き」の場合だけです。「不要」では行いません。「軽量」では、変更点に関係する最小ゲート項目だけをチャット内で数行確認し、ファイルは作りません。
+
 **検証の分離（評価サブエージェント）**: サブエージェント／タスク委任機能が使える環境では、この節の照合を実装した本人ではなく読み取り専用の評価サブエージェントに委任します（指示テンプレ・報告書式・再評価ループは[`references/verification.md`](./references/verification.md)）。評価報告は`.lism/review.md`へ保存し、違反ゼロの報告が出るまで修正→再評価を繰り返してから提出します。完了報告では`.lism/review.md`を参照します。委任機能が使えない環境では、同じ照合を本人がこの節の順に自分で実行します。
 
 まず実装プランと実装を1行ずつ照合し、差分を「計画変更（意図的）/実装漏れ（直す）/要確認（再び確認が必要）」に分類します。その後、以下を確認します。
@@ -140,7 +143,7 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 
 - `✅例外`を含む✅判定を、最小ゲート・`antipatterns.md`の「直書きしてよい例外」・すり合わせ済みの値マッピング方針に再照合する。許可リスト外の`✅例外`は⏸へ戻す。
 - 値照合付きレベルでは、`.lism/plan.md`にトークン差分表（差分列付き）が存在するか確認する。無ければその実装プランは無効。差分表を作成して照合をやり直す。スケール前提（画像の書き出し倍率等）が実測・整合チェックで検証済みかどうかも確認する（未検証なら差分表全体が無効）。
-- 実行レベル判定が妥当だったかを見直す（「不要」「軽量」への過小判定でチェックを省略していないか。デザイン再現なのに「値照合付き」へ上げず、トークン差分表を回避していないか）。
+- 実行レベル判定が妥当だったかを見直す（デザイン再現なのに「値照合付き」へ上げず、トークン差分表を回避していないか）。
 
 **個別確認（最小ゲート・antipatternsでカバーされない項目）**
 
@@ -162,7 +165,7 @@ C0–C8の詳細と出力形式は[`references/authoring.md`](./references/autho
 | `set-class.md` | `set--plain`/`set--hov`等のセットクラス | reset済みボタン等を使う |
 | `tokens.md` | デザイントークンとCSS変数 | 余白・色・角丸・影・fzの照合 |
 | `naming.md` | 命名規則とProperty Class省略ルール | 命名・prefix・Property Class表記 |
-| `css-rules.md` | CSS設計・Layer構造・`c--*`・独自prefix | CSSレイヤー・`c--*`・カスタムCSS |
+| `css-rules.md` | CSS設計・Layer構造・`b--*`/`c--*`・独自クラスの分類 | CSSレイヤー・`b--*`/`c--*`・カスタムCSS |
 | `responsive.md` | BP・コンテナクエリ・レスポンシブProps | レスポンシブ・コンテナクエリ |
 | `base-styles.md` | Reset CSSとHTML要素の基本スタイル | 素のHTML要素の既定を確認 |
 | `components-core.md` | `lism-css`のReact/Astroコアコンポーネント | React/Astroコンポーネント |

package/dist/data/guides/antipatterns-layout.md

@@ -5,6 +5,7 @@
 ## TOC
 
 - [レイアウト選択ミス](#レイアウト選択ミス)
+- [ベーススタイルを CSS 側で持つ部品を `c--` のままにする](#ベーススタイルを-css-側で持つ部品を-c---のままにする)
 - [Astro/React Primitive を使わず素の HTML で組む](#astroreact-primitive-を使わず素の-html-で組む)
 - [ボタン装飾を reset から自作する](#ボタン装飾を-reset-から自作する)
 - [`Frame` 未使用のメディア枠手組み](#frame-未使用のメディア枠手組み)
@@ -17,7 +18,6 @@
 - [レスポンシブ抜け](#レスポンシブ抜け)
 - [レスポンシブ配列の冗長指定](#レスポンシブ配列の冗長指定)
 - [`is--` の誤用（状態・バリエーション）](#is---の誤用状態バリエーション)
-- [カスタムクラスを全て `c--` にしてしまう](#カスタムクラスを全て-c---にしてしまう)
 - [クラス名の命名ミス](#クラス名の命名ミス)
 
 ---
@@ -46,6 +46,14 @@
 | `<Grid gtc="1fr 240px">` で固定 | `<WithSide sideW="240px">` | コンテンツ幅で自動切替したいなら WithSide |
 | `<Flex>` で 2 カラム強制横並び | `<WithSide>` | 縦並びへの切替が必要なら WithSide |
 
+## ベーススタイルを CSS 側で持つ部品を `c--` のままにする
+
+`c--` は「Lism 本体に含まれない、ユーザーが自由に定義するカスタムクラス（**Custom Class**）」を表すプレフィックスで、コンポーネント・サイトの領域（ヘッダーやサイドバーなど）・ページ固有要素など粒度を問わず使える（`c--siteHeader` のような骨格用途も可）。ただし、サイト共通で繰り返し使うボタン・バッジ・カード級の部品を、ベーススタイルごと CSS 側で管理したい場合は `c--` のままにせず `b--`（`@layer lism-block`）へリネームして昇格する。
+
+→ 分類表と配置レイヤー: [css-rules.md の独自クラスの選び方（2分類）](./css-rules.md#独自クラスの選び方2分類)
+
+ページ固有の要素も`c--`で命名し、ページslug等を含むcamelCase（`c--frontHero` 等）にすると名前だけで由来がわかる。
+
 ## Astro/React Primitive を使わず素の HTML で組む
 
 Astro/Reactで実装しているのに、`lism-css/astro`や`lism-css/react`のPrimitiveをimportせず、素の`<div>`とCSSだけで構造を作るのは避ける。
@@ -101,12 +109,12 @@ Primitiveが既に持つCSSと同じ値を、Lism Props/Property Classで重ね
 
 ## サイト最外殻を `Wrapper` に使う
 
-`Wrapper`/`is--wrapper`は幅制限したい直下領域に使う。サイト全体の最外殻やbody直下のゾーニングには使わない。最外殻は`z--*`などの領域名で扱い、幅制限が必要な内側だけ`Wrapper`にする。
+`Wrapper`/`is--wrapper`は幅制限したい直下領域に使う。サイト全体の最外殻やbody直下の領域分けには使わない。最外殻は`c--siteWrapper`などの領域名クラスで扱い、幅制限が必要な内側だけ`Wrapper`にする。
 
 | NG | OK | 理由 |
 | --- | --- | --- |
-| `<Wrapper className="c--site">...全体...</Wrapper>` | `<div className="z--site"><Wrapper>...本文幅...</Wrapper></div>` | 最外殻と幅制限の責務を分ける |
-| `<main className="is--wrapper">`をページ全体に付与 | `<main className="z--main"><Wrapper>...</Wrapper></main>` | ゾーニングは`z--*`、幅制限は`Wrapper` |
+| `<Wrapper className="c--site">...全体...</Wrapper>` | `<div className="c--site"><Wrapper>...本文幅...</Wrapper></div>` | 最外殻と幅制限の責務を分ける |
+| `<main className="is--wrapper">`をページ全体に付与 | `<main className="c--siteMain"><Wrapper>...</Wrapper></main>` | サイトの領域は領域名クラス、幅制限は`Wrapper` |
 
 `Wrapper`直下の子要素には幅に関する既定が当たるため、最外殻に置くと予期しない幅制御を生むことがある。
 
@@ -221,25 +229,20 @@ Lism CSS の `is--` プレフィックスは「**〜である**」という**役
 - `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}`
+### 2. スタイルバリエーション → BEM Modifier（`c--{name}--{variant}` / `b--{name}--{variant}`）
+
+「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の独自クラスの選び方](./css-rules.md#独自クラスの選び方2分類)）。
 
-「同じコンポーネントの見た目違い」は、Lism CSS 公式の BEM Modifier 記法で表現する（→ [css-rules.md の Component Class](./css-rules.md#component-classc--)）。
+Modifier のプレフィックスは、その Block に付けたプレフィックスをそのまま維持する。`c--` の Block なら `c--{name}--{variant}`、`b--` の Block なら `b--{name}--{variant}` にし、`c--` と `b--` を混ぜない。
 
 | 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">` |
+| `<section class="c--hero is--dark">` + `.c--hero.is--dark { ... }` | `<section class="c--hero c--hero--dark">` + `.c--hero.c--hero--dark { ... }` |
+| `<div class="c--pricing is--featured">` | `<div class="c--pricing c--pricing--featured">` |
+| `<button class="b--btn is--outline">` / `<button class="b--btn c--btn--outline">`（Block と違うプレフィックス） | `<button class="b--btn b--btn--outline">` + `@layer lism-block` に `.b--btn.b--btn--outline { ... }` |
 
 なお、Modifier であってもまずは [Property Class で表現できないか](./antipatterns.md#property-class-で書けるのに-css-で書く) を検討すること。「色だけ違う」程度ならマークアップ側で `-bgc:* -c:*` を差し替えるだけで済むことも多い。
 
-## カスタムクラスを全て `c--` にしてしまう
-
-`c--` は「**コンポーネント**（再利用可能な UI 部品）」を表すプレフィックス。**カスタムクラスを必ず `c--` で命名する必要はない**。サイトの大まかな領域（header / sidebar / main / footer 等）やページ固有のスタイルなど、再利用が前提でないクラスは、独自プレフィックス（`z--` / `p--` 等）やプレフィックスなしの命名も選択肢として検討すること。
-
-→ 使い分け表と配置レイヤー: [css-rules.md の独自プレフィックス](./css-rules.md#独自プレフィックス)
-
-`c--header` のような命名も間違いとまでは言えないが、「カスタムクラス＝必ず `c--`」ではないことに注意する。
-
 ## クラス名の命名ミス
 
 Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `set--` 等）に続く名称は **camelCase** で書くのが規約。kebab-case で書くと、BEM の Modifier 区切り（`--`）と視覚的に紛れて読みにくくなる。
@@ -250,7 +253,7 @@ Lism CSS では、プレフィックス（`c--` / `is--` / `has--` / `u--` / `se
 | --- | --- | --- |
 | `c--my-card` | `c--myCard` | プレフィックス後の名称は camelCase |
 | `c--my-card--primary` | `c--myCard--primary` | Modifier 区切り `--` と単語区切り `-` が混在して読みにくい |
-| `c--card_my-elem` | `c--card_myElem` | Element 名（`_` 後）も camelCase |
+| `c--pricing_my-elem` | `c--pricing_myElem` | Element 名（`_` 後）も camelCase |
 | `is--side-bar` / `has--gutter-x` | `is--sideBar` / `has--gutterX` | `is--` / `has--` / `u--` 等にも同じ規則が適用される |
 | `c--hero__inner` / `c--featureCard__title` | `c--hero_inner` / `c--featureCard_title` | Element 区切りは `_` ひとつ。BEM 風の `__` は使わない |
 

package/dist/data/guides/antipatterns.md

@@ -11,7 +11,7 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 - [px / 固定値の直書き](#px--固定値の直書き)
 - [Property Class で書けるのに CSS で書く](#property-class-で書けるのに-css-で書く)
 - [Token typo（存在しない値）](#token-typo存在しない値)
-- [`c--*` CSS を `@layer lism-component` に入れない](#c---css-を-layer-lism-component-に入れない)
+- [独自クラスの CSS を所定の `@layer` に入れない](#独自クラスの-css-を所定の-layer-に入れない)
 - [hover を component CSS に書いて負ける](#hover-を-component-css-に書いて負ける)
 - [Reset 済みプロパティの再指定](#reset-済みプロパティの再指定)
 - [`--keycolor` の誤用](#--keycolor-の誤用)
@@ -20,6 +20,7 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 ### 構造・レイアウト・レスポンシブ系（antipatterns-layout.md）
 
 - [レイアウト選択ミス](./antipatterns-layout.md#レイアウト選択ミス)
+- [ベーススタイルを CSS 側で持つ部品を `c--` のままにする](./antipatterns-layout.md#ベーススタイルを-css-側で持つ部品を-c---のままにする)
 - [Astro/React Primitive を使わず素の HTML で組む](./antipatterns-layout.md#astroreact-primitive-を使わず素の-html-で組む)
 - [ボタン装飾を reset から自作する](./antipatterns-layout.md#ボタン装飾を-reset-から自作する)
 - [`Frame` 未使用のメディア枠手組み](./antipatterns-layout.md#frame-未使用のメディア枠手組み)
@@ -32,7 +33,6 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 - [レスポンシブ抜け](./antipatterns-layout.md#レスポンシブ抜け)
 - [レスポンシブ配列の冗長指定](./antipatterns-layout.md#レスポンシブ配列の冗長指定)
 - [`is--` の誤用（状態・バリエーション）](./antipatterns-layout.md#is---の誤用状態バリエーション)
-- [カスタムクラスを全て `c--` にしてしまう](./antipatterns-layout.md#カスタムクラスを全て-c---にしてしまう)
 - [クラス名の命名ミス](./antipatterns-layout.md#クラス名の命名ミス)
 
 ---
@@ -90,7 +90,9 @@ AI が Lism CSS のコードを生成する際に間違いやすい記法と、
 
 CSS に残すのは、基本的には　`::before` / `> li` などの「Primitive / Trait / Property Class で書けないセレクタ」を伴う宣言。単一要素への装飾束は呼び出し側マークアップに移す。
 
-なお、CSS が空になっても `c--*` クラス名は意味名としてマークアップに残して構わない（→ [css-rules.md の作成例](./css-rules.md#作成例)）。
+なお、CSS が空になっても `c--*` クラス名は何のパーツかを示す名前としてマークアップに残して構わない（→ [css-rules.md の Custom Class](./css-rules.md#custom-classc--)）。
+
+ベーススタイルを CSS 側で管理することを前提にする部品（サイト共通で繰り返し使うボタン・バッジ・カード級）は、`c--*` ではなく `b--*` を使い、CSS を `@layer lism-block` に書く（→ [css-rules.md の Block Class](./css-rules.md#block-classb--)）。`b--` の3条件を満たさない `c--*` でこの節の規律を外してはいけない。
 
 ---
 
@@ -151,16 +153,17 @@ Lism Props では、props.ts で事前定義されたものが `-{prop}:{value}`
 
 ---
 
-## `c--*` CSS を `@layer lism-component` に入れない
+## 独自クラスの CSS を所定の `@layer` に入れない
 
-`.c--*`のCSSは基本的に`@layer lism-component`内に置く。Astroの`<style>`内でも同じ。Layer外に置くと、Lism内部レイヤーやProperty Classとの優先順位設計が崩れる。
+`.c--*`のCSSは基本的に`@layer lism-custom`内に置く（`b--`のベーススタイルだけ`@layer lism-block`）。Astroの`<style>`内でも同じ。Layer外に置くと、Lism内部レイヤーやProperty Classとの優先順位設計が崩れる。
 
 | NG | OK |
 | --- | --- |
-| `.c--hero { padding: var(--s40); }` | `@layer lism-component { .c--hero::before { ... } }` |
-| `<style>.c--card { ... }</style>` | `<style>@layer lism-component { .c--card { ... } }</style>` |
+| `.c--hero { padding: var(--s40); }` | `@layer lism-custom { .c--hero::before { ... } }` |
+| `<style>.c--pricing { ... }</style>` | `<style>@layer lism-custom { .c--pricing { ... } }</style>` |
+| `@layer lism-custom { .b--btn { ... } }` | `@layer lism-block { .b--btn { ... } }` |
 
-ただし、`padding`/`gap`/`font-size`/`color`などProps/Property Classへ移せる宣言は、Layerへ入れる前にマークアップ側へ移す。  
+ただし、`c--*`のクラスでは、`padding`/`gap`/`font-size`/`color`などProps/Property Classへ移せる宣言を、Layerへ入れる前にマークアップ側へ移す（`b--`のベーススタイルは対象外で、`@layer lism-block`で CSS 側で管理してよい）。  
 また、詳細度の関係で`@layer`の外で書く必要がある場合は外に出してよい。
 
 ---
@@ -218,7 +221,7 @@ Lism CSSのreset/base styleで既に初期化されている値を、念のた
 ```html
 <!-- u--cbox や c--callout など、ボックス全体の色味を局所的に切り替える -->
 <div class="u--cbox" style="--keycolor: var(--red)">
-  <p class="-c" style="--c: var(--keycolor)">danger 用カラーリング</p>
+  <p class="-c:keycolor">danger 用カラーリング</p>
 </div>
 ```
 
@@ -253,5 +256,5 @@ Lism CSSのreset/base styleで既に初期化されている値を、念のた
 
 | NG | OK | 理由 |
 | --- | --- | --- |
-| `<Grid cg={['40', null, '80']}>` | `<Grid g={['40', null, '80']}>` または `<Grid cg="40">` | `cg` / `rg` は BP 非対応。レスポンシブにするなら BP 対応の `g` を使うか、単一値にする |
+| `<Box ta={['start', null, 'center']}>` | `<Box ta="center">` | `ta` / `fw` / `ov` などは BP 非対応。レスポンシブが必要なら SCSS 側で `bp: 1` を有効にするか、単一値にする |
 

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

@@ -67,7 +67,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 <Media as={Image} src="..." p="20" bd />
 // → Image コンポーネントに { className: '-p:20 -bd' } が渡される
 
-// className でコンポーネントクラスを付与（c--* も className に直接書く）
+// className で独自クラスを付与（c--* も className に直接書く）
 <Lism className="c--myComponent" p="10">...</Lism>
 // → <div class="c--myComponent -p:10">...</div>
 

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

@@ -26,7 +26,6 @@ import { Button } from '@lism-css/ui/astro/Button';
 - [Badge](#badge)
 - [Button](#button)
 - [Callout](#callout)
-- [Chat](#chat)
 - [Details](#details)
 - [Modal](#modal)
 - [NavMenu](#navmenu)
@@ -52,7 +51,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 | `allowMultiple` | Root | `boolean` | — | 複数アイテムの同時展開を許可 |
 | `isOpen` | Item / Button / Panel | `boolean` | `false` | アイテムを初期展開。Item・Button・Panel の3つ揃えて指定（Item=`data-opened` 付与、Button=`aria-expanded`、Panel=`hidden` 解除） |
 | `as` | Heading | `string` | `div` | 見出しのHTMLタグ。`div` 時は `role='heading'` が自動付与。`h2`〜`h6` 指定時は role なし |
-| `flow` | Panel | `string` | — | パネル内コンテンツ領域（`c--accordion_content`）のフロー余白 |
+| `flow` | Panel | `string` | — | パネル内コンテンツ領域（`b--accordion_content`）のフロー余白 |
 
 ```jsx
 <Accordion.Root>
@@ -70,7 +69,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Alert/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Alert)
 
-短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。
+短めの文言を目立たせて強調表示するアラートボックス。`type` プリセットによりアイコンとカラーが自動設定される。`b--alert` クラスが付与される。
 プリセット: `alert`=alert/red, `point`=lightbulb/orange（`tip`も同じ）, `warning`=warning/yellow, `check`=check-circle/green, `help`=question/purple, `info`=info/blue, `note`=note/gray。
 
 | Prop | 型 | デフォルト | 説明 |
@@ -90,13 +89,13 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Avatar/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Avatar)
 
-アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`c--avatar` クラスが付与される。
+アバター（プロフィール画像）コンポーネント。Frame ベースの円形画像表示。`b--avatar` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
 | `src` | `string` | — | 画像URL |
 | `alt` | `string` | — | 代替テキスト |
-| `size` | `string` | `'1.5em'` | アバターのサイズ |
+| `size` | `string` | `'2em'` | アバターのサイズ |
 
 ```jsx
 <Avatar src='/avatar.jpg' alt='User' size='48px' />
@@ -107,11 +106,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Badge/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Badge)
 
-バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`c--badge` クラスが付与される。
+バッジ（ラベル）コンポーネント。`span` 要素としてインライン表示。`b--badge` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
-| `variant` | `string` | — | バリエーション（`'outline'` 等）。`c--badge--{variant}` クラスが出力 |
+| `variant` | `string` | — | バリエーション（`'outline'` 等）。`b--badge--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 
 ```jsx
@@ -123,11 +122,11 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Button/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Button)
 
-ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`c--button` クラスが付与される。
+ボタン型リンクコンポーネント。デフォルトで `a` 要素として出力。`b--button` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
-| `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`c--button--{variant}` クラスが出力 |
+| `variant` | `string` | — | バリエーション（`'fill'`, `'outline'` 等）。`b--button--{variant}` クラスが出力 |
 | `keycolor` | `string` | — | キーカラー |
 | `href` | `string` | — | リンク先URL |
 
@@ -140,7 +139,7 @@ import { Button } from '@lism-css/ui/astro/Button';
 
 ソース: [Callout/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Callout)
 
-記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される（プリセット内容は [Alert](#alert) と同一）。
+記事中の重要ポイントを示すコンポーネント。タイトルとアイコン付きの強調ボックス。`type` プリセットによりアイコンとカラーが自動設定される（プリセット内容は [Alert](#alert) と同一）。`b--callout` クラスが付与される。
 
 | Prop | 型 | デフォルト | 説明 |
 | --- | --- | --- | --- |
@@ -155,26 +154,6 @@ import { Button } from '@lism-css/ui/astro/Button';
 ```
 
 
-## Chat
-
-ソース: [Chat/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Chat)
-
-チャット風の吹き出しコンポーネント。Grid ベースの会話形式 UI。`c--chat` クラスが付与される。
-
-| Prop | 型 | デフォルト | 説明 |
-| --- | --- | --- | --- |
-| `name` | `string` | — | 発言者の名前 |
-| `avatar` | `string` | — | アバター画像の src |
-| `variant` | `'speak' \| 'think'` | `'speak'` | チャットタイプ |
-| `direction` | `'start' \| 'end'` | `'start'` | 表示位置 |
-| `keycolor` | `string` | `'gray'` | キーカラー |
-| `flow` | `string` | `'s'` | コンテンツ要素のフロー余白 |
-
-```jsx
-<Chat name='Alice' avatar='/alice.jpg'>Hello!</Chat>
-```
-
-
 ## Details
 
 ソース: [Details/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Details)
@@ -231,7 +210,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 
 ソース: [NavMenu/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/NavMenu)
 
-ナビゲーションメニューコンポーネント。`c--navMenu` クラスが付与される。
+ナビゲーションメニューコンポーネント。`b--navMenu` クラスが付与される。
 
 **構造:** `NavMenu.Root > NavMenu.Item > NavMenu.Link`（`NavMenu.Nest` でネスト可能）
 
@@ -259,7 +238,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 
 ソース: [Tabs/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/Tabs)
 
-タブ切り替え UI。タブクリックでコンテンツパネルを切り替える。スタイリングはほぼなく動きのみ提供。
+タブ切り替え UI。タブクリックまたは左右キー・Home/End でコンテンツパネルを切り替える。縦並びにする場合は `listProps` で `aria-orientation="vertical"` を指定すると上下キーに切り替わる。スタイリングはほぼなく動きのみ提供。
 
 **構造:** `Tabs.Root > Tabs.Item > (Tabs.Tab + Tabs.Panel)`（`Tabs.List` も利用可能）
 
@@ -268,7 +247,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `tabId` | Root | `string` | — | タブを特定するための ID 文字列 |
 | `defaultIndex` | Root | `number` | `1` | 初期アクティブタブ（1始まり） |
 | `listProps` | Root | `object` | — | タブボタンリスト要素へ渡す props |
-| `variant` | Root | `string` | — | バリエーション。`c--tabs--{variant}` クラスが出力 |
+| `variant` | Root | `string` | `'default'` | バリエーション。`b--tabs--{variant}` クラスが出力。`'default'` のほか `'line'` を標準提供。独自 variant 指定時は既定バリアント（`b--tabs--default`）の装飾が適用されない |
 
 ```jsx
 <Tabs.Root>