@lism-css/mcp 0.23.0 → 0.24.0

package/dist/data/guides/SKILL.md

@@ -1,285 +1,218 @@
 ---
 name: lism-css-guide
-description: "Lism CSS の設計・実装に関するガイド。CSSの編集・追加、UIコンポーネントやレイアウトの実装・編集時に参照。c--*, l--*, a--*, is--*, has--*, set--*, u--* -prop:value 形式のクラス・トークン(CSS変数)・命名規則・Layer規則・レスポンシブ対応について調べる時にも参照。"
+description: 'Lism CSSでUIやページを実装・修正する時に使う実装ガイド。Primitive選定・トークン照合・Property Class/Lism Props活用・レスポンシブ設計・アンチパターンセルフチェックを行う。c--*, l--*, a--*, is--*, has--*, set--*, u--*, -prop:value形式のクラスやトークンの逆引きにも使う。'
 ---
 
-# Lism CSS Best Practices
+# Lism CSS実装ガイド
 
-このスキルは、「Lism CSS」によるCSS設計理論の全体像と、実装時のベストプラクティスに関するガイドを提供します。
-
-調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
-
-> **バージョン情報:** このガイドは `lism-css@0.23.0` / `@lism-css/ui@0.23.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+Lism CSSでUI・ページ・コンポーネントを実装する時の判断の起点です。単なるリファレンスではなく、**実装前チェック→実装→提出前セルフチェック**を必ず通し、Primitive・トークン・Property Class・レスポンシブ設計の取りこぼしを防ぎます。
 
 公式ドキュメント: https://lism-css.com/docs/overview.md
 
+> **バージョン情報:** このガイドは`lism-css@0.24.0`/`@lism-css/ui@0.24.0`時点の情報に基づきます。プロジェクトで使用中のバージョンが異なる場合は、ユーザーにその旨を伝え、パッケージ側の更新・またはこのスキルの更新を案内してください。
 
-## インストール
-
-### CDNでCSSファイルのみ読み込む場合
-
-```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0/dist/css/main.css" rel="stylesheet" />
-```
-
-### npm パッケージ
-
-- `lism-css` — コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
-- `@lism-css/plugin` — Vite / Astro / Next.js 統合、動的CSSビルド、CSS purge、`lism-css build` CLIを提供。
-- `@lism-css/ui` — `lism-css` を使って構築された UI コンポーネントライブラリ。Accordion, Modal, Tabs, Button, Badge, Callout 等を React/Astro で提供。
-
-### CSS 読み込み
-
-```js
-import 'lism-css/main.css';
-```
-
-### コンポーネント読み込み例
-
-```jsx
-// React
-import { Flex, Stack, Grid, Columns } from 'lism-css/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 } from '@lism-css/ui/astro/Accordion';
-import { Tabs } from '@lism-css/ui/astro/Tabs';
-import { Button } from '@lism-css/ui/astro/Button';
-```
-
-### CSS Purge（未使用CSSの削除）
-
-本番ビルド時に未使用の Lism CSS クラスを取り除いて出力 CSS を軽量化できます。`@lism-css/plugin/vite` / `@lism-css/plugin/astro` の統合プラグインを使っている場合は、各エントリの `lismCss({ purge: true })` で有効化するのが簡単です。統合プラグインを使わない場合は単体プラグイン `@lism-css/plugin/purge/vite`（Vite）/ `@lism-css/plugin/purge/astro`（Astro）も利用できます。詳細は https://lism-css.com/docs/customize/purge/ を参照。
-
-
-## 実装ルール
-
-### コードを書く前に必ず参照
-
-レイアウト選択ミスや典型的な記法ミスを避けるため、コード生成の前に以下を確認すること：
-
-- **どの 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#レイアウト選択ミス)
+資料確認は、コード上の操作の直前に行う。どの操作の手前で何を読むかは「資料確認トリガー」に従う。
 
-### プリフライト・トークン照合（必須）
+0. **実行レベル判定**: 変更規模から「事前チェック実行レベル」（不要/軽量/通常/値照合付き）を判定する。「不要」に該当する場合、以降の手順は省略してよい。
+1. **初期確認**: SKILL.mdだけで実装しない。実装対象に明らかに関係する最小限の詳細ファイルだけを先に開き、実装プランに「初期確認した資料」を列挙する。リンク表を眺めただけは確認済みにしない。
+2. 目的別実装ガイドでPrimitive/コンポーネントの候補を選定する。
+3. 実装前チェック（C0–C8）を行い、初期確認した資料、使うPrimitive、コンポーネント、トークン、レスポンシブ方針を列挙した**実装プラン**を出す。未読のまま採用できない判断は🔁を付け、対応する「読む資料」を実装プランの判断行に紐づける。値照合付きレベルでは、実装プランをチャットの返答としてではなく`.lism/plan.md`として保存する（規約は[`references/verification.md`](./references/verification.md)）。
+4. 「資料確認トリガー」に従い、各操作をコードに書く手前で対応資料を読み、🔁を✅または⏸へ解消する。
+5. ⏸が残る項目（px丸め・任意色・挙動変更・公開クラス変更など）は、その部分を実装する前にユーザー確認する。確認が取れない場合の運用は「判定記号」の⏸の項に従う。
+6. 実装する。
+7. 提出前セルフチェックで実装プランと実装を照合し、🔁の未解消・資料確認ログとの対応・差分・漏れを処理する。照合の実行はできる限り実装した本人から分離する（「提出前セルフチェック」の検証の分離を参照）。
 
-コードを書き始める前に、**これから使う予定の数値・キー名・カラー名をすべて列挙し、[tokens.md](./tokens.md) の値リストと照合すること**。照合が済むまでコードを書かない。
+C0–C8の詳細と出力形式は[`references/authoring.md`](./references/authoring.md)にまとめています。
 
-頻出ミス（spacing 中間値・角丸/影の数値外し・fz の他FW混入・存在しないカラー名・`--keycolor` 誤用 など）の NG → OK 例は [antipatterns.md](./antipatterns.md) を参照。
+## 判定記号
 
-照合中に「該当トークンが無い／揺れる」値が見つかった場合は、そのまま実装に進まず [デザインデータ取り込み時のフロー](#デザインデータ取り込み時のフロー) に従ってユーザー確認すること。
+実装プラン（実装前チェックの成果物）の各行に付ける記号です。
 
-### プリフライト・c-- 定義時の分解（必須）
+| 記号 | 意味 |
+| --- | --- |
+| ✅ | 確定。新規定義（コンポーネント/トークン/クラスなど）や合意済みの直書き例外は、行内に注記する（例: `✅新規`、`✅例外（1px罫線）`） |
+| 🔁 | 資料確認トリガーに該当する未通過項目。対応操作をコードに書く手前で指定資料を読み、✅または⏸へ解消する。🔁のまま実装しない |
+| ⏸ | 要ユーザー確認。確認まで実装しない |
 
-`c--*` を新規に定義する／既存に追記する前に、書こうとしている各 CSS 宣言を以下の 2 グループに分解する：
+判定記号と注記はここに挙げたものだけを使います（記号は✅/🔁/⏸、✅への注記は`✅新規`・`✅例外`・`✅前提`のみ）。注記を組み合わせたり（例: `✅例外/前提`）、新しい記号・注記を作ったりしてはいけません。該当する行は未通過（🔁相当）として扱います。
 
-1. **Property Class / Props で書ける宣言** — マークアップ側に `-{prop}:{value}` または Lism Props として移す。CSS に書かない。
-2. **CSS でしか書けない宣言** — 擬似クラス・擬似要素・状態切替・子孫セレクタなど。これらは `.c--*` の CSS に残す。
+直書き例外を`✅例外`にできるのは、`antipatterns.md`の「直書きしてよい例外」（1px罫線・transform微調整・@media閾値など）に該当する場合だけです。`✅例外`の行には、この許可リストのどの項目に該当するかの引用を必ず添えます。引用を書けない場合、その行は⏸です。それ以外の例外化・丸め・新規トークンは⏸にします。この許可リストに例外カテゴリを自作して追加してはいけません。「正確に再現して」等のユーザー指示や実測値であることは`✅例外`の根拠になりません。デザイン値の既定の扱いは[`references/authoring.md`](./references/authoring.md)の「デザインデータ取り込みフロー」（入力種別と既定動作）に従います。
 
-**CSS が 1 行も残らなくても、`c--*` クラス名はマークアップに付けたまま残してよい。**
-むしろコンポーネントとしての意味づけがソースから読み取れるので、空の `c--*` クラスは付けておくことを推奨する（CSS ファイル側にセレクタを書く必要は無い）。
+⏸のユーザー確認が取れない状況（自律実行など）では、原則準拠側の選択肢（すり合わせ済みの方針があればそれ、無ければ入力種別ごとの既定動作。例: 最寄りトークンへの丸め）を選び、該当行を選んだ選択肢の注記付きの`✅前提`（例: `✅前提（p="30"へ丸め）`）へ更新して前提を実装プランに明示した上で進め、完了報告で論点と代替案を列挙します。⏸のまま実装しない点は通常時と同じです。px直書き・例外カテゴリの新設・公開クラス変更・破壊的変更など逸脱側の選択肢は、この方式では採用できず⏸のままにします。
 
-例：
+> `lism-css-refactor`スキルは同じ記号を別の意味（✅=触らない、⬜=意図的に残す等）で使います。リファクタ時はrefactor側の定義に従い、どちらの意味で使っているかを表の見出しなどで明示してください。
 
-NG（全部 CSS に書く）
+## 実装プランのC一覧（実装前チェック項目）
 
-```css
-.c--tag {
-  font-size: var(--fz--xs);
-  padding: var(--s10);
-  background-color: var(--base-2);
-  border-radius: var(--bdrs--10);
-}
-```
+このガイドでは、実装前に確認する項目を`C0`〜`C8`の番号で表します。`C`はCheck（確認）の略で、短く参照するためのラベルです。
 
-OK（Property Class でマークアップに移し、`c--tag` は意味づけとして残す）
+| C | 見ること | 主な参照先 |
+| --- | --- | --- |
+| C0 | 入力整理:対象/粒度/フレームワーク/既存制約/不明点 | 既存コード・要件 |
+| C1 | 構造・セマンティクス選定 | `primitive-class.md`、`components-core.md` |
+| C2 | 再利用・コンポーネント境界 | `components-core.md`、`components-ui.md` |
+| C3 | 命名設計 | `naming.md`、`css-rules.md` |
+| C4 | 状態・バリエーション設計 | `trait-class.md`、`antipatterns-layout.md` |
+| C5 | 値・トークン照合 | `tokens.md`、`property-class.md` |
+| C6 | レスポンシブ方針 | `responsive.md`、`is--container.md` |
+| C7 | CSSに書くもの/Propsに移すもの | `property-class.md`、`css-rules.md` |
+| C8 | 既定値の確認 | `primitives/l--*.md` |
 
-```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（クラス名はマークアップに残す）。
+| レベル | 条件 | 確認するC | 出力 |
+| --- | --- | --- | --- |
+| 不要 | 説明のみ/コード変更なし/既存の書き方に沿った微修正 | — | — |
+| 軽量 | 数行の小変更・既存パターン内の変更 | C1・C5中心 | 3〜5行の箇条書き |
+| 通常 | 新規UI/コンポーネント/セクション | 必須=初期確認した資料、C0、C1、C5、C6。該当時だけC2/C3/C4/C7/C8 | 項目別の表 |
+| 値照合付き | Figma/スクショ等のデザイン再現 | 通常+C5/C7を詳しく確認 | 項目別の表＋トークン差分表（差分列必須）。`.lism/plan.md`へ保存 |
 
-> **注意**: `is--*` は「〜である（役割・存在の宣言）」を表す trait 用プレフィックス。ユーザー定義の `is--*` を追加することは可能だが、**状態管理（`is--active` 等）やスタイルバリエーション（`is--solid` 等）への流用は誤用**。状態は `data-*` 属性、バリエーションは BEM Modifier（`c--{name}--{variant}`）で表現する。詳細: [antipatterns.md の `is--` の誤用](./antipatterns.md#is---の誤用状態バリエーション)
+通常レベルでも該当しないCは省略して構いません。表を形だけ埋めず、実装に影響する項目だけ列挙してください。
 
-詳細な NG → OK 例は [antipatterns.md の「Property Class で書けるのに CSS で書く」](./antipatterns.md#property-class-で書けるのに-css-で書く) を参照。
+## 資料確認トリガー
 
-### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
+次の表の左の操作をコードに書く手前で、右の資料をまだ読んでいない場合、その判断は🔁（未通過）にする。対応資料を読んで✅へ解消するか、判断できなければ⏸にする。**🔁のままコードへ反映してはいけません。**
 
-プリフライトでプリミティブとトークンを決めたら、細部を以下のチェックリストで検討する：
+| この操作をする手前で | この資料を読む |
+| --- | --- |
+| まだ読んでいないPrimitiveを使う | 該当の`primitives/l--*.md` |
+| まだ読んでいないTrait Classを使う | 該当の`trait-class/*.md`または`trait-class.md` |
+| スタイル宣言をCSS（ファイル・`<style>`）に書く、またはProperty Class/Lism Propsへ移す | `property-class.md` |
+| 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--*`節 |
+| 状態・バリエーションを設計する | `trait-class.md` |
 
-- Lism の用意している `set--`系クラス、`u--`系クラスは使えないか？
-- Property Class (`-{prop}:{value}` or `<Lism prop="value">`))を使ってスタイリングできるか？
-- 値をレスポンシブに切り替える時は Lism の Property Class (`-{prop}_{bp}` or `<Lism prop={[...]}>`)を使って実装できるか？
-- カラー・余白・フォントサイズ・タイポグラフィ・行間（ハーフレディング）・サイズ・角丸・シャドウなどはトークン値を流用できないか？
-- その他、Lismが用意するCSS変数を活用できないか？
+「必要なら参照」などの曖昧な表現で代替しない。対象操作の直前に読む。
 
-### ネイティブCSS で書くかどうか
+## 最小ゲート
 
-`c--*` クラスを定義する際、Primitive Class / Trait Class / Property Class / Lism Props で書ける宣言は CSS に直接書かない。
+次のルールを常に守る。迷う・例外にする・既存実装と衝突する場合は、該当資料を読んで🔁を✅または⏸へ解消する。
 
-CSS（`@layer lism-component` 等）に書くのは、以下のいずれかに該当する宣言のみ：
+- 構造は`<div>`+素のCSSよりPrimitiveを優先する。候補は「目的別実装ガイド」の表から選ぶ。
+- `c--*`命名はBlockをcamelCase、Elementを`_`ひとつ、Modifierを`--`ふたつにする。`c--feature-card`や`__`は使わない。
+- `c--*`のCSSは必ず`@layer lism-component`内に置く。
+- トークン外のpx/rem/em値を勝手に丸めたり直書きしたりしない。丸め・新規トークン・直書き例外は⏸にする（`antipatterns.md`の「直書きしてよい例外」に該当する場合のみ`✅例外`にできる）。
+- 単一要素にだけ効く宣言はCSSに書かず、まずLism Props/Property Classで表せないか確認する。CSSに残すのは擬似要素・子孫セレクタ・状態切替などProperty Classで書けない宣言だけにする。
+- レスポンシブ値はbaseを必ず置く。container query運用なら必要な`isContainer`祖先を確認する。
+- 状態は`data-*`/ARIA、見た目バリエーションは`c--name--variant`で表す。`is--active`のようにTrait Classを状態名へ流用しない。
 
-- 擬似クラス・擬似要素（`:focus`, `::before`, `::after`, `:nth-child` 等）
-- 状態切替（data属性で管理する`[data-is-active]`等）で複数プロパティを切り替える場合
-- 自分でクラスを付けられない子孫要素のスタイル（MDX/markdown レンダリング配下の `h2` / `p` / `blockquote` 等）
-- その他、Lism の既存クラスで表現できないスタイル。（計算式・特殊なスタイル、アニメーションなど。）
+## 目的別実装ガイド
 
+やりたいことからPrimitive/コンポーネントの候補を引く表です。候補が複数ある行は括弧内の基準で使い分けます。
 
-### コンポーネント化のルール（CSS ではなくマークアップで束ねる）
+| やりたいこと | 使う候補 | 詳細 |
+| --- | --- | --- |
+| 縦並び | `Stack`/`Flow` | `primitives/l--stack.md`、`primitives/l--flow.md` |
+| 横並び | `Cluster`（折り返す）/`Flex`（細かく制御する） | `primitives/l--cluster.md`、`primitives/l--flex.md` |
+| カラム | `Columns`（等幅N列）/`AutoColumns`（最小幅ベースの自動段組み）/`WithSide`（2カラム自動切替） | `primitive-class.md#カラムレイアウト-primitive-の使い分けガイド` |
+| 幅制御 | `Container`（コンテナクエリ基準）/`Wrapper`（直下領域の幅制限）/`max-sz`（単体の幅） | `trait-class/is--container.md`、`trait-class/is--wrapper.md`、`property-class/max-sz.md` |
+| 画像・動画・iframeを置く | `Frame`（アスペクト比枠・直下メディアのfit・overflowを任せる） | `primitives/l--frame.md` |
+| ボタン | `@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--` |
+| ページの定番セクション（ヒーロー・サイトヘッダー・フッター等） | `Group`＋`Wrapper`/`Stack`/`Cluster`の定番構成 | `references/page-sections.md` |
 
-同じ Property Class の組み合わせが 3 箇所以上で繰り返されるなら、**まず Astro/React コンポーネントとして切り出して Props で共通化** することを検討する。CSS の `c--*` を新設して中にスタイルを書くのはそれができない場合の手段とする。
+## 提出前セルフチェック
 
-- コンポーネントはできる限り `<Lism>` 系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築する。
-- カスタムコンポーネントクラスは `c--{name}` の命名規則に従う（CSS が空でも意味づけとして付ける）。
+**検証の分離（評価サブエージェント）**: サブエージェント／タスク委任機能が使える環境では、この節の照合を実装した本人ではなく読み取り専用の評価サブエージェントに委任します（指示テンプレ・報告書式・再評価ループは[`references/verification.md`](./references/verification.md)）。評価報告は`.lism/review.md`へ保存し、違反ゼロの報告が出るまで修正→再評価を繰り返してから提出します。完了報告では`.lism/review.md`を参照します。委任機能が使えない環境では、同じ照合を本人がこの節の順に自分で実行します。
 
+まず実装プランと実装を1行ずつ照合し、差分を「計画変更（意図的）/実装漏れ（直す）/要確認（再び確認が必要）」に分類します。その後、以下を確認します。
 
-### 間違いやすい例
+**プロセス照合**
 
-| NG | OK | 理由 |
-|----|-----|------|
-| `<Heading level={3}>` | `<Heading level="3">` | `level` は文字列型（`'1'`〜`'6'`） |
-| `hov="shadow"` | `hov="-bxsh"` | Lism の省略名は `bxsh`（box-shadow） |
-| `bgc="secondary"` | `bgc="base-2"` | カラートークンの間違い |
-| `p="8"`, `g="6"` | `p="20"`, `g="10"` | スペーストークンの間違い |
+- 実装プラン内の🔁が、提出前に✅または⏸へ解消されているか。🔁のままコードに反映した判断がないか。
+- 資料確認ログの各行が、実装プラン内の判断項目と対応しているか。未読のまま採用したPrimitive/トークン/命名/レスポンシブ判断がないか。
 
-その他の典型的な NG パターンは [antipatterns.md](./antipatterns.md) にカタログ化されているので、コード生成前に確認すること。
+**ルール照合**
 
-#### NG: レスポンシブの考慮漏れ・Gridの直書き
+- 「最小ゲート」の各項目に違反していないか。
+- [`antipatterns.md`](./antipatterns.md)と[`antipatterns-layout.md`](./antipatterns-layout.md)のTOCを開き、実装コードに該当しうる項目を1つずつ照合する。リンク表を眺めただけは確認済みにしない。
 
-渡されたPCサイズのデザインだけをみて、カラムレイアウトを`<Grid gtc="repeat(3, 1fr)>`のように固定してしまわないようにすること。
-特に指示がなければ、レスポンシブを意識して実装する。`<Columns>`（`l--columns`）を使ってブレイクポイントで切り替えるか、`l--withSide`や`l--autoColumns`で自動レスポンシブを採用することを検討する。
+**プラン再審査**
 
-また、Lism CSSではコンテナクエリを採用しているため、レスポンシブの値切り替えには先祖要素で `isContainer`(`is--container`クラス) が必要なことに注意。
+実装プランの判定自体を再審査します。プラン段階で✅にした逸脱は実装との差分照合では検出できない（差分ゼロ＝合格になってしまう）ため、差分照合とは別に行います。
 
-#### NG: コンテンツ幅のハードコーディング
+- `✅例外`を含む✅判定を、最小ゲート・`antipatterns.md`の「直書きしてよい例外」・すり合わせ済みの値マッピング方針に再照合する。許可リスト外の`✅例外`は⏸へ戻す。
+- 値照合付きレベルでは、`.lism/plan.md`にトークン差分表（差分列付き）が存在するか確認する。無ければその実装プランは無効。差分表を作成して照合をやり直す。スケール前提（画像の書き出し倍率等）が実測・整合チェックで検証済みかどうかも確認する（未検証なら差分表全体が無効）。
+- 実行レベル判定が妥当だったかを見直す（「不要」「軽量」への過小判定でチェックを省略していないか。デザイン再現なのに「値照合付き」へ上げず、トークン差分表を回避していないか）。
 
-ページ全体のデザインデータを渡された時、サイト幅やセクションエリアのサイズを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` 等）
+**個別確認（最小ゲート・antipatternsでカバーされない項目）**
 
+- `@lism-css/ui`の既存コンポーネントで置き換えられないか。
+- 同じProperty Classの組み合わせが3箇所以上ならコンポーネント化を検討したか。
+- 既存の命名・レイヤー・ファイル配置に合っているか。
+- デザイン再現（値照合付き）では、レンダリング結果の確認を完了報告の前提にする。環境的に確認できない場合は、完了報告にユーザーへの目視確認依頼を含める。HTTPステータスやビルド成功だけで完了扱いにしない。
 
 ## 詳細リファレンス
 
-このスキルには以下の詳細ファイルが含まれます。必要に応じて参照してください。
-
-- [tokens.md](./tokens.md) — Lismで利用できるデザイントークンとCSS変数。（余白・フォントサイズ・タイポグラフィ・角丸・影・カラー・不透明度）
-- [css-rules.md](./css-rules.md) — CSS設計の概要。（Layer構造・クラスの分類・プレフィックスのつけ方・Component クラス（`c--`）・カスタムCSSの追加ルール）
-- [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--`）の一覧と用途。カラムレイアウト系の使い分けガイドも含む。
-- [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}`形式のクラス）の一覧・記法。
-- [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` によるコアコンポーネント挙動のカスタマイズ方法。
-
-これら各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。
-
-### クラス単位の詳細リファレンス
-
+各ファイルの内容と、読むタイミングの目安です。
+
+| ファイル | 内容 | こんな時に読む |
+| --- | --- | --- |
+| `primitive-class.md` | `l--`/`a--` Primitive一覧と使い分け | レイアウト選定（必要なら`primitives/l--*.md`も） |
+| `trait-class.md` | `is--`/`has--` Trait一覧と役割 | 状態・バリエーション設計 |
+| `property-class.md` | `-{prop}:{value}`形式のProperty Class | CSSをProperty Class/Propsへ移せるか |
+| `utility-class.md` | `u--*`ユーティリティ | ユーティリティの確認 |
+| `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 |
+| `responsive.md` | BP・コンテナクエリ・レスポンシブProps | レスポンシブ・コンテナクエリ |
+| `base-styles.md` | Reset CSSとHTML要素の基本スタイル | 素のHTML要素の既定を確認 |
+| `components-core.md` | `lism-css`のReact/Astroコアコンポーネント | React/Astroコンポーネント |
+| `components-ui.md` | `@lism-css/ui`のUIコンポーネント | UIコンポーネント置換 |
+| `customize.md` | SCSS変数・`lism.config.js`によるカスタマイズ | トークン/設定をカスタマイズ |
+| `antipatterns.md` | AIが生成しがちなNG→OK（値・スタイル宣言系） | 典型ミス確認 |
+| `antipatterns-layout.md` | NG→OKの分冊（構造・レイアウト・レスポンシブ系） | 構造・レイアウトの典型ミス確認 |
+| `references/authoring.md` | 実装プランの作り方（C0–C8詳細・出力フォーマット） | 実装プランを作る/書式を確認 |
+| `references/verification.md` | `.lism/`規約・評価サブエージェントへの委任 | プラン保存・提出前チェックの委任 |
+| `references/page-sections.md` | ヒーロー・ヘッダー・フッター等の定番構成例 | ページセクションの実装 |
+
+## クラス単位の詳細リファレンス
 
 **Layout Primitives**
 
-- `l--box` / `<Box>`: [primitives/l--box.md](./primitives/l--box.md)
-- `l--flex` / `<Flex>`: [primitives/l--flex.md](./primitives/l--flex.md)
-- `l--stack` / `<Stack>`: [primitives/l--stack.md](./primitives/l--stack.md)
-- `l--cluster` / `<Cluster>`: [primitives/l--cluster.md](./primitives/l--cluster.md)
-- `l--grid` / `<Grid>`: [primitives/l--grid.md](./primitives/l--grid.md)
-- `l--flow` / `<Flow>`: [primitives/l--flow.md](./primitives/l--flow.md)
-- `l--center` / `<Center>`: [primitives/l--center.md](./primitives/l--center.md)
-- `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--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--)**
-
-- `is--container` / `<Container>`: [trait-class/is--container.md](./trait-class/is--container.md)
-- `is--wrapper` / `<Wrapper>`: [trait-class/is--wrapper.md](./trait-class/is--wrapper.md)
-- `is--layer` / `<Layer>`: [trait-class/is--layer.md](./trait-class/is--layer.md)
-- `is--boxLink` / `<BoxLink>`: [trait-class/is--boxLink.md](./trait-class/is--boxLink.md)
-
-**Trait Class (has--)**
-
-- `has--transition` (`hasTransition` prop): [trait-class/has--transition.md](./trait-class/has--transition.md)
-- `has--gutter` (`hasGutter` prop): [trait-class/has--gutter.md](./trait-class/has--gutter.md)
-- `has--snap` (`hasSnap` prop): [trait-class/has--snap.md](./trait-class/has--snap.md)
-- `has--mask` (`hasMask` prop): [trait-class/has--mask.md](./trait-class/has--mask.md)
-
-**Atomic Primitives**
-
-- `a--icon` / `<Icon>`: [primitives/a--icon.md](./primitives/a--icon.md)
-- `a--divider` / `<Divider>`: [primitives/a--divider.md](./primitives/a--divider.md)
-- `a--spacer` / `<Spacer>`: [primitives/a--spacer.md](./primitives/a--spacer.md)
-- `a--decorator` / `<Decorator>`: [primitives/a--decorator.md](./primitives/a--decorator.md)
-
-**Property Class（特殊仕様）**
-
-- `-bd` / `-bd-{side}` 系: [property-class/bd.md](./property-class/bd.md)
-- `-hov:*` 系: [property-class/hov.md](./property-class/hov.md)
-- `-max-sz:full` / `-max-sz:bleed`: [property-class/max-sz.md](./property-class/max-sz.md)
-
+- `l--box`/`<Box>`: `primitives/l--box.md`
+- `l--flex`/`<Flex>`: `primitives/l--flex.md`
+- `l--stack`/`<Stack>`: `primitives/l--stack.md`
+- `l--cluster`/`<Cluster>`: `primitives/l--cluster.md`
+- `l--grid`/`<Grid>`: `primitives/l--grid.md`
+- `l--flow`/`<Flow>`: `primitives/l--flow.md`
+- `l--center`/`<Center>`: `primitives/l--center.md`
+- `l--frame`/`<Frame>`: `primitives/l--frame.md`
+- `l--columns`/`<Columns>`: `primitives/l--columns.md`
+- `l--tileGrid`/`<TileGrid>`: `primitives/l--tileGrid.md`
+- `l--autoColumns`/`<AutoColumns>`: `primitives/l--autoColumns.md`
+- `l--switchColumns`/`<SwitchColumns>`: `primitives/l--switchColumns.md`
+- `l--withSide`/`<WithSide>`: `primitives/l--withSide.md`
+
+**Trait Class**
+
+- `is--container`/`<Container>`: `trait-class/is--container.md`
+- `is--wrapper`/`<Wrapper>`: `trait-class/is--wrapper.md`
+- `is--layer`/`<Layer>`: `trait-class/is--layer.md`
+- `is--boxLink`/`<BoxLink>`: `trait-class/is--boxLink.md`
+- `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`
+
+**Atomic Primitives/Property Class**
+
+- `a--icon`/`<Icon>`: `primitives/a--icon.md`
+- `a--divider`/`<Divider>`: `primitives/a--divider.md`
+- `a--spacer`/`<Spacer>`: `primitives/a--spacer.md`
+- `a--decorator`/`<Decorator>`: `primitives/a--decorator.md`
+- `-bd`/`-bd-{side}`系: `property-class/bd.md`
+- `-hov:*`系: `property-class/hov.md`
+- `-max-sz:full`/`-max-sz:bleed`: `property-class/max-sz.md`
 
 ## このスキルファイル自身のアップデート方法
 
-`skills add lism-css/lism-css` を再実行してください。
-更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/skills/lism-css-guide) を直接チェックしてください。
+ユーザーがスキル更新を依頼した場合は、`lism-cli skill add`または`lism-cli skill update`を案内してください。最新を確認したい場合は、GitHubリポジトリの`skills/lism-css-guide`を確認してください。