@lism-css/mcp 0.11.0 → 0.13.0

package/dist/data/guides/SKILL.md

@@ -0,0 +1,154 @@
+---
+name: lism-css-guide
+description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIやページレイアウトの実装・コーディング、JSX・React・Astroでコンポーネントを実装・編集する時に参照。ユーティリティクラス・デザイントークン・レイアウトプリミティブ・命名規則・CSSのLayer規則・レスポンシブ対応・ベーススタイリングのルール・CSS設計を提供する。"
+---
+
+# Lism CSS Best Practices
+
+このスキルは、「Lism CSS」によるCSS設計理論の全体像と、実装時のベストプラクティスに関するガイドを提供します。
+
+調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
+
+> **バージョン情報:** このガイドは `lism-css@0.13.0` / `@lism-css/ui@0.12.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+
+公式ドキュメント: https://lism-css.com/docs/overview/
+
+
+## インストール
+
+### CDNでCSSファイルのみ読み込む場合
+
+```html
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.13.0/dist/css/main.css" rel="stylesheet" />
+```
+
+### npm パッケージ
+
+- `lism-css` — コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
+- `@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, Tabs, Button } from '@lism-css/ui/react';
+
+// Astro
+import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
+import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
+```
+
+
+## 実装ルール
+
+### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
+
+まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。
+
+- `l--`,`a--`,`is--` などの Primitive Class や `c--` などの Component Class を用いることができるか？（React, Astroの場合は `Lism`, `Stack`, `Flex`, `Columns` 等のコンポーネントを利用して構築できるか？）
+- Lism の用意している `set--`系クラス、`u--`系クラスは使えないか？
+- Property Class (`-{prop}:{value}` or `<Lism prop="value">`))を使ってスタイリングできるか？
+- 値をレスポンシブに切り替える時は Lism の Property Class (`-{prop}_{bp}` or `<Lism prop={[...]}>`)を使って実装できるか？
+- カラー・余白・フォントサイズ・タイポグラフィ・行間（ハーフレディング）・サイズ・角丸・シャドウなどはトークン値を流用できないか？
+- その他、Lismが用意するCSS変数を活用できないか？
+
+### ネイティブCSS で書くもの（必要に応じて適切な `@layer` 内で書くこと）
+
+- Lismにないアニメーションやhoverエフェクト（適宜クラスを追加して使用する）
+- 独自コンポーネントの実装に合わせた`c--`クラス(`@layer lism-component`内で定義する)
+- 複雑なセレクタ（`:nth-child`, `::before`, `::after` 等）を使用する必要があるスタイル
+- カスタムプロパティを使った独自の計算式が必要なスタイル
+- その他、Lism のトークンやプリミティブでカバーできない特殊なスタイル
+
+### コンポーネント化のルール
+
+- 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する。
+- コンポーネントはできる限り `<Lism>`系コアコンポーネントやレイアウトプリミティブ（`Stack`, `Flex`, `Columns` 等）をベースに構築すること。
+- カスタムクラスが必要な場合は `.c--{name}` の命名規則に従う。
+
+### 間違いやすい例
+
+| 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"` | スペーストークンの間違い |
+
+#### NG: レスポンシブの考慮漏れ・Gridの直書き
+
+渡されたPCサイズのデザインだけをみて、カラムレイアウトを`<Grid gtc="repeat(3, 1fr)>`のように固定してしまわないようにすること。
+特に指示がなければ、レスポンシブを意識して実装する。`<Columns>`（`l--columns`）を使ってブレイクポイントで切り替えるか、`l--sideMain`や`l--fluidCols`で自動レスポンシブを採用することを検討する。
+
+また、Lism CSSではコンテナクエリを採用しているため、レスポンシブの値切り替えには先祖要素で `isContainer`(`is--container`クラス) が必要なことに注意。
+
+#### NG: コンテンツ幅のハードコーディング
+
+ページ全体のデザインデータを渡された時、サイト幅やセクションエリアのサイズをpxでハードコーディングする前に、`--sz--`トークンを活用できないかをまずは考えてください。
+`<Lism as="section" max-sz="m"`>(`-max-sz:m`クラス) などの指定でコンテンツ幅を管理することができます。
+
+
+## 詳細リファレンス
+
+このスキルには以下の詳細ファイルが含まれます。必要に応じて参照してください。
+
+- [tokens.md](./tokens.md) — Lismで利用できるデザイントークンとCSS変数。（余白・フォントサイズ・タイポグラフィ・角丸・影・カラー・不透明度）
+- [css-rules.md](./css-rules.md) — CSS設計の概要。（Layer構造・クラスの分類・命名規則・プレフィックスのつけ方・カスタムCSSの追加ルール）
+- [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 クラス（`is--`/`l--`/`a--`）と Component クラス（`c--`）の一覧と用途。
+- [utility-class.md](./utility-class.md) — 具体的な用途・装飾・機能を持つユーティリティクラス（`u--` クラス）の一覧と用途。
+- [property-class.md](./property-class.md) — 単一のCSSプロパティに対応するProperty Class（`-{prop}:{value}`形式のクラス）の一覧・記法。
+- [prop-responsive.md](./prop-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コマンドによるインストール方法。
+
+これら各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。
+
+### Primitive 単位の詳細リファレンス
+
+`l--*` / `is--*` / `a--*` クラスや対応するコンポーネント（`<Flex>`, `<Grid>` 等）を使ってUIを実装する時は、以下の Primitive 別ファイルを参照してください。
+
+**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--fluidCols` / `<FluidCols>`: [primitives/l--fluidCols.md](./primitives/l--fluidCols.md)
+- `l--switchCols` / `<SwitchCols>`: [primitives/l--switchCols.md](./primitives/l--switchCols.md)
+- `l--sideMain` / `<SideMain>`: [primitives/l--sideMain.md](./primitives/l--sideMain.md)
+
+**Trait Primitives**
+
+- `is--container` / `<Container>`: [primitives/is--container.md](./primitives/is--container.md)
+- `is--wrapper` / `<Wrapper>`: [primitives/is--wrapper.md](./primitives/is--wrapper.md)
+- `is--layer` / `<Layer>`: [primitives/is--layer.md](./primitives/is--layer.md)
+- `is--boxLink` / `<BoxLink>`: [primitives/is--boxLink.md](./primitives/is--boxLink.md)
+- `is--vertical`: [primitives/is--vertical.md](./primitives/is--vertical.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)
+
+
+## このスキルファイル自身のアップデート方法
+
+`skills add lism-css/lism-css` を再実行してください。
+更新があるか確認したい場合は、[GitHub リポジトリ](https://github.com/lism-css/lism-css/tree/main/.claude/skills/lism-css-guide) を直接チェックしてください。

package/dist/data/guides/base-styles.md

@@ -0,0 +1,106 @@
+# ベーススタイリング
+
+Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベーススタイル・CSS変数（トークン）を定義しています。
+
+> ここではHTML要素のベーススタイリングについての概要を記載しています。トークン定義については [tokens.md](./tokens.md) を参照してください。
+
+## TOC
+
+- [Reset CSS](#reset-css)
+- [HTML 要素のベーススタイル](#html-要素のベーススタイル)
+
+[詳細](https://lism-css.com/docs/base-styles/)
+
+---
+
+## Reset CSS
+
+ソース: [`reset.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/reset.scss)
+
+`@layer lism-base.reset` として定義される最小限のリセットスタイルです。
+
+- `box-sizing: border-box` の全要素適用
+- `margin: 0` の全要素適用（`<dialog>` を除く）
+- `overflow: clip` を `<html>` に適用（横スクロール防止）
+- `body` に `min-height: 100dvh`
+- メディア要素（`img`, `video`, `iframe`）に `max-inline-size: 100%`, `block-size: auto`
+- フォーム要素のフォント・カラー継承
+
+
+## HTML 要素のベーススタイル
+
+ソース: [`_html.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/base/_html.scss)
+
+Reset CSS に加え、`@layer lism-base` 内で HTML タグに基本スタイルを適用しています。
+その中で、専用のCSS変数を使って値を調整できるようにしている部分をここでは紹介します。具体的なスタイルの詳細は、githubのソースコードを読んでください。
+
+### 全要素の行間
+
+| 変数 | 用途 |
+|------|------|
+| `--hl` | half-leading（行間の上下余白量）。`line-height: calc(1em + var(--hl) * 2)` として全要素に適用 |
+
+### body
+
+| 変数 | 用途 |
+|------|------|
+| `--fz--base` | ベースフォントサイズ |
+| `--ff--base` | ベースフォントファミリー |
+| `--lts--base` | ベース字間 |
+| `--text` | テキスト色 |
+| `--base` | 背景色 |
+| `--under-offset` | `text-underline-offset`（デフォルト: `0.125em`） |
+
+### 見出し（h1〜h6）
+
+| 変数 | 用途 |
+|------|------|
+| `--headings-ff` | 全見出し共通のフォントファミリー（デフォルト: `inherit`） |
+| `--headings-fw` | 全見出し共通のフォントウェイト（デフォルト: `var(--fw--bold)`） |
+
+各レベルのフォントサイズは `--fz--3xl`（h1）〜 `--fz--m`（h5, h6）がセットされている。
+
+### リンク（a）
+
+| 変数 | フォールバック | 用途 |
+|------|------------|------|
+| `--link-c` | `var(--link)` | リンクテキスト色 |
+| `--link-td` | `underline` | テキスト装飾の種類 |
+| `--link-td-thickness` | `auto` | 下線の太さ |
+| `--link-td-color` | `currentColor` | 下線の色 |
+
+### リスト（ul, ol）
+
+| 変数 | フォールバック | 用途 |
+|------|------------|------|
+| `--list-px-s` | `var(--s30)` | リストの `padding-inline-start` |
+
+### テーブル（table, td, th）
+
+| 変数 | フォールバック | 用途 |
+|------|------------|------|
+| `--td-c` | `inherit` | セルのテキスト色 |
+| `--td-bgc` | `transparent` | セルの背景色 |
+| `--td-p` | `var(--s10)` | セルのパディング |
+| `--td-min-sz` | `initial` | セルの最小幅 |
+| `--th-c` | `var(--td-c)` | 見出しセルのテキスト色 |
+| `--th-bgc` | `var(--td-bgc)` | 見出しセルの背景色 |
+| `--th-p` | `var(--td-p)` | 見出しセルのパディング |
+| `--th-min-sz` | `var(--td-min-sz)` | 見出しセルの最小幅 |
+
+`th` は `td` の変数をフォールバックとして参照するため、`--td-*` だけで両方に反映される。
+
+### フォーム要素
+
+| 変数 | フォールバック | 用途 |
+|------|------------|------|
+| `--controls-bgc` | `var(--base-2)` | 背景色 |
+| `--controls-bdc` | `var(--divider)` | ボーダー色 |
+| `--controls-p` | `var(--s5) var(--s10)` | パディング |
+| `--controls-bdrs` | `var(--bdrs--10)` | 角丸 |
+
+### その他
+
+| 変数 | 対象 | 用途 |
+|------|------|------|
+| `--focus-offset` | `:focus-visible` | アウトラインのオフセット（デフォルト: `0px`） |

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

@@ -0,0 +1,292 @@
+# コンポーネントシステム
+
+Lism CSS（`lism-css`パッケージ）は React / Astro 向けのコンポーネントを提供しています。
+
+```jsx
+// React でのimport
+import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/react';
+
+// Astro でのimport
+import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
+```
+
+## TOC
+
+- [コアコンポーネント: `<Lism>`](#コアコンポーネント-lism)
+- [Lism Props](#lism-props)
+- [セマンティックコンポーネント](#セマンティックコンポーネント)
+- [Atomic Primitives](#atomic-primitives)
+- [Trait Primitives](#trait-primitives)
+- [Layout Primitives](#layout-primitives)
+- [`getLismProps()`](#getlismprops--外部コンポーネントとの連携)
+
+[詳細](https://lism-css.com/docs/core-components/Lism/)
+
+---
+
+## コアコンポーネント: `<Lism>`
+
+`Lism` はすべてのコンポーネントの基盤です。Lism Props を受け取り、CSS クラスとインラインスタイルに変換して HTML を出力します。
+
+```jsx
+<Lism p="20" fz="l" c="brand">コンテンツ</Lism>
+```
+↓ 出力
+```html
+<div class="-p:20 -fz:l -c:brand">コンテンツ</div>
+```
+
+
+## Lism Props
+
+ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
+
+`<Lism>` で受け取れる Lism CSS 専用プロパティを **Lism Props** と呼びます。
+
+
+### 共通 Props
+
+すべての Lism コンポーネントで使えるpropsです。
+
+| Prop | 説明 | 例 |
+|------|------|-----|
+| `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
+| `lismClass` | コンポーネントの主要クラス名を指定。（`c--{lismClass}`） | `lismClass="c--myComponent"` |
+| `variant` | `lismClass` に対するバリエーションクラスを指定。（`c--{lismClass}--{variant}`） | `variant="secondary"` |
+| `layout` | レイアウトプリミティブ（`l--{layout}`）を指定。 | `layout="flow"` |
+| `set` | セットクラス（`set--{value}`）を指定。スペース区切りで複数指定可。値の先頭に `-` を付けると除外 | `set="gutter"`, `set="transition plain"`, `set="-plain"` |
+| `util` | ユーティリティクラス（`u--{value}`）を指定。`set` と同様に複数指定・`-` prefix 除外が可能 | `util="cbox"`, `util="cbox trim"`, `util="-trim"` |
+| `exProps` | Lism Propsの処理をスキップして外部コンポーネントに直接渡すpropsオブジェクト | `exProps={{ size: '1em' }}` |
+
+```jsx
+// as で HTML 要素を指定
+<Lism as="section" p="30">...</Lism>
+// → <section class="-p:30">...</section>
+
+// as で外部コンポーネントを指定
+<Media as={Image} src="..." p="20" bd />
+// → Image コンポーネントに { className: '-p:20 -bd' } が渡される
+
+// lismClass でコンポーネントクラスを付与
+<Lism lismClass="c--myComponent" p="10">...</Lism>
+// → <div class="c--myComponent -p:10">...</div>
+
+// variant でバリエーション
+<Lism lismClass="c--myComponent" variant="secondary">...</Lism>
+// → <div class="c--myComponent c--myComponent--secondary">...</div>
+
+// exProps で外部コンポーネント用プロパティを明示的に分離
+<Icon as={HogeIcon} exProps={{ size: "1em" }} p="10" fz="l">...</Icon>
+// → p, fz は Lism が処理、size は HogeIcon に直接渡される
+
+// set でセットクラスを付与（layout と同じ要領）
+<Box set="shadow" p="30">...</Box>
+// → <div class="l--box set--shadow -p:30">...</div>
+
+// set を複数指定（スペース区切り）
+<Stack set="shadow hov" p="30">...</Stack>
+// → <div class="l--stack set--shadow set--hov -p:30">...</div>
+
+// `-` prefix で除外（コンポーネント内部で適用済みの set を打ち消す用途）
+<AccordionButton set="-plain">...</AccordionButton>
+
+// util でユーティリティクラス（u--）を付与
+<Box util="cbox" keycolor="red" p="20">...</Box>
+// → <div class="l--box u--cbox -p:20" style="--keycolor: var(--red)">...</div>
+
+// util を複数指定・除外も set と同じ記法
+<Lism util="cbox trim">...</Lism>
+<Lism util="cbox -trim">...</Lism>
+```
+
+
+### CSS Props
+
+主要な CSS プロパティに対して省略記法（Shorthand）で指定できます。値に応じて **Property Class**（`-{prop}:{value}`）やインラインスタイルに変換されます。
+
+各プロパティで受け付けるトークン値・プリセット値の詳細は [property-class.md](./property-class.md) を参照。
+もしくは、[定義ファイルの`props.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) を読んでください。
+
+`prop={value}`で指定した値(`value`)によって、基本的な出力は以下のように分類されます。
+
+| 値 | 出力形式 | 例 |
+|------|------|-----|
+| トークン値・プリセット値 | `-{prop}:{value}` クラスのみ | `fz='l'` → `class="-fz:l"` |
+| `true` または `"-"` | `-{prop}` クラスのみ（変数なし） | `bd` / `bd='-'` → `class="-bd"` |
+| `:` で始まる値 | 強制的にユーティリティクラス化 | `p=':hoge'` → `class="-p:hoge"` |
+| その他の値（レスポンシブ対応プロパティ） | `-{prop}` + `--{prop}` | `fz='20px'` → `class="-fz"` + `style="--fz:20px"` |
+| その他の値（レスポンシブ非対応プロパティ） | `style` 属性に直接出力 | `o='0.7'` → `style="opacity:0.7"` |
+| その他の値（変数プロパティ） | `--{prop}` | `bdw='2px'` → `style="--bdw:2px"` (`border-width`としては出力されない) |
+| レスポンシブ指定値 | 上記いずれかのベース出力 + `-{prop}_{bp}` + `--{prop}_{bp}` | `p={[10,20]}` → `class="-p:10 -p_sm"` + `style="--p_sm:var(--s20)"`|
+
+補足:
+- **レスポンシブ対応プロパティ**かどうかは、 `props.ts`で`bp: 1`がセットされているかどうかで分かります。
+- **変数プロパティ**とは、`bds`, `bdc`, `bdw`, `keycolor`, `cols`, `rows`といった一部のプロパティ（`props.ts`で`isVar`がセットされているもの）のこと。これらはCSSプロパティがそのままstyle属性に出力されることはなく、常にCSS 変数（`--{prop}`）が使用されます。
+
+
+
+```jsx
+// トークン値 → クラスのみ
+<Lism fz='l' p='20'>...</Lism>
+// 出力 → <div class="-fz:l -p:20">...</div>
+
+// カラートークン（クラス化されていない場合）→ クラス + CSS変数
+<Lism c='red'>...</Lism>
+// 出力 → <div class="-c" style="--c:var(--red)">...</div>
+
+// CSS変数のみ出力される特殊パターン
+<Lism bd bdc="#000" bdw="2px">...</Lism>
+// 出力 → <div class="-bd" style="--bdc:#000;--bdw:2px">...</div>
+
+// `-` でクラスだけ出力（変数は親から継承したい場合などに使う）
+<Lism p='-' bdrs>...</Lism>
+// 出力 → <div class="-p -bdrs">...</div>
+
+// `:` で強制ユーティリティクラス化
+<Lism p=':hoge'>...</Lism>
+// 出力 → <div class="-p:hoge">...</div>
+
+// カスタム値（BP対応プロパティ） → クラス + CSS変数
+<Lism fz='20px'>...</Lism>
+// 出力 → <div class="-fz" style="--fz:20px">...</div>
+
+// カスタム値（BP非対応プロパティ）→ style属性にプロパティ直書き
+<Lism o='0.7'>...</Lism>
+// 出力 → <div style="opacity:0.7">...</div>
+```
+
+
+#### レスポンシブ指定
+
+レスポンシブ対応プロパティは、配列またはオブジェクトでブレイクポイント（`sm`,`md`）ごとの値を指定できます。（`lg`は要カスタマイズ）
+
+
+```jsx
+// 配列（base → sm → md の順）
+<Lism p={['20', '30', '40']}>...</Lism>
+// <div class="-p:20 -p_sm -p_md" style="--p_sm:var(--s30);--p_md:var(--s40)">...</div>
+
+// 途中のBPをスキップ（smを飛ばしてmd のみ指定）
+<Lism p={['20', null, '40']}>...</Lism>
+// → <div class="-p_md" style="--p_md:var(--s40)">...</div>
+```
+
+デフォルトで**コンテナクエリ**を採用しているため、先祖にコンテナ要素（`is--container`が出力される`<Container>`または`isContainer`の指定）が必要です。
+
+
+### Trait Props
+
+Trait Primitives クラス（`is--*`）を出力するためのプロパティ群です。
+
+| Prop | 出力クラス |
+|------|-----------|
+| `isWrapper` | `is--wrapper` |
+| `isWrapper="{s\|l}"` | `is--wrapper` + `-contentSize:{s\|l}` |
+| `isWrapper="{value}"` | `is--wrapper` + `-contentSize` + `--contentSize:{value}` |
+| `isLayer` | `is--layer` |
+| `isBoxLink` | `is--boxLink` |
+| `isCoverLink` | `is--coverLink` |
+| `isContainer` | `is--container` |
+| `isSide` | `is--side` |
+| `isSkipFlow` | `is--skipFlow` |
+| `isVertical` | `is--vertical` |
+
+```jsx
+// Trait Props の使用例
+<Stack isLayer>背景レイヤー</Stack>
+// → <div class="l--stack is--layer">...</div>
+
+<Flex isWrapper="l">コンテンツ</Flex>
+// → <div class="l--flex is--wrapper -contentSize:l">...</div>
+```
+
+
+## セマンティックコンポーネント
+
+`Lism` の `as` エイリアスとして機能するコンポーネント群です。layout クラスは付与されず、HTML のセマンティクスを表現するために使います。
+
+| コンポーネント | デフォルト要素 | 許容タグ |
+|-------------|-------------|---------|
+| `<Text>` | `<p>` | `p`, `div`, `blockquote`, `address`, `figcaption`, `pre` |
+| `<Heading>` | `<h2>` | `h1`〜`h6`（`level` prop で指定） |
+| `<Inline>` | `<span>` | `span`, `em`, `strong`, `small`, `code`, `time`, `i`, `b`, `mark`, `abbr`, `cite`, `kbd` |
+| `<Group>` | `<div>` | `div`, `section`, `article`, `figure`, `nav`, `aside`, `header`, `footer`, `main`, `fieldset`, `hgroup` |
+| `<List>` | `<ul>` | `ul`, `ol`, `dl` |
+| `<Link>` | `<a>`（固定） | — |
+| `<Media>` | `<img>` | `img`, `video`, `iframe`, `picture` |
+
+```jsx
+<Heading level="3" fz="xl">見出し</Heading>
+// → <h3 class="-fz:xl">見出し</h3>
+
+<Text as="blockquote" p="30">引用文</Text>
+// → <blockquote class="-p:30">引用文</blockquote>
+
+<Group as="section" p="40">
+  <Text>本文</Text>
+</Group>
+```
+
+## Atomic Primitives
+
+| コンポーネント | 出力クラス | 用途 |
+|-------------|-----------|------|
+| `<Icon>` | `a--icon` | SVG アイコン・アイコンフォント |
+| `<Spacer>` | `a--spacer` | 空白要素 |
+| `<Divider>` | `a--divider` | 区切り線 |
+| `<Decorator>` | `a--decorator` | 装飾要素（SCSS定義なし、クラス名のみ出力） |
+
+各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+
+
+## Trait Primitives
+
+`<Lism isXxx>`のエイリアスコンポーネントです。
+
+| コンポーネント | 内部処理 | 出力クラス |
+|-------------|------------|-----------|
+| `<Container>` | `isContainer` | `is--container` |
+| `<Wrapper>` | `isWrapper` | `is--wrapper` |
+| `<Layer>` | `isLayer` | `is--layer` |
+| `<BoxLink>` | `isBoxLink` | `is--boxLink` |
+
+各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+
+
+## Layout Primitives
+
+内部で `layout` prop が固定されており、対応する `l--{layout}` クラスが自動で出力されます。各コンポーネントの専用 Props（`cols`, `rows`, `breakSize`, `sideW`/`mainW`, `flow` など）は、それぞれの詳細ファイルを参照してください。
+
+| コンポーネント | 出力クラス |
+|-------------|-----------|
+| `<Box>` | `l--box` |
+| `<Flex>` | `l--flex` |
+| `<Stack>` | `l--stack` |
+| `<Cluster>` | `l--cluster` |
+| `<Grid>` | `l--grid` |
+| `<Flow>` | `l--flow` |
+| `<Center>` | `l--center` |
+| `<Frame>` | `l--frame` |
+| `<Columns>` | `l--columns` |
+| `<TileGrid>` | `l--tileGrid` |
+| `<FluidCols>` | `l--fluidCols` |
+| `<SwitchCols>` | `l--switchCols` |
+| `<SideMain>` | `l--sideMain` |
+
+各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
+
+## `getLismProps()` — 外部コンポーネントとの連携
+
+なんらかの理由で`as`に外部コンポーネントを渡せない場合、`getLismProps()` を使うことでも `<Lism>`が処理できるプロパティ群を `className` と `style` に変換することができます。
+
+```jsx
+import getLismProps from 'lism-css/lib/getLismProps';
+
+function MyComponent({ children }) {
+  // Lism Props を getLismProps() で 変換
+  const lismProps = getLismProps({ p: '20', fz: 'l', c: 'red' });
+  // → { className: '-p:20 -fz:l -c', style: {'--c': 'var(--red)'} }
+
+  return <div {...lismProps}>{children}</div>;
+}
+```