@lism-css/mcp 0.23.0 → 0.26.0

package/dist/data/guides/references/page-sections.md

@@ -0,0 +1,99 @@
+# ページ定番セクションの構成例
+
+ヒーロー・サイトヘッダー・フッターなど、ページの定番セクションを`Group`/`Wrapper`/`Stack`＋Propsで組む時の出発点です。ここにある構成をベースにし、実際の値は値・トークン照合（C5）を通してから確定します。
+
+共通の考え方:
+
+- セクションの外殻は`Group`（`as="header"`/`as="section"`/`as="footer"`）で意味付けし、`c--siteHeader`のような何のパーツかを示す独自クラス名を付ける（ページ固有の領域も`c--frontHero`のようにslug等を含めて`c--`で命名する。[`css-rules.md`](../css-rules.md#独自クラスの選び方2分類)）。
+- 「全幅の背景＋中央寄せの本文幅」は、外殻`Group`（背景色・縦padding）＋`hasGutter`（サイト共通の左右余白）＋内側`Wrapper`（コンテンツ幅）の組み合わせで作る。`max-width`をpxで直書きしない。
+- 縦の並びは`Stack`、横並びは`Cluster`に任せ、余白はすべて`g`/`py`などのトークンPropsで表す。
+- セクションの高さをデザインpxで固定しない。高さは余白（`py`）とコンテンツが決める。
+
+## サイトヘッダー
+
+ロゴ＋ナビの横並び。折り返しは`Cluster`、両端寄せは`jc="between"`。
+
+```jsx
+import { Group, Wrapper, Cluster, Link } from 'lism-css/astro';
+
+<Group as="header" className="c--siteHeader" bgc="base" py="20" hasGutter>
+  <Wrapper contentSize="xl">
+    <Cluster jc="between" g="20">
+      <Link href="/" fw="bold" fz="l">Site Name</Link>
+      <Cluster as="nav" g="30" fz="s">
+        <Link href="/about">About</Link>
+        <Link href="/blog">Blog</Link>
+        <Link href="/contact">Contact</Link>
+      </Cluster>
+    </Cluster>
+  </Wrapper>
+</Group>
+```
+
+- ボタン型のCTAを置くなら`@lism-css/ui`の`Button`を使う（[`components-ui.md`](../components-ui.md)）。素の`<button>`を整えるなら`set--plain`。
+- 追従ヘッダーにする場合だけ`pos="sticky" t="0" z="99"`を足す。
+
+## ヒーローセクション
+
+全幅背景＋中央寄せテキスト＋CTA。
+
+```jsx
+import { Group, Wrapper, Stack, Cluster, Heading, Text } from 'lism-css/astro';
+
+<Group as="section" className="c--frontHero" bgc="base-2" py={['60', null, '80']} hasGutter isContainer>
+  <Wrapper contentSize="l">
+    <Stack g="30" ai="center" ta="center">
+      <Heading level="1" fz={['3xl', null, '5xl']}>キャッチコピー</Heading>
+      <Text fz={['m', null, 'l']} c="text-2">サブコピー</Text>
+      <Cluster g="20" jc="center">{/* CTA: @lism-css/ui の Button */}</Cluster>
+    </Stack>
+  </Wrapper>
+</Group>
+```
+
+- 背景に画像やレイヤーを敷く場合は`Layer`を検討する（[`../trait-class/is--layer.md`](../trait-class/is--layer.md)）。
+
+## フッター
+
+リンク集の段組み＋コピーライト。列数固定なら`Columns`、最小幅ベースの自動段組みなら`AutoColumns`。
+
+```jsx
+import { Group, Wrapper, Stack, AutoColumns, Text, Divider } from 'lism-css/astro';
+
+<Group as="footer" className="c--siteFooter" bgc="text" c="base" py="60" hasGutter isContainer>
+  <Wrapper contentSize="xl">
+    <Stack g="40">
+      <AutoColumns cols="12rem" g="40">
+        <Stack g="15" fz="s">{/* リンク列 */}</Stack>
+        <Stack g="15" fz="s">{/* リンク列 */}</Stack>
+        <Stack g="15" fz="s">{/* リンク列 */}</Stack>
+      </AutoColumns>
+      <Divider />
+      <Text fz="xs" ta="center">© 2026 Site Name</Text>
+    </Stack>
+  </Wrapper>
+</Group>
+```
+
+## 汎用コンテンツセクション
+
+見出し＋カード一覧などのくり返し型。
+
+```jsx
+import { Group, Wrapper, Stack, Heading, Columns } from 'lism-css/astro';
+
+<Group as="section" className="c--frontFeatures" py="70" hasGutter isContainer>
+  <Wrapper contentSize="l">
+    <Stack g="40">
+      <Heading level="2" fz="2xl" ta="center">Features</Heading>
+      <Columns cols={[1, null, 3]} g="30">{/* カード */}</Columns>
+    </Stack>
+  </Wrapper>
+</Group>
+```
+
+## 使う前の確認
+
+- 使うPrimitive/Traitの詳細ファイル（`primitives/l--*.md`・`trait-class/*.md`）を、`SKILL.md`の資料確認トリガーに従って読む。
+- レスポンシブ値（配列・オブジェクト指定）を使う場合は、祖先の`isContainer`または`@media`運用の確認が必要（[`responsive.md`](../responsive.md)）。
+- ここに書いた値はすべて例。実際のデザイン値は`tokens.md`との照合（C5）とトークン差分表を通す。

package/dist/data/guides/references/verification.md

@@ -0,0 +1,75 @@
+# 検証の分離（`.lism/`規約と評価サブエージェント）
+
+提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約です。実装フロー・チェック項目の正本は`SKILL.md`（実装フロー・提出前セルフチェック）、実装プランの中身と書式は[`authoring.md`](./authoring.md)を参照してください。
+
+`lism-css-guide`の実装フローでは、事前チェック実行レベルが「通常」「値照合付き」の場合だけこの規約を適用します。「不要」「軽量」では`.lism/`へのファイル作成も評価サブエージェントへの委任も行いません（`SKILL.md`「事前チェック実行レベル」参照）。このレベル条件は`lism-css-guide`固有のもので、`.lism/`規約をここから参照する他のスキル（`lism-css-refactor`等）には適用されません。他のスキルからの利用時は、ファイルを作るかどうかは各スキル側の手順に従ってください。
+
+## `.lism/`作業ディレクトリ
+
+Lism実装作業の成果物（実装プラン・評価報告）は、プロジェクトルートの`.lism/`に固定名で保存します。
+
+| ファイル | 内容 | 作成タイミング |
+| --- | --- | --- |
+| `.lism/plan.md` | 実装プラン（トークン差分表・構成表を含む） | 値照合付きレベルの実装前チェック時 |
+| `.lism/review.md` | 評価サブエージェント（委任できない環境では本人）による評価報告 | 通常・値照合付きレベルの提出前セルフチェック時（不要・軽量では作成しない） |
+
+- **固定名・上書き方式**。タスクごとに別名を作らない。照合先が一意に決まることが、評価サブエージェントや将来の機械チェックの前提になる。複数タスクの文脈は各ファイル冒頭のメタデータヘッダで区別する。
+- メタデータヘッダには日時・対象タスク・スケール前提（デザイン再現時。判定根拠付き）を書く。
+- OSのtempディレクトリは使わない（環境ごとにパスが変わり、ユーザーが確認できない）。
+- このスキルが既存プロジェクトの`.gitignore`を書き換えることはしない。`.lism/`をコミットしない運用にしたいユーザーには、完了報告で`.gitignore`への追加を案内する（プランを記録として残す運用も可）。
+
+`.lism/plan.md`のメタデータヘッダ例:
+
+```yaml
+---
+date: 2026-07-02
+task: トップページのヒーローセクション実装
+scale: PNGは2880px幅=1440px設計の2x書き出し（画像実寸と行送り・ボタン高さの整合で判定）
+---
+```
+
+## 評価サブエージェントへの委任
+
+提出前セルフチェックを実装した本人だけで行うと、「正確に再現する」等のゴールへの執着や、自分で立てたプランを疑いにくくなる心理から、例外を自己承認してしまいやすくなります。サブエージェント／タスク委任機能が使える環境では、照合を読み取り専用の評価サブエージェントに委任します。使えない環境では、同じ照合を本人が`SKILL.md`「提出前セルフチェック」の順に自分で実行します。
+
+運用ルール:
+
+- 評価サブエージェントは**実装プランではなくルールと照合する**。基準は`SKILL.md`の「最小ゲート」「判定記号」、`antipatterns.md`・`antipatterns-layout.md`、`property-class.md`。プラン段階で✅にされてしまった逸脱も、コードがルール違反であれば検出できる。
+- 加えて`.lism/plan.md`と実装を突き合わせる: CSSに残った各宣言が、構成表の「CSSに残す」列やトークン差分表の行に対応しているか。**表に対応しない宣言は違反として列挙する**。
+- 評価は読み取りだけで完結させる（評価サブエージェントはコードを変更しない）。
+- **違反ゼロを終了条件にする**: 違反ゼロの評価報告が出るまで提出せず、違反を修正したら再評価を依頼する（修正→再評価を繰り返す）。
+- 評価報告は`.lism/review.md`へ保存し、完了報告から必ず参照する（評価を実施したことをユーザーが確認できるようにする）。
+
+### 評価サブエージェントへの指示テンプレ
+
+```md
+あなたはLism CSS実装の評価者です。実装の意図や経緯は考慮せず、ルール照合だけを行ってください。
+
+対象ファイル: {実装・変更したファイルのパス一覧}
+実装プラン: .lism/plan.md（存在する場合）
+照合する資料（このスキルのファイル）:
+- {skillルート}/SKILL.md の「最小ゲート」「判定記号」
+- {skillルート}/antipatterns.md と antipatterns-layout.md（TOCの全項目と照合）
+- {skillルート}/property-class.md（CSSに残った宣言がProps/Property Classで表せないか）
+- {skillルート}/tokens.md（使われている値・色がトークンに存在するか）
+
+確認すること:
+1. 最小ゲートの各項目への違反
+2. antipatterns系2ファイルの各項目に該当するコード
+3. CSS内の各宣言が .lism/plan.md の構成表・トークン差分表の行に対応しているか（対応しない宣言は違反）
+4. `✅例外`の行が「直書きしてよい例外」のどの項目に該当するかの引用を伴っているか
+
+報告書式（違反ゼロでも作成する）:
+
+| file:line | 違反ルール（資料名と節） | 内容 | 判定 |
+| --- | --- | --- | --- |
+
+判定は「違反 / 要確認」。表には違反・要確認の行だけを載せ、適合した項目を1行ずつ列挙しないでください。最後に「照合した資料名の一覧」と違反・要確認の件数サマリを書いてください。違反ゼロの場合、報告はこの一覧とサマリだけでかまいません。
+```
+
+### grepによる補助チェック（コマンドが実行できる環境のみ）
+
+評価時に`grep`等が使える場合は、次の検出で違反候補のあたりを付けてよい（最終判定は資料との照合で行う）:
+
+- **Props移行漏れ**: Props/Property Classで表せるプロパティの宣言がカスタムCSSに残っていないかを、値ではなく**プロパティ名**で検出する。`grep -rnE '^\s*(padding|margin|gap|font-(size|family|weight)|line-height|letter-spacing|color|background|border-radius|(max-|min-)?(width|height)|text-align)[^:]*:' src` のヒット行は、値がトークン参照（`var(--s20)`等）でも移行候補。CSS残留を許可するのは擬似要素・子孫セレクタ・状態切替を伴う宣言だけ。
+- **トークン外の値**: px/rem/emは `grep -rnE '[0-9]+(\.[0-9]+)?(px|rem|em)' src`、生hexは `grep -rnE '#[0-9a-fA-F]{3,8}' src`。ヒット行を「直書きしてよい例外」または`.lism/plan.md`の該当行に対応付け、対応付けられない行は違反。

package/dist/data/guides/responsive.md

@@ -8,7 +8,7 @@ Lism CSS は**コンテナクエリ**をデフォルトで採用しています
 - [HTML / Property Class での指定](#html--property-class-での指定)
 - [Lism コンポーネントでの指定](#lism-コンポーネントでの指定)
 
-[詳細](https://lism-css.com/docs/responsive/)
+[詳細](https://lism-css.com/docs/responsive.md)
 
 ---
 
@@ -23,7 +23,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 ```
 
 | BP | 値 | 効くタイミング |
-|----|-----|----------------|
+| --- | --- | --- |
 | `xs` | 0（無効） | （opt-in） |
 | `sm` | 480px | sm 以上 |
 | `md` | 800px | md 以上 |
@@ -99,19 +99,7 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
 }
 ```
 
-**例外パターン** — `alwaysVar` 対応の `c`, `bgc`, `p`, `m`, `bdrs` のみ。ベース変数 `--p` が常に現在適用中の値を指すように上書きされる（state 変数扱い）:
-
-```css
-.-p { padding: var(--p) }
-@container (min-width: 480px) {
-  .-p_sm { padding: var(--p); --p: var(--p_sm) !important }
-}
-@container (min-width: 800px) {
-  .-p_md { padding: var(--p); --p: var(--p_md) !important }
-}
-```
-
-ソースコードの [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) で `alwaysVar: 1` がセットされているプロパティがこのパターンで出力されます。
+**例外パターン** — `alwaysVar` 対応の `c`, `bgc`, `p`, `m`, `bdrs` のみ。ベース変数（`--p` 等）が常に現在適用中の値を指すように上書きされる。CSS出力例と仕組みは [property-class.md の `alwaysVar` タイプ](./property-class.md#alwaysvar-タイプ)を参照。
 
 ## Lism コンポーネントでの指定
 
@@ -132,3 +120,44 @@ Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape)
      style="--p_sm: var(--s30); --p_md: var(--s40); --fz_sm: var(--fz--m); --fz_md: var(--fz--l)">
 </div>
 ```
+
+---
+
+## Authoring時の確認ルール
+
+### base値を必ず置く
+
+BP専用値だけを書くと、BP未満で値が未指定になります。配列では先頭、オブジェクトでは`base`、HTMLでは`-{prop}:{value}`を必ず置きます。
+
+| NG | OK |
+| --- | --- |
+| `<Box p={{ sm: 30 }}>` | `<Box p={{ base: '20', sm: '30' }}>` |
+| `<div class="-p_sm" style="--p_sm:var(--s30)">` | `<div class="-p:20 -p_sm" style="--p_sm:var(--s30)">` |
+
+### 冗長配列は圧縮する
+
+前のBPと同じ値を繰り返さない。変わらないBPは`null`でスキップし、全BPで同じ値なら単一値にします。
+
+| NG | OK |
+| --- | --- |
+| `fxd={['column', 'column', 'row']}` | `fxd={['column', null, 'row']}` |
+| `p={['20', '20', '20']}` | `p="20"` |
+| `cols={[1, 1, 3]}` | `cols={[1, null, 3]}` |
+
+ただし、既存コードの型・生成仕様で`null`が使えない場合は既存パターンを優先します。レスポンシブ差分を誤って単一値化しないでください。
+
+### container query運用では祖先`isContainer`を確認する
+
+デフォルトではレスポンシブProperty Classは`@container`で発火します。レスポンシブ値を載せる要素の祖先に`isContainer`/`is--container`があるか確認してください。
+
+```jsx
+<Stack isContainer>
+  <Box p={{ base: '20', md: '40' }}>...</Box>
+</Stack>
+```
+
+`$is_container_query:0`などの設定でmedia query運用が確認できる場合は、`isContainer`祖先は必須ではありません。設定が不明な場合は、既存SCSS設定・`customize.md`・生成CSSを確認してから判断してください。
+
+### `isContainer`を置く位置で挙動が変わる
+
+`isContainer`を追加する位置はcontainer幅と発火タイミングを変えます。既存UIの見た目・UXが変わる可能性がある場合は⏸としてユーザー確認してください。特に、固定Gridを`cols={[1,2,3]}`へ変える提案は挙動変更として扱います。

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

@@ -8,7 +8,7 @@ HTML では直接クラスを付与し、Lism コンポーネントでは `set`
 set-- は目的別に 2 カテゴリに分かれます。
 
 | カテゴリ | 用途 | クラス |
-|---------|------|--------|
+| --- | --- | --- |
 | 基礎スタイリング | HTML 要素のリセット／リバート | `set--plain` / `set--revert` |
 | 変数のセット | CSS 変数のセットアップのみを行う | `set--bxsh` / `set--hov` / `set--bdrsInner` / `set--bleed` / `set--s` |
 
@@ -30,17 +30,7 @@ set-- は目的別に 2 カテゴリに分かれます。
 
 ## 対応ソースコード
 
-ソース: https://github.com/lism-css/lism-css/tree/main/packages/lism-css/src/scss/base/set
-
-| クラス | ソースファイル |
-|--------|---------------|
-| `set--plain` | [`_plain.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_plain.scss) |
-| `set--revert` | [`_revert.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_revert.scss) |
-| `set--bxsh` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
-| `set--hov` | [`_hov.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_hov.scss) |
-| `set--bdrsInner` | [`_bdrsInner.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bdrsInner.scss) |
-| `set--bleed` | [`_bleed.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/set/_bleed.scss) |
-| `set--s` | [`_tokens.gen.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_tokens.gen.scss) |
+ソース: https://github.com/lism-css/lism-css/tree/main/packages/lism-css/src/scss/base/set（`set--{name}` は `_{name}.scss` に対応。`set--bxsh` / `set--s` のみ `base/tokens/_tokens.gen.scss` で生成）
 
 ---
 

package/dist/data/guides/tokens.md

@@ -29,7 +29,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## トークン概要テーブル
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
-|---|---|---|---|
+| --- | --- | --- | --- |
 | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
 | フォントサイズ (fz) | `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
 | ハーフレディング・行間 (hl/lh) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
@@ -54,7 +54,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 フィボナッチ数列ベースのスケーリング。`--s-unit`（デフォルト `calc(var(--fz--base) * 0.5)` ＝ ≒ 8px）を基準単位とする。
 
 | CSS変数 | 値 | 実サイズ目安 |
-|---------|-----|------------|
+| --- | --- | --- |
 | `--s5` | `calc(var(--s-unit) * 0.5)` | ≒ 4px |
 | `--s10` | `var(--s-unit)` | ≒ 8px |
 | `--s15` | `calc(var(--s-unit) * 1.5)` | ≒ 12px |
@@ -91,7 +91,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 倍音列（調和数列）ベースの、ハーモニックモジュラースケーリングを採用。`--fz-mol`（デフォルト `8`）を分子とする `mol / (mol ± n)` の比率で算出される。
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--fz--5xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 6))` | 最大（mol/(mol-6)） |
 | `--fz--4xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 5))` | 特大（mol/(mol-5)） |
 | `--fz--3xl` | `calc(1em * var(--fz-mol) / (var(--fz-mol) - 4))` | 3XL（mol/(mol-4)） |
@@ -112,7 +112,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ハーフレディングの大きさ。Lism CSSでは、`line-height` は `calc(1em + var(--hl) * 2)` で算出される。`--hl-unit`（≒ 2px）を基準単位とする。
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--hl--xs` | `var(--hl-unit)` | 極小の行間（≒ 2px） |
 | `--hl--s` | `calc(var(--hl-unit) * 2)` | 小さめの行間（≒ 4px） |
 | `--hl--base` | `calc(var(--hl-unit) * 3)` | 基本の行間（≒ 6px） |
@@ -122,7 +122,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## 字間 (lts)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--lts--base` | `normal` | 基本の文字間隔 |
 | `--lts--s` | `-0.025em` | 狭めの文字間隔 |
 | `--lts--l` | `0.05em` | 広めの文字間隔 |
@@ -132,7 +132,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## フォント (ff)
 
 | CSS変数 | 値 |
-|---------|-----|
+| --- | --- |
 | `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif` |
 | `--ff--accent` | `Georgia, serif` |
 | `--ff--mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
@@ -141,7 +141,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## ウェイト (fw)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--fw--light` | `300` | 細め |
 | `--fw--normal` | `400` | 標準 |
 | `--fw--bold` | `600` | 太字（Hiragino Sans W6 相当） |
@@ -154,7 +154,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 音楽の強弱記号（piano 系列）に由来するセマンティック命名を採用。`p`（piano / 弱く）の反復回数が多いほど透明度が増す。Lism 内で「文字の反復回数で段階を表す」命名は opacity のみの例外。
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--o--mp` | `0.9` | mezzo-piano: ごく軽い減衰 |
 | `--o--p` | `0.75` | piano: hover fade, 補助テキスト等 |
 | `--o--pp` | `0.5` | pianissimo: disabled, divider, decorator 等 |
@@ -164,7 +164,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## 角丸 (bdrs)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--bdrs--10` | `0.25rem` | ≒ 4px |
 | `--bdrs--20` | `0.5rem` | ≒ 8px |
 | `--bdrs--30` | `1rem` | ≒ 16px |
@@ -178,7 +178,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 `--shc`（シャドウカラー）と `--shsz--{N}`（シャドウサイズ）を組み合わせて構成される。要素ごとに `--shc` を上書きして再計算したい場合は、`set--bxsh` クラスを併用する。
 
 | CSS変数 | 値 |
-|---------|-----|
+| --- | --- |
 | `--bxsh--10` | `var(--shsz--10) var(--shc)` |
 | `--bxsh--20` | `var(--shsz--20) var(--shc)` |
 | `--bxsh--30` | `var(--shsz--30) var(--shc)` |
@@ -186,7 +186,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--bxsh--50` | `var(--shsz--50) var(--shc)` |
 
 | CSS変数 | 初期値 |
-|---------|-----|
+| --- | --- |
 | `--shadow` | `hsl(220 4% 8% / 12%)` |
 | `--shc` | `var(--shadow)` |
 | `--shsz--10` | `0px 1px 3px` |
@@ -201,7 +201,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 `l--flow` のコンテンツ間余白に使われるトークン。`:root` で定義されている。
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--flow--base` | `var(--s30)`（`lang="ja"` 時は `var(--s35)`） | `l--flow` の基準余白 |
 | `--flow--s` | `var(--s20)` | `-flow:s` で適用される小さめの余白 |
 
@@ -211,7 +211,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 サイト全体のガター（左右余白）量を扱う変数群。`--flow--base` / `--flow` と同じく「基準値（`:root`）+ 要素ローカル機能変数」の2層構造を採る。
 
 | CSS変数 | 初期値 | 説明 |
-|---------|--------|------|
+| --- | --- | --- |
 | `--gutter--base` | `var(--s30)` | サイトコンテンツの左右余白の基準値（`:root` で定義） |
 | `--gutter` | `var(--gutter--base)` | `.has--gutter` で要素ローカルに初期化される機能変数。要素単位で `style="--gutter: 20px"` のように上書き可能 |
 
@@ -229,7 +229,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 サイト全体のカラー設計に使用するトークン。
 
 | CSS変数 | デフォルト値 | 説明 |
-|---------|------------|------|
+| --- | --- | --- |
 | `--base` | `hsl(220 0% 99%)` | ベース背景色 |
 | `--base-2` | `hsl(220 4% 95%)` | 代替背景色 |
 | `--text` | `hsl(220 0% 8%)` | 基本テキスト色 |
@@ -245,7 +245,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩度）の基準値を調整するとパレット全体の色味を変更可能。デフォルト: `--L: 60%`, `--C: 0.2`。
 
 | CSS変数 | 値 |
-|---------|-----|
+| --- | --- |
 | `--red` | `oklch(var(--L) var(--C) 20)` |
 | `--orange` | `oklch(calc(var(--L) + 6%) calc(var(--C) - 0.01) 48)` |
 | `--yellow` | `oklch(calc(var(--L) + 12%) calc(var(--C) - 0.02) 80)` |
@@ -263,10 +263,12 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 `--keycolor: var(--red)` のように指定しておくことで、そのボックス自身や子要素のカラー Props（`c`, `bgc`, `bdc` など）で 特定の色をハードコーディングせずに `--keycolor` 経由で参照できるようにすることができる。代表的な使用例は `u--cbox` ユーティリティクラス。
 
+`c` / `bgc` / `bdc` の値に `keycolor` を指定すると、`-c:keycolor` のような Property Class が出力される（`style` 属性ではない）。これらのクラスは `--c: var(--keycolor)` のように `--keycolor` を参照する。
+
 ```html
 <!-- ボックスにキーカラーを設定、テキストをキーカラーに連動させる例 -->
 <div class="u--cbox" style="--keycolor: var(--red)">
-  <p class="-c" style="-c:var(--keycolor)">...</p>
+  <p class="-c:keycolor">...</p>
 </div>
 ```
 ```jsx
@@ -277,6 +279,8 @@ OKLCH で定義されたカラーパレット。`--L`（明度）と `--C`（彩
 
 - `c`, `bgc` 等のカラー系 Props では、セマンティックカラー → パレットカラーの順で検索される
 - どちらも最終的に `var(--{name})` に変換される
+- `main.css` でクラス化されるのは厳選したセマンティックカラーと `keycolor` のみ（`-c:brand` / `-c:keycolor` など）。それ以外のカラートークン（`red` などのパレットカラー）は `style` 属性の CSS 変数として出力される
+- `full.css` + `isFullMode` では、`c` / `bgc` / `bdc` の全カラートークンがクラス化される（`-bgc:red` など）
 
 
 ## トークン値の命名規則

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

@@ -2,12 +2,9 @@
 
 要素の左右に、サイト共通の gutter（余白）を適用する Trait クラス。`padding` 系ユーティリティとは別に、「サイト全体で統一した左右余白」を確保したい時に使う。
 
-## 基本情報
-
-- クラス名: `has--gutter`
 - Lism props: `hasGutter`（`<Lism hasGutter>` 等）
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/trait/has/_gutter.scss
-- 公式ドキュメント: https://lism-css.com/docs/trait-class.md#has--gutter
+
+公式ドキュメント（使い方・コード例）: https://lism-css.com/docs/trait-class.md#has--gutter
 
 ## SCSS 定義
 
@@ -26,38 +23,13 @@
 ## CSS 変数
 
 | 変数 | 役割 | デフォルト |
-|------|------|-----------|
+| --- | --- | --- |
 | `--gutter--base` | サイト全体のガター基準値（`:root` 定義） | `var(--s30)` |
 | `--gutter` | `.has--gutter` 要素ローカルの機能変数 | `var(--gutter--base)` |
 
 - サイト全体の基準を変えたい場合は `:root` 等で `--gutter--base` を上書きする
 - 個別要素のみガター量を変えたい場合は、その要素で `style="--gutter: 20px"` のように `--gutter` を直接上書きする
 
-## Usage
-
-```html
-<div class="has--gutter">
-  <p>Lorem ipsum content...</p>
-  <p>Lorem ipsum content...</p>
-</div>
-
-<!-- 個別要素でガター量を上書きする例 -->
-<div class="has--gutter" style="--gutter: 20px">
-  <p>Lorem ipsum content...</p>
-</div>
-```
-```jsx
-<Lism hasGutter>
-  <p>Lorem ipsum content...</p>
-  <p>Lorem ipsum content...</p>
-</Lism>
-
-{/* 個別要素でガター量を上書きする例 */}
-<Lism hasGutter style={{ '--gutter': '20px' }}>
-  <p>Lorem ipsum content...</p>
-</Lism>
-```
-
 ## 関連
 
 - `-px:*` プロパティクラス — その要素ごとに任意の左右 padding を付けたい場合はこちら

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

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

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

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