@lism-css/mcp 0.22.0 → 0.24.0

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

@@ -7,12 +7,10 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 - [基本書式](#基本書式)
   - [プリセット外の値をクラス化する（`:value` 記法、Lism Props 限定）](#プリセット外の値をクラス化するvalue-記法lism-props-限定)
-- [表の読み方](#表の読み方)
-- [全 Prop 一覧](#全-prop-一覧)
+- [Prop早見リスト](#prop早見リスト)
 - [特殊な Property Class](#特殊な-property-class)
   - [ボーダー（`bd` 系）](#ボーダーbd-系)
   - [ホバー（`hov` 系）](#ホバーhov-系)
-  - [その他](#その他)
 - [値の省略形（例外一覧）](#値の省略形例外一覧)
 - [Property Class の特殊な出力タイプ](#property-class-の特殊な出力タイプ)
 - [Property Class の検索・一括修正](#property-class-の検索一括修正)
@@ -21,6 +19,7 @@ CSS Layer の外（最も高い詳細度）に配置され、`-{prop}(:{value})`
 
 個別ドキュメント:
 
+- [property-class/all-props.md](./property-class/all-props.md) — 全 Prop 一覧（プリセット値クラス・BP対応の詳細表）
 - [property-class/bd.md](./property-class/bd.md) — ボーダー（`-bd` / `-bd-{side}` 系）
 - [property-class/hov.md](./property-class/hov.md) — ホバー（`-hov:*` 系）
 - [property-class/max-sz.md](./property-class/max-sz.md) — 最大幅（`-max-sz:full` / `-max-sz:bleed` 等）
@@ -57,237 +56,29 @@ Lism コンポーネントの Propsに渡す値の頭に `:` を付けると、
 // → <p class="-lts:2xl">...</Text>
 ```
 
-
-## 表の読み方
-
-| カラム | 説明 |
-|--------|------|
-| **Prop** | クラス名に使う省略名（例: `-fz:l` の `fz` 部分）。Lism コンポーネントの Props 名でもある |
-| **CSS プロパティ** | 実際に制御される CSS プロパティ |
-| **プリセット値クラス** | そのまま使えるクラス名の一覧（`-{prop}:{value}` 形式）。`—` はカスタム値のみ対応 |
-| **BP** | ブレークポイント対応クラス（`-{prop}_{bp}` 形式）のサポート状況。`✔` は `sm`・`md`、`✔ lg` は `lg` まで対応、`—` は非対応 |
-
-
-## 全 Prop 一覧
-
-ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
-
-### タイポグラフィ
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `f` | `font` | `-f:inherit` | — |
-| `fz` | `font-size` | `-fz:root`, `-fz:base`, `-fz:5xl`〜`-fz:2xs` | ✔ |
-| `fw` | `font-weight` | `-fw:light`, `-fw:normal`, `-fw:bold`, `-fw:100`〜`-fw:900` | — |
-| `ff` | `font-family` | `-ff:base`, `-ff:accent`, `-ff:mono` | — |
-| `fs` | `font-style` | `-fs:italic` | — |
-| `lh` | `line-height`（`--hl` 経由） | `-lh:base`, `-lh:xs`, `-lh:s`, `-lh:l`, `-lh:1` | — |
-| `hl` | `--hl` 変数のみ | — | — |
-| `lts` | `letter-spacing` | `-lts:base`, `-lts:s`, `-lts:l`, `-lts:xl` | — |
-| `ta` | `text-align` | `-ta:center`, `-ta:left`, `-ta:right` | — |
-| `td` | `text-decoration` | `-td:none` | — |
-| `tt` | `text-transform` | `-tt:upper`, `-tt:lower` | — |
-
-**注意:** `lh` は `--hl`（half-leading）変数を介して `line-height: calc(1em + var(--hl) * 2)` を制御します。`hl` は `--hl` 変数を直接セットするだけの isVar タイプです。
-
-### 表示・可視性
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `d` | `display` | `-d:none`, `-d:block`, `-d:flex`, `-d:inline-flex`, `-d:grid`, `-d:inline-grid`, `-d:inline`, `-d:inline-block` | ✔ lg |
-| `o` | `opacity` | `-o:0`, `-o:mp`, `-o:p`, `-o:pp`, `-o:ppp` | — |
-| `v` | `visibility` | `-v:hidden` | — |
-| `ov` | `overflow` | `-ov:hidden`, `-ov:auto`, `-ov:clip` | — |
-| `ov-x` | `overflow-x` | `-ov-x:clip`, `-ov-x:auto`, `-ov-x:scroll` | — |
-| `ov-y` | `overflow-y` | `-ov-y:clip`, `-ov-y:auto`, `-ov-y:scroll` | — |
-| `ar` | `aspect-ratio` | `-ar:21/9`, `-ar:16/9`, `-ar:3/2`, `-ar:1/1`, `-ar:og` | ✔ |
-
-### サイズ
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `w` | `width` | `-w:100%`, `-w:fit` | ✔ |
-| `h` | `height` | `-h:100%`, `-h:fit` | ✔ |
-| `min-w` | `min-width` | `-min-w:100%` | ✔ |
-| `max-w` | `max-width` | `-max-w:100%` | ✔ |
-| `min-h` | `min-height` | `-min-h:100%` | ✔ |
-| `max-h` | `max-height` | `-max-h:100%` | ✔ |
-| `sz` | `inline-size` | — | — |
-| `min-sz` | `min-inline-size` | — | — |
-| `max-sz` | `max-inline-size` | `-max-sz:xs`, `-max-sz:s`, `-max-sz:m`, `-max-sz:l`, `-max-sz:xl`, `-max-sz:full`, `-max-sz:bleed` | — |
-| `bsz` | `block-size` | — | — |
-| `min-bsz` | `min-block-size` | — | — |
-| `max-bsz` | `max-block-size` | — | — |
-| `contentSize` | `--contentSize` 変数のみ | `-contentSize:s`, `-contentSize:m`, `-contentSize:l`, `-contentSize:xl` | — |
-
-**`max-sz` の特殊クラス:**
-- `-max-sz:full` — `has--gutter` 内では gutter 分を含めた全幅に拡張
-- `-max-sz:bleed` — 最外側の `is--container` 幅まで広がる（`margin-inline` で中央配置、`is--container` 祖先がなければ `100svi` まで広がる）
-
-→ 詳細は [property-class/max-sz.md](./property-class/max-sz.md) 参照
-
-**`contentSize` について:**
-`--contentSize` 変数をセットする isVar タイプの Prop です。`is--wrapper` と組み合わせるとコンテンツ幅の上限となり、`set--bleed` と組み合わせると `--bleed` の計算基準値として使われます。
-プリセット値（`s`, `m`, `l`, `xl`）は `-contentSize:{value}` クラスを出力し、それ以外の任意値は `--contentSize: {value}` をスタイル属性として出力します。
-
-### 背景
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `bg` | `background` | — | — |
-| `bgi` | `background-image` | — | — |
-| `bgr` | `background-repeat` | `-bgr:no-repeat` | — |
-| `bgp` | `background-position` | `-bgp:center` | — |
-| `bgsz` | `background-size` | `-bgsz:cover`, `-bgsz:contain` | — |
-| `bgc` | `background-color` | `-bgc:base`, `-bgc:base-2`, `-bgc:text`, `-bgc:brand`, `-bgc:accent`, `-bgc:inherit`, `-bgc:transparent` | — |
-
-### カラー
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `c` | `color` | `-c:base`, `-c:text`, `-c:text-2`, `-c:brand`, `-c:accent`, `-c:inherit` | — |
-| `keycolor` | `--keycolor` 変数のみ | — | — |
-
-セマンティックカラー: `base`, `base-2`, `text`, `text-2`, `divider`, `link`, `brand`, `accent`, `neutral`<br />
-パレットカラー: `red`, `blue`, `green`, `yellow`, `purple`, `orange`, `pink`, `gray`, `white`, `black`  
-キーカラー変数: `keycolor`（ユーザー定義の `--keycolor` を参照する独立変数。詳細は `tokens.md` を参照）
-
-### 角丸
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `bdrs` | `border-radius` | `-bdrs:0`, `-bdrs:10`, `-bdrs:20`, `-bdrs:30`, `-bdrs:40`, `-bdrs:99`, `-bdrs:inner` | ✔ |
-| `bdrs-tl` | `border-top-left-radius` | — | — |
-| `bdrs-tr` | `border-top-right-radius` | — | — |
-| `bdrs-br` | `border-bottom-right-radius` | — | — |
-| `bdrs-bl` | `border-bottom-left-radius` | — | — |
-| `bdrs-ss` | `border-start-start-radius` | — | — |
-| `bdrs-se` | `border-start-end-radius` | — | — |
-| `bdrs-es` | `border-end-start-radius` | — | — |
-| `bdrs-ee` | `border-end-end-radius` | — | — |
-
-### 影
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `bxsh` | `box-shadow` | `-bxsh:0`, `-bxsh:10`, `-bxsh:20`, `-bxsh:30`, `-bxsh:40`, `-bxsh:50` | ✔ |
-
-**補足:** 影色（`--shc`）を要素内で上書きして再計算させたい場合は、`set--bxsh` クラスを併用する。
-
-### ポジション
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `pos` | `position` | `-pos:static`, `-pos:fixed`, `-pos:sticky`, `-pos:relative`, `-pos:absolute` | ✔ |
-| `z` | `z-index` | `-z:-1`, `-z:0`, `-z:1`, `-z:99` | — |
-| `t` | `top` | `-t:0`, `-t:50%`, `-t:100%` | — |
-| `l` | `left` | `-l:0`, `-l:50%`, `-l:100%` | — |
-| `r` | `right` | `-r:0`, `-r:50%`, `-r:100%` | — |
-| `b` | `bottom` | `-b:0`, `-b:50%`, `-b:100%` | — |
-| `i` | `inset` | `-i:0` | — |
-| `i-x` | `inset-inline` | — | — |
-| `i-y` | `inset-block` | — | — |
-| `i-s` | `inset-inline-start` | — | — |
-| `i-e` | `inset-inline-end` | — | — |
-| `i-bs` | `inset-block-start` | — | — |
-| `i-be` | `inset-block-end` | — | — |
-
-### 余白 — Padding
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `p` | `padding` | `-p:0`, `-p:5`, `-p:10`, `-p:20`, ... (SPACEトークン) | ✔ |
-| `px` | `padding-inline` | `-px:0`, `-px:5`, `-px:10`, `-px:20`, ... (SPACEトークン) | ✔ |
-| `py` | `padding-block` | `-py:0`, `-py:5`, `-py:10`, `-py:20`, ... (SPACEトークン) | ✔ |
-| `ps` | `padding-inline-start` | — | ✔ |
-| `pe` | `padding-inline-end` | — | ✔ |
-| `pbs` | `padding-block-start` | — | ✔ |
-| `pbe` | `padding-block-end` | — | ✔ |
-| `pl` | `padding-left` | — | — |
-| `pr` | `padding-right` | — | — |
-| `pt` | `padding-top` | — | — |
-| `pb` | `padding-bottom` | — | — |
-
-SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `50`, `60`, `70`, `80`
-
-### 余白 — Margin
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `m` | `margin` | `-m:auto`, `-m:0`, `-m:5`, `-m:10`, `-m:20`, ... (SPACEトークン) | ✔ |
-| `mx` | `margin-inline` | `-mx:auto`, `-mx:0`, `-mx:5`, `-mx:10`, `-mx:20`, ... (SPACEトークン) | ✔ |
-| `my` | `margin-block` | `-my:auto`, `-my:0`, `-my:5`, `-my:10`, `-my:20`, ... (SPACEトークン) | ✔ |
-| `ms` | `margin-inline-start` | `-ms:auto` | ✔ |
-| `me` | `margin-inline-end` | `-me:auto` | ✔ |
-| `mbs` | `margin-block-start` | `-mbs:auto`, `-mbs:0`, `-mbs:5`, `-mbs:10`, `-mbs:20`, ... (SPACEトークン) | ✔ |
-| `mbe` | `margin-block-end` | `-mbe:auto` | ✔ |
-| `ml` | `margin-left` | — | — |
-| `mr` | `margin-right` | — | — |
-| `mt` | `margin-top` | — | — |
-| `mb` | `margin-bottom` | — | — |
-
-### Gap
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `g` | `gap` | `-g:0`, `-g:inherit`, `-g:5`, `-g:10`, `-g:20`, ... (SPACEトークン) | ✔ lg |
-| `cg` | `column-gap` | — | — |
-| `rg` | `row-gap` | — | — |
-
-### Flex
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `fxf` | `flex-flow` | — | — |
-| `fxw` | `flex-wrap` | `-fxw:wrap` | ✔ |
-| `fxd` | `flex-direction` | `-fxd:column`, `-fxd:column-reverse`, `-fxd:row-reverse` | ✔ |
-| `fx` | `flex` | `-fx:1` | ✔ |
-| `fxg` | `flex-grow` | `-fxg:1` | — |
-| `fxsh` | `flex-shrink` | `-fxsh:0` | — |
-| `fxb` | `flex-basis` | — | ✔ |
-
-### Grid
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `gt` | `grid-template` | — | ✔ |
-| `gta` | `grid-template-areas` | — | ✔ lg |
-| `gtc` | `grid-template-columns` | `-gtc:subgrid` | ✔ lg |
-| `gtr` | `grid-template-rows` | `-gtr:subgrid` | ✔ lg |
-| `gaf` | `grid-auto-flow` | `-gaf:row`, `-gaf:column` | ✔ |
-| `gac` | `grid-auto-columns` | — | — |
-| `gar` | `grid-auto-rows` | — | — |
-| `cols` | `--cols` 変数 | — | ✔ lg |
-| `rows` | `--rows` 変数 | — | ✔ |
-
-### Grid アイテム
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `ga` | `grid-area` | `-ga:1/1` | ✔ lg |
-| `gc` | `grid-column` | `-gc:1/-1` | ✔ lg |
-| `gr` | `grid-row` | `-gr:1/-1` | ✔ lg |
-| `gcs` | `grid-column-start` | — | — |
-| `gce` | `grid-column-end` | — | — |
-| `grs` | `grid-row-start` | — | — |
-| `gre` | `grid-row-end` | — | — |
-
-### 配置（Places）
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `ai` | `align-items` | `-ai:start`, `-ai:center`, `-ai:end`, `-ai:stretch`, `-ai:flex-start`, `-ai:flex-end` | ✔ |
-| `ac` | `align-content` | `-ac:start`, `-ac:center`, `-ac:end`, `-ac:flex-start`, `-ac:flex-end`, `-ac:between` | ✔ |
-| `ji` | `justify-items` | `-ji:start`, `-ji:center`, `-ji:end`, `-ji:stretch`, `-ji:flex-start`, `-ji:flex-end` | ✔ |
-| `jc` | `justify-content` | `-jc:start`, `-jc:center`, `-jc:end`, `-jc:flex-start`, `-jc:flex-end`, `-jc:between` | ✔ |
-| `pi` | `place-items` | `-pi:start`, `-pi:center`, `-pi:end` | — |
-| `pc` | `place-content` | `-pc:start`, `-pc:center`, `-pc:end` | — |
-| `aslf` | `align-self` | `-aslf:start`, `-aslf:center`, `-aslf:end`, `-aslf:stretch` | — |
-| `jslf` | `justify-self` | `-jslf:start`, `-jslf:center`, `-jslf:end`, `-jslf:stretch` | — |
-| `pslf` | `place-self` | `-pslf:start`, `-pslf:center`, `-pslf:end` | — |
-| `order` | `order` | `-order:0`, `-order:-1`, `-order:1` | ✔ |
-
-**コンポーネント用ショートハンド:** `ai`, `ac`, `ji`, `jc`, `aslf`, `jslf` では `s`→`start`, `e`→`end`, `c`→`center`, `fs`→`flex-start`, `fe`→`flex-end` のショートハンドが使えます。
+## Prop早見リスト
+
+「このCSSプロパティにPropがあるか」の存在確認用の一覧です。プリセット値クラス・BP対応・特殊出力の詳細は[property-class/all-props.md](./property-class/all-props.md)を必ず参照してください。
+
+- タイポグラフィ: `f` `fz` `fw` `ff` `fs` `hl` `lh` `lts` `ta` `td` `tt`
+- 表示・可視性: `d` `o` `v` `ov` `ov-x` `ov-y` `ar`
+- サイズ: `w` `h` `min-w` `max-w` `min-h` `max-h` `sz` `min-sz` `max-sz` `bsz` `min-bsz` `max-bsz` `contentSize`
+- 背景: `bg` `bgi` `bgr` `bgp` `bgsz` `bgc`
+- カラー: `c` `keycolor`
+- 角丸: `bdrs` `bdrs-{tl|tr|br|bl|ss|se|es|ee}`
+- 影: `bxsh`
+- ポジション: `pos` `z` `t` `l` `r` `b` `i` `i-{x|y|s|e|bs|be}`
+- Padding: `p` `px` `py` `ps` `pe` `pbs` `pbe` `pl` `pr` `pt` `pb`
+- Margin: `m` `mx` `my` `ms` `me` `mbs` `mbe` `ml` `mr` `mt` `mb`
+- Gap: `g` `cg` `rg`
+- Flex: `fxf` `fxw` `fxd` `fx` `fxg` `fxsh` `fxb`
+- Grid: `gt` `gta` `gtc` `gtr` `gaf` `gac` `gar` `cols` `rows` / アイテム側: `ga` `gc` `gr` `gcs` `gce` `grs` `gre`
+- 配置: `ai` `ac` `ji` `jc` `pi` `pc` `aslf` `jslf` `pslf` `order`
+- ボーダー: `bd` `bd-{side}` `bds` `bdc` `bdw`（特殊仕様→下記「ボーダー（bd系）」）
+- ホバー: `hov`（特殊仕様→下記「ホバー（hov系）」）
+- その他: `ovw` `whs` `float` `clear` `iso` `wm`
+
+`padding`/`margin`/`gap`/`font-*`/`color`/`background`/`border-radius`/`width`/`height`/`text-align`など上記にあるプロパティの宣言は、カスタムCSSに書く前にProps/Property Classへ移せないか確認します（擬似要素・子孫セレクタ・状態切替を伴う場合のみCSSに残す）。
 
 ## 特殊な Property Class
 
@@ -298,7 +89,7 @@ SPACEトークン（全値）: `5`, `10`, `15`, `20`, `25`, `30`, `35`, `40`, `5
 Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理される特殊仕様。`-bd` または `-bd-{side}` を付けると初期値（`solid` / `1px` / `var(--divider)`）がセットされ、`bds` / `bdc` / `bdw` Prop で上書きする。
 
 | Prop | CSS プロパティ / 変数 | 主なクラス |
-|------|-----------------------|------------|
+| --- | --- | --- |
 | `bd` | `border`（変数管理を有効化） | `-bd`, `-bd-{x\|y\|s\|e\|bs\|be\|t\|b\|l\|r}`, `-bd:none` |
 | `bds` | `--bds` | `-bds:dashed`, `-bds:dotted`, `-bds:double` |
 | `bdc` | `--bdc` | `-bdc:brand`, `-bdc:accent`, `-bdc:divider`, `-bdc:inherit`, `-bdc:transparent`, `-bdc:current` |
@@ -311,7 +102,7 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 ホバーエフェクト用のクラス群。以下の 3 形式がある。
 
 | 形式 | 役割 | 動作条件 |
-|------|------|---------|
+| --- | --- | --- |
 | `-hov:-{prop}` | `--hov-{prop}` 変数で hover 時の値を変化させる | `:hover`（`@media (any-hover: hover)` 内） |
 | `-hov:{preset}` | hover 時のスタイルをプリセットで適用 | `:hover`（同上） |
 | `-hov:in:{preset}` | 親の `set--hov` を起点に子のスタイルを変化させる | 親に `set--hov` が必要 |
@@ -322,24 +113,13 @@ Lism CSS のボーダーは CSS 変数（`--bds` / `--bdw` / `--bdc`）で管理
 
 → 詳細は [property-class/hov.md](./property-class/hov.md) 参照
 
-## その他
-
-| Prop | CSS プロパティ | プリセット値クラス | BP |
-|------|--------------|-------------|-----|
-| `ovw` | `overflow-wrap` | `-ovw:anywhere` | — |
-| `whs` | `white-space` | `-whs:nowrap` | — |
-| `float` | `float` | `-float:left`, `-float:right` | — |
-| `clear` | `clear` | `-clear:both` | — |
-| `iso` | `isolation` | `-iso:isolate` | — |
-| `wm` | `writing-mode` | `-wm:vertical-rl` | ✔ |
-
 
 ## 値の省略形（例外一覧）
 
 Property Class の値名は基本的に CSS の実値と同じですが、以下は省略形が使われます。
 
 | クラス例 | 実際の CSS 値 | 対象 Prop |
-|----------|------------|-----------|
+| --- | --- | --- |
 | `-tt:upper` | `text-transform: uppercase` | `tt` |
 | `-tt:lower` | `text-transform: lowercase` | `tt` |
 | `-w:fit` | `width: fit-content` | `w`, `h` |
@@ -368,13 +148,15 @@ Property Class の値名は基本的に CSS の実値と同じですが、以下
 }
 ```
 
+対象プロパティは、ソースの [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) で `alwaysVar: 1` がセットされているものです。
+
 
 ## Property Class の検索・一括修正
 
 Property Class をコードベース全体で一括修正する場合、同じ Prop が**複数の書式**で出現するため、以下のパターンをすべて検索する必要があります。
 
 | 出現場所 | 検索パターン例（`p` の場合） |
-|---------|--------------------------|
+| --- | --- |
 | HTML / className — プリセット値 | `-p:20` |
 | HTML / className — BP対応・カスタム値 | `-p` / `-p_sm` / `-p_md` |
 | JSX Props | `p="20"` / `p={20}` / `p={[20, 30]}` |

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

@@ -0,0 +1,246 @@
+# 実装プランの作り方（C0–C8詳細・出力フォーマット）
+
+Lism CSSで新規UI・セクション・コンポーネントを書く前に作る「実装プラン」の詳細編です。実装フローの全体像・資料確認トリガー表・判定記号は`SKILL.md`を正本とします。ここでは各チェック項目（C0–C8）の詳細とプランの出力フォーマットをまとめます。
+
+判定記号（✅/🔁/⏸、`✅新規`・`✅例外`の注記を含む）の定義は`SKILL.md`の「判定記号」を参照してください。
+
+## 資料確認
+
+どの操作の手前で何を読むかは`SKILL.md`の「資料確認トリガー」を正本とする。
+
+### 初期確認（C0前に実行）
+
+新規UI/コンポーネント/セクション、またはスクショ/Figma等のデザイン再現では、C0に入る前に対象へ明らかに関係する最小限の詳細ファイルを実際に開く。
+
+実装プランの先頭に「初期確認した資料」を必ず出す。
+
+```md
+初期確認した資料: primitives/l--stack.md, primitives/l--columns.md, tokens.md
+```
+
+新規UI/コンポーネント/セクションで初期確認した資料が空のまま実装に入ってはいけない。「必要なら参照」とだけ書くのも不可。軽微な既存パターン内の修正で既存コード確認のみで足りる場合は、その旨を明記する。
+
+### 資料確認の記録
+
+読んだ資料は「初期確認」「実装中」を区別して資料確認ログに記録する。提出前に、🔁が✅または⏸へ解消されたかを照合する。
+
+## C0–C8 実装前チェック詳細
+
+各Cは「列挙/照合・判定/決め方/参照先/よい例・避けたい例」の観点で判断します。
+
+### C0: 入力整理
+
+- **列挙**: 対象（ページ/セクション/部品）、粒度、フレームワーク（React/Astro/素のHTML）、既存制約（命名・レイヤー・公開クラス・CMS・外部JS・E2E）、デザイン入力の種類（画像のみ/詳細なデザインデータ/既存実装の途中作業）、不明点。
+- **照合・判定**: baseの値が読めない、状態の有無、反復数、再現度の方針など不明点は⏸。デザイン画像の書き出し倍率・想定キャンバス幅（スケール前提）は、明示するだけでなく**検証して確定する**: 画像の実寸を確認し（コマンドが使える環境では`sips`・`identify`等で実測、使えない環境では行送り・ボタン高さなど複数箇所の整合チェック）、判定根拠を実装プランに記載する。デザイン内の全寸法がこのスケール前提をもとに計算されるため、未検証のままではトークン差分表全体が無効になる。
+- **決め方**: 既存コードの命名・レイヤー・実装パターンを先に確認してから方針を置く。
+- **参照先**: なし。デザイン入力と既存コードが情報源。
+- **よい例・避けたい例**: OK=「何を/どの粒度で/再利用するか」を先に宣言。罠=デザインpxからいきなり書き始める。
+
+### C1: 構造・セマンティクス選定
+
+- **列挙**: 縦並び/横並び/カラム/メディア枠/幅制御/オーバーレイ/全体リンクなどの構造、要素、heading level、landmark。
+- **照合・判定**: 標準Primitiveで組める→✅。カラム系など迷う→🔁。`@lism-css/ui`で済む→✅または🔁。使うPrimitive詳細を未読なら🔁のまま実装しない。
+- **決め方**: Layout Primitive→Trait→Atomic→UIコンポーネントの順。`<div>`+Property ClassやCSSで押し切らない。
+- **Primitive優先ガード**: `<div>`+CSSで押し切らず、`SKILL.md`の「目的別実装ガイド」で候補を先に確認する。この判断を書かずに実装しない。
+- **参照先**: `SKILL.md`の「目的別実装ガイド」、`primitive-class.md`、`primitives/l--*.md`、`trait-class.md`、`components-core.md`、`components-ui.md`、`antipatterns-layout.md#レイアウト選択ミス`。
+- **よい例・避けたい例**: OK=`<Columns cols={3}>`、`<Frame ar="16/9">`、Astroなら`import { Stack, Columns, Frame } from 'lism-css/astro'`。罠=素の`<div>`だらけ、`<div -d:grid gtc=...>`、手組みメディア枠、最外殻Wrapper。
+
+### C2: 再利用・コンポーネント境界
+
+- **列挙**: 同じ部品が3箇所以上になりそうか、値差分・slot構造があるか。
+- **照合・判定**: 3+反復見込みかつ同じ意味のUI部品として安定→`✅新規`（コンポーネント化して着手）。1〜2回・局所・一時的重複→✅そのまま。Props設計が必要→⏸。
+- **決め方**: CSSの`c--`新設でなくReact/Astroコンポーネント抽出を優先。`className`/`style`/`data-*`/ARIA/イベントハンドラの受け渡しを最初から設計する。
+- **参照先**: `components-core.md`、`components-ui.md`、`css-rules.md#component-classc--`、`property-class.md`、本ファイルの「出力フォーマット」。
+- **よい例・避けたい例**: OK=反復するTagをTagコンポーネント化。罠=Property Classの組み合わせをコピペ展開。
+
+### C3: 命名設計
+
+- **列挙**: 新設する`c--`/`z--`/`p--`名とBlock/Element/Modifier構造、`c--*` CSSを置くLayer。
+- **照合・判定**: プレフィックス後の名前が規約に合う→✅。ハイフンや`__`がある→🔁。サイト領域→`✅新規`（`z--`）。ページ固有→`✅新規`（`p--`）。公開API・CMS・外部JS・E2E依存→⏸。`.c--*` CSSがLayer外になる→🔁。
+- **決め方**: `naming.md`に従う。Block名にハイフンは使わず、Element区切りは`_`ひとつ、Modifierは`--`ふたつ。再利用UIでない領域は`z--`、ページ固有は`p--`。`c--*` CSSを書く場合は必ず`@layer lism-component {}`内に置く。
+- **参照先**: `naming.md`、`css-rules.md#component-classc--`、`css-rules.md#独自プレフィックス`、`antipatterns-layout.md#クラス名の命名ミス`。
+- **よい例・避けたい例**: OK=`c--featureCard`、`c--featureCard_body`、既存命名がアンダースコア寄せなら`c--feature_card`。罠=`c--feature-card`、`c--hero__inner`（正しくは`c--hero_inner`）、`c--feature-card__body`（正しくは`c--featureCard_body`）、サイトヘッダを`c--`にする。
+
+### C4: 状態・バリエーション設計
+
+- **列挙**: active/open/disabled/currentなどの状態、solid/outlineなどの見た目違い。
+- **照合・判定**: 状態→`✅新規`（`data-*`/ARIA）。見た目違い→`✅新規`（`c--name--variant`）。正規Traitが当たる→✅。
+- **決め方**: 状態は属性セレクタ、バリエーションはBEM Modifier。`is--`を状態/バリエーションに流用しない。
+- **参照先**: `trait-class.md`、`trait-class/is--*.md`、`antipatterns-layout.md#is---の誤用状態バリエーション`、`css-rules.md#component-classc--`。
+- **よい例・避けたい例**: OK=`data-is-active`+`[data-is-active]`、`c--tag--solid`。罠=`is--active`、`is--solid`。
+
+### C5: 値・トークン照合
+
+- **列挙**: spacing/color/fz/radius/shadow/size/lh/ltsなど、使う予定の値をすべて列挙。
+- **照合・判定**: `tokens.md`に完全一致→✅。typo・既存規約上明確な置換→🔁（`tokens.md`で正規トークンを確認して置換し✅へ）。近似丸め・任意色・ブランド色・再現度の判断→⏸。`antipatterns.md`の「直書きしてよい例外」に該当→`✅例外`。`✅例外`にできるのはこの許可リストだけで、「ユーザー指示に基づく実測値」のような例外カテゴリを自作しない。
+- **決め方**: トークン値を流用。⏸は本ファイルの「デザインデータ取り込みフロー」に従い、トークン候補と差分表を出して確認まで書かない。CSSへ書く前に、Lism Props/Property Classで表せる値かも同時に確認する。インストール済みの`lism-css`がある環境では、実CSS（`main.css`）やコンポーネント実装でトークン・クラスの実在を確認してから採用するとtypoを防げる。
+- **参照先**: `tokens.md`、`property-class.md`、`antipatterns.md#token-typo存在しない値`、`antipatterns.md#px--固定値の直書き`。
+- **よい例・避けたい例**: OK=`-fz:xs -p:10 -bgc:base-2 -bdrs:10`。罠=`padding:13px`、`bgc="secondary"`。
+
+### C6: レスポンシブ方針
+
+- **列挙**: 各値のbaseの値、切替BP（sm/md/lg）、container queryかmedia queryか、container運用なら祖先`isContainer`の有無、固定Grid化していないか。
+- **照合・判定**: baseの値あり・標準BP・必要な祖先あり→✅。base抜け・xs誤用→🔁。`$is_container_query:0`等でmedia query運用が確認できる場合は`isContainer`必須にしない→✅。固定列をレスポンシブ化するなど挙動変更→⏸。
+- **決め方**: baseの値を必ず置く。標準BPへ寄せる。同じ値の繰り返しは省略する。等幅カラムはまず`Columns cols={[1, null, 3]}`などPrimitiveのレスポンシブAPIで表せるか確認し、できない場合だけ`@container`/`@media`を自分で書く。
+- **参照先**: `responsive.md`、`trait-class/is--container.md`、`property-class.md`、`primitive-class.md#カラムレイアウト-primitive-の使い分けガイド`。
+- **よい例・避けたい例**: OK=`p={{ base: '20', md: '30' }}`+祖先`isContainer`、`<Columns cols={[1, null, 3]}>`。罠=`gtc="repeat(3,1fr)"`固定、カード列数のためだけに`@container`直書き、base抜け、container祖先なし。
+
+### C7: CSSに書くもの/Propsに移すもの
+
+- **列挙**: CSSへ書く予定の各宣言を「Property Class/Propsへ移す宣言」と「CSSにしか書けない宣言」に分ける。`c--*`のCSSに残る宣言を実装プランに明記する。
+- **照合・判定**: 1つの要素にだけ効く見た目の指定→✅マークアップへ。擬似クラス・擬似要素・状態切替・子孫セレクタ→✅CSSへ残す。下表の宣言が`.c--*` CSSに残る→🔁未通過。
+- **決め方**: `-{prop}:{value}`またはLism Propsへ移す。`.c--*`はCSSが空でも意味クラスとして残す。
+- **参照先**: `property-class.md`、`css-rules.md#component-classc--`、`antipatterns.md#property-class-で書けるのに-css-で書く`。
+- **移行表**:
+
+| CSSでの記述 | Lism Props/Property Class |
+| --- | --- |
+| `padding: var(--s40)` | `p="40"` / `-p:40` |
+| `padding-inline: var(--s50)` | `px="50"` / `-px:50` |
+| `gap: var(--s30)` | `g="30"` / `-g:30` |
+| `border-radius: var(--bdrs--20)` | `bdrs="20"` / `-bdrs:20` |
+| `font-size: var(--fz--s)` | `fz="s"` / `-fz:s` |
+| `font-weight: var(--fw--bold)` | `fw="bold"` / `-fw:bold` |
+| `color: var(--text-2)` | `c="text-2"` / `-c:text-2` |
+| `background-color: var(--base-2)` | `bgc="base-2"` / `-bgc:base-2` |
+| `display: flex` | `Flex`/`Cluster`/`Stack`/`l--flex` |
+| `flex-direction: column` | `Stack`/`l--stack` |
+
+- **よい例・避けたい例**: OK=`<span class="c--tag -fz:xs -p:10 -bgc:base-2 -bdrs:10">`。罠=単一要素の宣言を全部`.c--tag{}`に書く。
+
+### C8: 既定値の確認
+
+- **列挙**: 使うPrimitiveが既に持つ既定CSSを確認し、同値をProps/Property Classで重ねていないか。
+- **照合・判定**: 既定と同値→足さない。既定と違う意図的上書き→✅。ガイドに未整備のPrimitive既定→今後の整備対象にする。
+- **決め方**: `primitives/l--*.md`の「既定の挙動」を見る。念のための`ai="center"`/`ov="hidden"`/直下img`w/h/object-fit`を足さない。
+- **参照先**: `primitives/l--cluster.md`、`primitives/l--frame.md`、`primitive-class.md`、`components-core.md`。
+- **よい例・避けたい例**: OK=`<Cluster g="15">`、`<Frame ar="16/9"><img /></Frame>`。罠=`<Cluster fxw="wrap" ai="center">`、Frame直下imgに`-w:100%`や`object-fit`。
+
+## 出力フォーマット
+
+実装前チェックの成果物を実装プランと呼びます。各行に必ず判定記号（定義は`SKILL.md`参照）を付け、⏸が残る項目はその部分を実装しないで先にユーザー確認します。
+
+値照合付きレベルでは、実装プラン全体をチャットの返答としてではなく`.lism/plan.md`として保存します（固定名・上書き。冒頭のメタデータヘッダに日時・対象タスク・スケール前提とその判定根拠を書く）。規約は[`verification.md`](./verification.md)を参照してください。
+
+### 軽量レベル
+
+小変更では3〜5行で十分です。
+
+例:
+
+```md
+- ✅ 構造: 既存`Stack`内へ1項目追加。Primitive変更なし。
+- ✅ トークン: 既存パターンに合わせ`p="20"`/`fz="s"`を使用。
+- 🔁 hover: `property-class/hov.md`を参照し`hov={{ bgc: 'base-2' }}`で実装。
+```
+
+### 通常/値照合付きレベル
+
+#### 資料確認ログ
+
+SKILL.md以外に実際に開いたファイルや外部サイトのページurlを、「初期確認」と「実装中」に分けて列挙します。
+
+例:
+| タイミング | 種類 | 確認した資料 | 用途 |
+| --- | --- | --- | --- |
+| 初期確認 | 📄 | `primitives/l--columns.md` | カード一覧を`Columns`で組む判断 |
+| 実装中 | 📄 | `tokens.md` | デザイン値とトークン照合（トークン丸めトリガー） |
+| 実装中 | URL | `https://lism-css.com/docs/naming.md` | `c--*`命名トリガー |
+
+各行は実装プランの判断項目（特に🔁）と対応させ、提出前に🔁が✅/⏸へ解消されたかを照合します。
+
+#### 🔁判断行
+
+未読の判断項目そのものに🔁と読む資料を紐づけます。
+
+| 判断項目 | 採用案 | 読む資料 | 判定 |
+| --- | --- | --- | --- |
+| カード一覧 | `Columns cols={[1, null, 3]}` | `primitives/l--columns.md` | 🔁 |
+| hover指定 | `hov={{ bgc: 'base-2' }}` | `property-class/hov.md` | 🔁 |
+
+対応資料を読んだら、同じ判断行を✅または⏸へ更新します。提出前に🔁が残っている場合は未通過です。
+
+#### 構造表
+
+| 対象領域 | 採用Primitive・コンポーネント | 理由 | 参照先 | 判定 |
+| --- | --- | --- | --- | --- |
+| 例: カード一覧 | `Columns` | 等幅3列で、BP切替に向く | `primitive-class.md` | ✅ |
+
+#### トークン表
+
+値照合付きでは`デザイン値`と`差分`列を必須にします。
+
+| 用途 | デザイン値 | 採用トークン | 差分 | 判定 |
+| --- | --- | --- | --- | --- |
+| 余白 | `24px` | `p="30"`候補 | +6px | ⏸ |
+| 背景 | — | `bgc="base-2"` | — | ✅ |
+
+#### レスポンシブ表
+
+| 対象 | base | sm | md | lg | container祖先 | 注意 |
+| --- | --- | --- | --- | --- | --- | --- |
+| カード列数 | 1 | 2 | 3 | — | あり | `cols={[1,2,3]}` |
+
+#### 構成表（命名・CSSとPropsの分担・状態・既定値）
+
+| c--\*名 | Props・Property Classで書く | CSSに残す | 状態・バリエーション | 既定で足りる（指定しない） |
+| --- | --- | --- | --- | --- |
+| `c--featureCard` | `p="20" bgc="base" bdrs="20"` | `::before`装飾 | `c--featureCard--featured` | `Frame ov`、直下img fit |
+
+#### 確認事項表（⏸）
+
+| 項目 | 要確認理由 | 候補 |
+| --- | --- | --- |
+| `padding:24px` | 近いトークンへの丸めで見た目差が出る | A=`p="30"`へ丸め/B=カスタムトークン化・基準値上書き/C=px直書き（例外） |
+
+### デザインデータ取り込みフロー
+
+#### 入力種別と既定動作
+
+デザイン値の扱いは、入力の種類とプロジェクトの段階で決まります。「正確に再現して」等の指示があってもこの分岐が既定動作で、ユーザー指示を根拠に`✅例外`を自作してはいけません。
+
+この表は⏸確認を省略する許可ではありません。丸め・任意色などの⏸判定自体は最小ゲート・C5のとおりで、既定動作は「確認時に第一候補として提示する案」と「確認が取れない場合に前提として選ぶ選択肢」を定めるものです（`SKILL.md`「判定記号」の⏸運用を参照）。
+
+| 入力 | 既定動作 |
+| --- | --- |
+| PNG等の画像・曖昧なレイアウト指示のみ | トークン照合し、最寄りトークンへ丸める。実測pxをそのまま書かない |
+| 詳細なデザインデータ（JSON・デザイントークン等）にpx値・色値が明示されている | 「どこまで丸め、どこを具体値にするか」を実装前に一括ですり合わせる（下記「値マッピングの初期すり合わせ」） |
+| 既存プロジェクトの途中作業 | 現状の実装パターンに従う。迷う値だけ確認事項（⏸）にする |
+
+#### 照合の手順
+
+1. **候補抽出**: デザイン値（px/色/比率など）ごとに最寄りトークンを1〜2個挙げる。
+2. **差分表**: `用途/デザイン値/候補トークン/差分/判定`で表にする。
+3. **判定**:
+   - 完全一致→✅そのまま採用。
+   - typo・既存規約上明確な置換（`secondary`→`base-2`など）→`tokens.md`で正規トークンを確認して置換し、✅にする（ユーザー確認は不要）。
+   - 近似丸め・任意色・ブランド色・密度/再現度の判断→⏸。A=最寄りトークンに丸める/B=カスタムトークン化または基準値（`--s-unit`等）の上書き/C=px直書き（例外）を提示する。この選択肢の定義はここが正本。
+4. **カスタムトークン化の条件**: 同値が複数箇所で再利用される、またはデザインシステム上の意味を持つ場合は候補にする。1回限りの局所値は丸めか例外で済ませる。
+5. **デザインデータが無い場合**: 差分表は省略し、既存トークンから意味が近い値を選ぶ。新規数値が必要な時だけ⏸にする。
+
+`--s-unit`などの基準値をプロジェクトが上書きしているとpxの完全一致判定が変わります。値照合付きでは上書きの有無を先に確認してください。
+
+プロセス違反の実例（NG）:
+
+- C5に「ユーザー要件の『正確に再現』に基づくページ固有実測値として採用」のような1行を書いて値照合を包括免除し、差分表を省略する。値照合付きレベルでトークン差分表の無い実装プランは無効。
+
+#### 値マッピングの初期すり合わせ
+
+デザインシステムが未確立のプロジェクトで初期実装を任された場合は、値ごとに⏸を出すのではなく、実装前にマッピング方針を一括ですり合わせます。トークン差分表と確認事項表をこの一括確認の提出物として使います。
+
+- スペース・サイズ・タイポグラフィ: どの範囲を最寄りトークンへ丸め、どこを具体値（px直書き・カスタムトークン）にするかの境界。
+- カラー: デザイン内の各色をどのセマンティックカラー（`--brand`/`--accent`/`--base`/`--base-2`/`--text`/`--text-2`等）へ割り当てるか。
+- デザイン画像しか無い場合は、書き出し倍率・想定キャンバス幅の前提もここで確認する。倍率はC0の実測・整合チェックで確定してから提示する。
+
+ユーザー確認が取れない場合は、原則準拠側（最寄りトークンへの丸め・セマンティック割り当て案）を前提として実装プランに明示して進め、完了報告で代替案とともに列挙します（`SKILL.md`「判定記号」の⏸運用を参照）。
+
+### 提出前セルフチェックへの接続
+
+実装後、実装プランと実装を1行ずつ照合します（チェック項目は`SKILL.md`の「提出前セルフチェック」を参照）。この照合とルール照合は、サブエージェント／タスク委任機能が使える環境では評価サブエージェントに実行させ、報告を`.lism/review.md`へ保存します（[`verification.md`](./verification.md)）。
+
+| 計画項目 | 実装結果 | 分類 | 対応 |
+| --- | --- | --- | --- |
+| ✅ `Frame ar="16/9"` | 実装済み | OK | なし |
+| ✅ `p="20"` | `p="30"`に変更 | 計画変更 | 理由を記録 |
+| ⏸ `24px`丸め | 未確認のまま実装 | 要確認 | 実装を止め確認 |
+| ✅ `data-is-active` | CSSだけ`is--active`のまま | 実装漏れ | CSS/JS/testを同時修正 |