@lism-css/mcp 0.22.0 → 0.24.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"`）で意味付けし、サイト領域には`z--*`、ページ固有の領域には`p--*`を付ける（[`css-rules.md`](../css-rules.md#独自プレフィックス)）。
+- 「全幅の背景＋中央寄せの本文幅」は、外殻`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="z--header" 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="p--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="z--footer" 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="p--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,73 @@
+# 検証の分離（`.lism/`規約と評価サブエージェント）
+
+提出前チェックの実行を実装担当の本人から分離し、実装プランと評価結果をユーザーが後から確認できるファイルとして残すための規約です。実装フロー・チェック項目の正本は`SKILL.md`（実装フロー・提出前セルフチェック）、実装プランの中身と書式は[`authoring.md`](./authoring.md)を参照してください。
+
+## `.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 | 違反ルール（資料名と節） | 内容 | 判定 |
+| --- | --- | --- | --- |
+
+判定は「違反 / 要確認 / 適合」。最後に違反件数のサマリを書いてください。
+```
+
+### 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)
 
 ---
 
@@ -19,16 +19,35 @@ Lism CSS は**コンテナクエリ**をデフォルトで採用しています
 ```
 Smartphone ──┬── Tablet (Portrait) ──┬── Tablet (Landscape) ──┬── Laptop and up
              │                       │                        │
-          sm:480px                md:800px               (lg:1120px)
+          sm:480px                md:800px               lg:1120px
 ```
 
 | BP | 値 | 効くタイミング |
-|----|-----|----------------|
+| --- | --- | --- |
+| `xs` | 0（無効） | （opt-in） |
 | `sm` | 480px | sm 以上 |
 | `md` | 800px | md 以上 |
-| (`lg`) | 1120px | lg 以上 |
+| `lg` | 1120px | lg 以上 |
+| `xl` | 0（無効） | （opt-in） |
 
-**レスポンシブ対応の Property Class は、基本的に標準では `sm` / `md` まで対応。** ただし `d`（display）/ `g`（gap）/ `cols` / グリッド系（`gta` `gtc` `gtr` `ga` `gc` `gr`）など、大枠のレイアウト構造に関わる一部のプロパティは `lg` まで対応。それ以外のプロパティで `lg` 以降を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+**レスポンシブ対応の Property Class は、標準で `sm` / `md` / `lg` のすべてに対応。** どの Prop がレスポンシブ対応かは property-class.md の BP 列を参照。レスポンシブ非対応の Prop でブレイクポイント指定を使う場合は customize.md 参照の SCSS カスタマイズが必要です。
+
+**`xs` / `xl` は opt-in**:
+- デフォルト値は `0`（無効）で、CSS は出力されません。`lism.config.js` の `breakpoints` でサイズを与えると有効化されます（customize.md 参照）。
+- 型（Lism コンポーネント）でも `sm` / `md` / `lg` のみがデフォルトで補完・許可されます。`xs` / `xl` を使う場合は `declare module 'lism-css'` で `BreakpointRegistry` を拡張して解禁します。
+
+  ```ts
+  // src/lism.d.ts など
+  import 'lism-css';
+  declare module 'lism-css' {
+    interface BreakpointRegistry {
+      xl: true; // 配列の 5 要素目 [..., xl] と { xl: ... } を解禁
+      xs: true; // { xs: ... } を解禁（xs は配列記法では書けない）
+    }
+  }
+  ```
+
+- `xs` は配列記法では書けません（配列のインデックス → BP の対応が `[base, sm, md, lg, xl]` で固定のため）。オブジェクト記法（`{ xs: ... }`）でのみ指定します。`xl` は配列記法・オブジェクト記法の両方で利用できます。
 
 例: `-d:none -d_sm:block` → デフォルト非表示、`sm` 以上で表示。
 
@@ -80,29 +99,17 @@ 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 コンポーネントでの指定
 
 配列形式またはオブジェクト形式でレスポンシブ値を指定します。
 
 ```jsx
-// 配列形式: [デフォルト, sm, md]
+// 配列形式: 位置は [base, sm, md, lg, xl] で固定（xs は配列記法では書けない）
 <Box p={[20, 30, 40]} fz={['s', 'm', 'l']} />
 
-// オブジェクト形式
+// オブジェクト形式（xs を使う場合はこちら）
 <Box p={{ base: '20', sm: '30', md: '40' }} />
 ```
 
@@ -113,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` | [`_shadow.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_shadow.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` | [`_space.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/tokens/_space.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

@@ -10,7 +10,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 - [トークン概要テーブル](#トークン概要テーブル)
 - [余白 (space)](#余白-space)
 - [フォントサイズ (fz)](#フォントサイズ-fz)
-- [行間 (lh/hl)](#行間-lhhl)
+- [行間 (hl/lh)](#行間-hllh)
 - [字間 (lts)](#字間-lts)
 - [フォント (ff)](#フォント-ff)
 - [ウェイト (fw)](#ウェイト-fw)
@@ -29,20 +29,20 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## トークン概要テーブル
 
 | カテゴリ | トークン値 | CSS変数パターン | 例 |
-|---|---|---|---|
+| --- | --- | --- | --- |
 | 余白 (space) | `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80` | `--s{N}` | `--s20` |
-| フォントサイズ (fz) | `root`, `base`, `2xs`, `xs`, `s`, `m`, `l`, `xl`, `2xl`, `3xl`, `4xl`, `5xl` | `--fz--{key}` | `--fz--l` |
-| ハーフレディング・行間 (lh/hl) | `base`, `xs`, `s`, `l` | `--hl--{key}` | `--hl--s` |
+| フォントサイズ (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` |
 | 字間 (lts) | `base`, `s`, `l`, `xl` | `--lts--{key}` | `--lts--s` |
 | フォント (ff) | `base`, `accent`, `mono` | `--ff--{key}` | `--ff--mono` |
 | ウェイト (fw) | `light`, `normal`, `bold` | `--fw--{key}` | `--fw--bold` |
 | 透明度 (o) | `mp`, `p`, `pp`, `ppp` | `--o--{key}` | `--o--p` |
 | 角丸 (bdrs) | `10`, `20`, `30`, `40`, `99`, `inner` | `--bdrs--{key}` | `--bdrs--20` |
 | 影 (bxsh) | `10`, `20`, `30`, `40`, `50` | `--bxsh--{N}` | `--bxsh--20` |
-| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl`, `bleed` | `--sz--{key}` | `--sz--l` |
+| サイズ (sz) | `xs`, `s`, `m`, `l`, `xl` | `--sz--{key}` | `--sz--l` |
 | アスペクト比 (ar) | `og` | `--ar--{key}` | `--ar--og` |
 | フロー余白 (flow) | `base`, `s` | `--flow--{key}` | `--flow--base` |
-| セマンティックカラー (c) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
+| セマンティックカラー (color) | `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral` | `--{name}` | `--brand` |
 | パレットカラー (palette) | `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black` | `--{name}` | `--red` |
 
 
@@ -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)） |
@@ -103,17 +103,16 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--fz--xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 2))` | XS（mol/(mol+2)） |
 | `--fz--2xs` | `calc(1em * var(--fz-mol) / (var(--fz-mol) + 3))` | 最小（mol/(mol+3)） |
 | `--fz--base` | `1rem` | 本文の基本フォントサイズ |
-| `--fz--root` | — | `:root` のフォントサイズ |
 
 `--fz-mol` を上書きすることでスケール全体を調整可能（7以上の値に対応）。
 
 
-## 行間 (lh/hl)
+## 行間 (hl/lh)
 
 ハーフレディングの大きさ。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） |
@@ -123,7 +122,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## 字間 (lts)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--lts--base` | `normal` | 基本の文字間隔 |
 | `--lts--s` | `-0.025em` | 狭めの文字間隔 |
 | `--lts--l` | `0.05em` | 広めの文字間隔 |
@@ -133,16 +132,16 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## フォント (ff)
 
 | CSS変数 | 値 |
-|---------|-----|
-| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif, 'Segoe UI Emoji'` |
-| `--ff--accent` | `'Garamond', 'Baskerville', 'Times New Roman', serif` |
+| --- | --- |
+| `--ff--base` | `-apple-system, 'BlinkMacSystemFont', 'Hiragino Sans', sans-serif` |
+| `--ff--accent` | `Georgia, serif` |
 | `--ff--mono` | `ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace` |
 
 
 ## ウェイト (fw)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--fw--light` | `300` | 細め |
 | `--fw--normal` | `400` | 標準 |
 | `--fw--bold` | `600` | 太字（Hiragino Sans W6 相当） |
@@ -155,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 等 |
@@ -165,7 +164,7 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 ## 角丸 (bdrs)
 
 | CSS変数 | 値 | 説明 |
-|---------|-----|------|
+| --- | --- | --- |
 | `--bdrs--10` | `0.25rem` | ≒ 4px |
 | `--bdrs--20` | `0.5rem` | ≒ 8px |
 | `--bdrs--30` | `1rem` | ≒ 16px |
@@ -179,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)` |
@@ -187,8 +186,9 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 | `--bxsh--50` | `var(--shsz--50) var(--shc)` |
 
 | CSS変数 | 初期値 |
-|---------|-----|
-| `--shc` | `hsl(220 4% 8% / 15%)` |
+| --- | --- |
+| `--shadow` | `hsl(220 4% 8% / 12%)` |
+| `--shc` | `var(--shadow)` |
 | `--shsz--10` | `0px 1px 3px` |
 | `--shsz--20` | `0px 2px 6px` |
 | `--shsz--30` | `0px 4px 12px` |
@@ -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,12 +229,12 @@ CSSコードを書く場合やコンポーネントのPropsに値を指定する
 サイト全体のカラー設計に使用するトークン。
 
 | CSS変数 | デフォルト値 | 説明 |
-|---------|------------|------|
-| `--base` | `hsl(224 4% 99%)` | ベース背景色 |
-| `--base-2` | `hsl(224 8% 95%)` | 代替背景色 |
-| `--text` | `hsl(224 4% 8%)` | 基本テキスト色 |
-| `--text-2` | `hsl(224 6% 32%)` | 補助テキスト色 |
-| `--divider` | `hsl(224 8% 88%)` | 区切り線色 |
+| --- | --- | --- |
+| `--base` | `hsl(220 0% 99%)` | ベース背景色 |
+| `--base-2` | `hsl(220 4% 95%)` | 代替背景色 |
+| `--text` | `hsl(220 0% 8%)` | 基本テキスト色 |
+| `--text-2` | `hsl(220 4% 32%)` | 補助テキスト色 |
+| `--divider` | `hsl(220 4% 88%)` | 区切り線色 |
 | `--link` | `oklch(50% 0.3 240)` | リンク色 |
 | `--brand` | `#1e5f8c` | ブランド色 |
 | `--accent` | `#d94a6a` | アクセント色 |
@@ -245,11 +245,11 @@ 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)` |
-| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.01) 152)` |
+| `--green` | `oklch(calc(var(--L) + 4%) calc(var(--C) - 0.02) 152)` |
 | `--blue` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 264)` |
 | `--purple` | `oklch(calc(var(--L) - 4%) calc(var(--C) + 0.01) 288)` |
 | `--pink` | `oklch(calc(var(--L) + 2%) calc(var(--C) + 0.01) 352)` |

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` — アスペクト比制御。マスク画像をフィットさせるラッパーとして併用することが多い