@lism-css/mcp 0.12.0 → 0.14.0

package/dist/data/guides/SKILL.md

@@ -1,44 +1,31 @@
 ---
 name: lism-css-guide
-description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIやページレイアウトの実装・コーディング、JSX・React・Astroでコンポーネントを実装・編集する時に参照。ユーティリティクラス・デザイントークン・レイアウトモジュール・命名規則・CSSのLayer規則・レスポンシブ対応・ベーススタイリングのルール・CSS設計を提供する。"
+description: "Lism CSS の実装ガイド。HTML・CSS・SCSSの編集、UIやページレイアウトの実装・コーディング、JSX・React・Astroでコンポーネントを実装・編集する時に参照。ユーティリティクラス・デザイントークン・レイアウトプリミティブ・命名規則・CSSのLayer規則・レスポンシブ対応・ベーススタイリングのルール・CSS設計を提供する。"
 ---
 
 # Lism CSS Best Practices
 
-このプロジェクトは CSS フレームワーク「Lism CSS」を使用しています。
+このスキルは、「Lism CSS」によるCSS設計理論の全体像と、実装時のベストプラクティスに関するガイドを提供します。
 
-Lism CSS は、WEBサイトの骨組みをテンポ良くサクっと作るための軽量なCSS設計フレームワークです。デザインに自然と心地よいリズムを生み出すトークン設計、レイアウトファーストなモジュール設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。ビルドや設定は不要で、CSSを読み込むだけでも使えます。Every Layout のレイアウトプリミティブとハーモニックモジュラースケーリング、Tailwind CSS のユーティリティファーストアプローチ、ITCSS のレイヤー設計を融合した独自のCSS設計体系です。
+調和と統一感を生み出すデザイントークン設計、`@layer`で管理されるプリミティブ設計、CSS変数を活かした柔軟でレスポンシブなユーティリティ設計が特徴です。
 
-MCP サーバー (`@lism-css/mcp`) が利用可能な場合は、コンポーネントやPropsの詳細情報をそちらから取得してください。
-
-> **バージョン情報:** このガイドは `lism-css@0.12.0` / `@lism-css/ui@0.12.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
+> **バージョン情報:** このガイドは `lism-css@0.14.0` / `@lism-css/ui@0.14.0` 時点の情報に基づいています。プロジェクトで使用中のバージョンを確認し、このガイドのバージョンと異なる場合はユーザーに通知してください。
 
 公式ドキュメント: https://lism-css.com/docs/overview/
 
 
-## パッケージ構成
-
-| npm パッケージ名 | 用途 |
-|-----------|------|
-| `lism-css` | コアCSSフレームワーク。レイアウトモジュール、デザイントークン、Property Class、React/Astroコンポーネントを提供 |
-| `@lism-css/ui` | `lism-css` の上に構築されたインタラクティブな UI コンポーネントライブラリ。Accordion, Modal, Tabs 等を React/Astro で提供 |
-
-
 ## インストール
 
-### CDN（CSSのみ）
+### CDNでCSSファイルのみ読み込む場合
 
 ```html
-<link href="https://cdn.jsdelivr.net/npm/lism-css@0.12.0/dist/css/main.css" rel="stylesheet" />
+<link href="https://cdn.jsdelivr.net/npm/lism-css@0.14.0/dist/css/main.css" rel="stylesheet" />
 ```
 
 ### npm パッケージ
 
-```bash
-npm i lism-css
-# UI コンポーネントも使う場合
-npm i @lism-css/ui
-```
+- `lism-css` — コアパッケージ。Lism CSS本体となるCSSファイル、レイアウトプリミティブ、デザイントークン、Property Class、React/Astroコンポーネントを提供。
+- `@lism-css/ui` — `lism-css` を使って構築された UI コンポーネントライブラリ。Accordion, Modal, Tabs, Button, Badge, Callout 等を React/Astro で提供。
 
 ### CSS 読み込み
 
@@ -46,68 +33,122 @@ npm i @lism-css/ui
 import 'lism-css/main.css';
 ```
 
-### コンポーネント読み込み
+### コンポーネント読み込み例
 
 ```jsx
 // React
-import { Box, Flex, Stack, Grid, Text, Media } from 'lism-css/react';
-import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/react';
+import { Flex, Stack, Grid, Columns } from 'lism-css/react';
+import { Accordion, Tabs, Button } from '@lism-css/ui/react';
 
 // Astro
-import { Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
-import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
+import { Flex, Stack, Grid, Columns } from 'lism-css/astro';
+import { Accordion, Tabs, Button } from '@lism-css/ui/astro';
 ```
 
 
 ## 実装ルール
 
-### 基本: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
+### 基本方針: できる限りLism CSSの用意しているクラス・CSS変数・コンポーネントを使って書く
 
 まずは以下のチェックリストを確認しながら、Lism CSS でできることが何かを考えてから実装方針を立ててください。
 
-- `l--`,`a--`,`is--`, `c--`などのModule Classを用いることができるか？（React, Astroの場合は `Lism`, `Stack`, `Flex`, `Grid`, `Columns` 等のコンポーネントを利用して構築できるか？）
-- `set--`系クラス、`u--`系クラスは使えないか？
+- `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変数でできることかどうか
+- その他、Lismが用意するCSS変数を活用できないか？
+
+### ネイティブCSS で書くもの（必要に応じて適切な `@layer` 内で書くこと）
 
-### ネイティブ CSS で書くもの（必要に応じて適切な @layer 内で書くこと）
-- アニメーションやhoverエフェクトは、Lismになければ適宜クラスを追加して使用する
-- コンポーネントの実装も、Lismになければ適宜`c--`クラスを追加して使用する(`@layer lism-modules`内で定義すること)
+- Lismにないアニメーションやhoverエフェクト（適宜クラスを追加して使用する）
+- 独自コンポーネントの実装に合わせた`c--`クラス(`@layer lism-component`内で定義する)
 - 複雑なセレクタ（`:nth-child`, `::before`, `::after` 等）を使用する必要があるスタイル
 - カスタムプロパティを使った独自の計算式が必要なスタイル
-- Lism のトークンやモジュールでカバーできない特殊なスタイル
+- その他、Lism のトークンやプリミティブでカバーできない特殊なスタイル
 
 ### コンポーネント化のルール
-- 同じスタイルの組み合わせが3箇所以上で使われる場合は、コンポーネントとして切り出すことを検討する
-- コンポーネントはできる限り `<Lism>`系コアモジュールやレイアウトモジュール（`Stack`, `Flex`, `Grid`, `Columns` 等）をベースに構築し、Lism Propsを活用して作成すること
-- カスタムクラスが必要な場合は `.c--{name}` の命名規則に従う
+
+- 同じスタイルの組み合わせが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) | デザイントークン・CSS変数 — 余白・フォントサイズ・角丸・影・カラー・パレット | [tokens](https://lism-css.com/docs/tokens/) |
-| [base-styles.md](./base-styles.md) | ベーススタイリング — Reset CSS・HTML要素のベーススタイル・CSS変数（トークン） | [base-styles](https://lism-css.com/docs/base-styles/) |
-| [set-class.md](./set-class.md) | `set--` クラス — `set--plain`/`set--shadow`/`set--hov`/`set--transition` 等のセットアップクラス | [set](https://lism-css.com/docs/set/) |
-| [module-class.md](./module-class.md) | モジュールクラス — `is--`/`l--`/`a--`/`c--` クラスの一覧と用途 | [state](https://lism-css.com/docs/state/), [module-class](https://lism-css.com/docs/module-class/) |
-| [utility-class.md](./utility-class.md) | ユーティリティクラス — `u--` クラスの一覧・SCSS ソースリンク・Property Class との違い | [utility-class](https://lism-css.com/docs/utility-class/) |
-| [property-class.md](./property-class.md) | Property Class — `-{prop}:{value}` 記法・主要Prop一覧・特殊Prop（ボーダー・ホバー）・出力タイプ | [property-class](https://lism-css.com/docs/property-class/) |
-| [prop-responsive.md](./prop-responsive.md) | レスポンシブ対応 — ブレークポイント・コンテナクエリ・HTML/コンポーネントでの指定方法 | [responsive](https://lism-css.com/docs/responsive/) |
-| [components-core.md](./components-core.md) | コンポーネントシステム — コア・セマンティック・レイアウト・ステート・アトミック一覧、Lism Props、getLismProps | [components](https://lism-css.com/docs/components/) |
-| [components-ui.md](./components-ui.md) | UIコンポーネント（`@lism-css/ui`）— Accordion・Modal・Tabs・Button 等の Props・構造・CLI | [components](https://lism-css.com/docs/components/) |
-| [css-rules.md](./css-rules.md) | CSS設計ルール — Layer構造・命名規則・プレフィックス・カスタムCSS追加ルール | [css-methodology](https://lism-css.com/docs/css-methodology/) |
+- [tokens.md](./tokens.md) — Lismで利用できるデザイントークンとCSS変数。（余白・フォントサイズ・タイポグラフィ・角丸・影・カラー・不透明度）
+- [css-rules.md](./css-rules.md) — CSS設計の概要。（Layer構造・クラスの分類・プレフィックスのつけ方・Component クラス（`c--`）・カスタムCSSの追加ルール）
+- [naming.md](./naming.md) — 命名規則の詳細。（CSS変数名・クラス名・Property Class の `{prop}` / `{value}` の省略ルール）
+- [base-styles.md](./base-styles.md) — HTML要素のベーススタイリング。（Reset CSSやHTML要素の基本スタイルをカスタマイズできるCSS変数）
+- [set-class.md](./set-class.md) — ベーススタイル・変数セットに使用する`set--` クラスの一覧と用途。
+- [primitive-class.md](./primitive-class.md) — レイアウトを組み立てる Primitive クラス（`is--`/`l--`/`a--`）の一覧と用途。
+- [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)
 
-各ファイルの冒頭にはTOC（目次）があり、セクションごとの詳細URL・ソースURLがまとめて記載されています。
+**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.sh のコマンドを利用してください。
+## このスキルファイル自身のアップデート方法
 
-- `npx skills check` でアップデートの有無を確認
-- `npx skills update` でアップデートを実行
+`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

@@ -15,7 +15,7 @@ Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベ
 
 ## Reset CSS
 
-ソース: [`reset.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/reset.scss)
+ソース: [`reset.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/reset.scss)
 
 `@layer lism-base.reset` として定義される最小限のリセットスタイルです。
 
@@ -29,7 +29,7 @@ Lism CSS は `@layer lism-base` レイヤーで、Reset CSS・HTML要素のベ
 
 ## HTML 要素のベーススタイル
 
-ソース: [`_html.scss`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/src/scss/base/_html.scss)
+ソース: [`_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のソースコードを読んでください。

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

@@ -3,10 +3,10 @@
 Lism CSS（`lism-css`パッケージ）は React / Astro 向けのコンポーネントを提供しています。
 
 ```jsx
-// React
+// React でのimport
 import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/react';
 
-// Astro
+// Astro でのimport
 import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 ```
 
@@ -15,13 +15,12 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 - [コアコンポーネント: `<Lism>`](#コアコンポーネント-lism)
 - [Lism Props](#lism-props)
 - [セマンティックコンポーネント](#セマンティックコンポーネント)
-- [レイアウトコンポーネント（Layout Modules）](#レイアウトコンポーネントlayout-modules)
-- [ステートコンポーネント（State Modules）](#ステートコンポーネントstate-modules)
-- [アトミックコンポーネント（Atomic Modules）](#アトミックコンポーネントatomic-modules)
-- [Layout 優先の原則](#layout-優先の原則-layout-isstate-vs-state-layout)
+- [Atomic Primitives](#atomic-primitives)
+- [Trait Primitives](#trait-primitives)
+- [Layout Primitives](#layout-primitives)
 - [`getLismProps()`](#getlismprops--外部コンポーネントとの連携)
 
-[詳細](https://lism-css.com/docs/components/)
+[詳細](https://lism-css.com/docs/core-components/lism-props/)
 
 ---
 
@@ -31,28 +30,34 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 
 ```jsx
 <Lism p="20" fz="l" c="brand">コンテンツ</Lism>
-// → <div class="-p:20 -fz:l -c:brand">コンテンツ</div>
+```
+↓ 出力
+```html
+<div class="-p:20 -fz:l -c:brand">コンテンツ</div>
 ```
 
 
 ## Lism Props
 
-ソース: [props.ts](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/config/defaults/props.ts)
+ソース: [props.ts](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts)
 
-`<Lism>` で受け取れる Lism CSS 専用プロパティを **Lism Props** と呼びます。
+`<Lism>`系コンポーネントで受け取れる Lism CSS 専用プロパティを **Lism Props** と呼びます。
 
 
 ### 共通 Props
 
-すべての Lism コンポーネントで使えるプロップスです。
+すべての Lism コンポーネントで使えるpropsです。
 
 | Prop | 説明 | 例 |
 |------|------|-----|
-| `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `'div'`） | `as="section"`, `as={Image}` |
-| `lismClass` | コンポーネントの主要クラス名を指定。出力順序が高めになる | `lismClass='c--myComponent'` |
-| `variant` | `lismClass` に対するバリエーションクラスを出力 | `variant='secondary'` |
-| `layout` | レイアウトモジュールを指定し `l--{layout}` クラスを出力 | `layout='flow'` |
-| `exProps` | Lism Props処理をスキップして外部コンポーネントに直接渡す属性のオブジェクト | `exProps={{ size: '1em' }}` |
+| `as` | レンダリングする HTML 要素または外部コンポーネントを指定（デフォルト: `"div"`） | `as="section"`, `as={Image}` |
+| `lismClass` | コンポーネント基底となる `c--*` クラスを指定。`variant` による BEM 展開の対象 | `lismClass="c--myComponent"` |
+| `variant` | `lismClass` 先頭クラスに対する BEM Modifier を付与（`c--` 専用。`a--` / `l--` には展開されない） | `variant="secondary"` |
+| `layout` | レイアウトプリミティブ（`l--{layout}`）を指定 | `layout="flow"` |
+| `atomic` | アトミックプリミティブ（`a--{atomic}`）を指定。`'divider'` / `'spacer'` / `'decorator'` が利用可能（`'icon'` は内部用） | `atomic="divider"` |
+| `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 要素を指定
@@ -74,6 +79,25 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 // 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>
 ```
 
 
@@ -82,7 +106,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 主要な CSS プロパティに対して省略記法（Shorthand）で指定できます。値に応じて **Property Class**（`-{prop}:{value}`）やインラインスタイルに変換されます。
 
 各プロパティで受け付けるトークン値・プリセット値の詳細は [property-class.md](./property-class.md) を参照。
-もしくは、[定義ファイルの`props.ts`](https://github.com/lism-css/lism-css/blob/main/packages/lism-css/config/defaults/props.ts) を読んでください。
+もしくは、[定義ファイルの`props.ts`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/config/defaults/props.ts) を読んでください。
 
 `prop={value}`で指定した値(`value`)によって、基本的な出力は以下のように分類されます。
 
@@ -90,7 +114,7 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 |------|------|-----|
 | トークン値・プリセット値 | `-{prop}:{value}` クラスのみ | `fz='l'` → `class="-fz:l"` |
 | `true` または `"-"` | `-{prop}` クラスのみ（変数なし） | `bd` / `bd='-'` → `class="-bd"` |
-| `:` で始まる値 | 強制的にユーティリティクラス化 | `p=':hoge'` → `class="-p:hoge"` |
+| `:` で始まる値 | 強制的にクラス化 | `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`としては出力されない) |
@@ -151,27 +175,24 @@ import { Lism, Box, Flex, Stack, Grid, Text, Media } from 'lism-css/astro';
 デフォルトで**コンテナクエリ**を採用しているため、先祖にコンテナ要素（`is--container`が出力される`<Container>`または`isContainer`の指定）が必要です。
 
 
-### State Props
+### Trait Props
 
-State Modules クラス（`is--*` / `set--*`）を出力するためのプロパティ群です。
+Trait Primitives クラス（`is--*`）を出力するためのプロパティ群です。
 
-| Prop | 出力クラス | 用途 |
-|------|-----------|------|
-| `isWrapper(='{s\|l}')` | `is--wrapper` + `-contentSize:{s\|l}` | コンテンツ幅制限 |
-| `isLayer` | `is--layer` | 絶対配置レイヤー（inset:0） |
-| `isLinkBox` | `is--linkBox` | ボックス全体リンク化 |
-| `isContainer` | `is--container` | コンテナクエリ対象 |
-| `isSide` | `is--side` | サイド要素 |
-| `isSkipFlow` | `is--skipFlow` | Flow 余白をスキップ |
-| `isVertical` | `is--vertical` | 縦書き方向 |
-| `set="gutter"` | `set--gutter` | 左右ガター余白 |
-| `set="shadow"` | `set--shadow` | シャドウ付与 |
-| `set="hov"` | `set--hov` | ホバー効果 |
-| `set="transition"` | `set--transition` | トランジション |
-| `set="plain"` | `set--plain` | プレーン状態 |
+| 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` |
 
 ```jsx
-// State Props の使用例
+// Trait Props の使用例
 <Stack isLayer>背景レイヤー</Stack>
 // → <div class="l--stack is--layer">...</div>
 
@@ -206,79 +227,7 @@ State Modules クラス（`is--*` / `set--*`）を出力するためのプロパ
 </Group>
 ```
 
-### `<HTML>` コンポーネント
-
-任意の HTML タグを直接レンダリングするためのコンポーネント。セマンティックコンポーネントがカバーしない要素に使います。
-
-
-## レイアウトコンポーネント（Layout Modules）
-
-レイアウト構造を定義するメインのコンポーネント群です。内部で `layout` prop が固定されており、対応する `l--{layout}` クラスが自動で出力されます。
-
-| コンポーネント | layout | 出力クラス | 用途 |
-|-------------|--------|-----------|------|
-| `<Box>` | `box` | `l--box` | 汎用ボックス |
-| `<Flex>` | `flex` | `l--flex` | Flexbox（横方向） |
-| `<Stack>` | `stack` | `l--stack` | 縦積み（flex-direction: column） |
-| `<Cluster>` | `cluster` | `l--cluster` | 折り返し Flex（flex-wrap） |
-| `<Grid>` | `grid` | `l--grid` | CSS Grid |
-| `<Flow>` | `flow` | `l--flow` | フローコンテンツ（子要素間に余白） |
-| `<Center>` | `center` | `l--center` | 中央配置 |
-| `<Frame>` | `frame` | `l--frame` | アスペクト比フレーム |
-| `<Columns>` | `columns` | `l--columns` | CSS columns |
-| `<TileGrid>` | `tileGrid` | `l--tileGrid` | 均等タイルグリッド（cols x rows） |
-| `<FluidCols>` | `fluidCols` | `l--fluidCols` | auto-fill/auto-fit グリッド |
-| `<SwitchCols>` | `switchCols` | `l--switchCols` | レスポンシブカラム切り替え |
-| `<SideMain>` | `sideMain` | `l--sideMain` | サイド＋メインの2カラム |
-
-### レイアウト固有の Props
-
-一部のレイアウトコンポーネントには専用の props があります。
-
-```jsx
-// Grid: template 系 props
-<Grid gtc="1fr 1fr" gtr="auto">...</Grid>
-
-// TileGrid: 均等タイルグリッド
-<TileGrid cols="3" rows="2" g="20">...</TileGrid>
-
-// SwitchCols: 切り替えブレークポイント
-<SwitchCols breakSize="480px">...</SwitchCols>
-
-// SideMain: サイド幅とメイン幅
-<SideMain sideW="200px" mainW="1fr">...</SideMain>
-
-// FluidCols: auto-fill モード
-<FluidCols autoFill>...</FluidCols>
-
-// Flow: 子要素間の余白
-<Flow flow="30">...</Flow>
-```
-
-
-## ステートコンポーネント（State Modules）
-
-要素に構造的な振る舞い（状態）を付与するコンポーネント群です。内部で `is--` クラスを出力します。
-
-| コンポーネント | 内部の state | 出力クラス | 用途 |
-|-------------|------------|-----------|------|
-| `<Container>` | `isContainer` + `isWrapper` | `is--container is--wrapper` | コンテナクエリ対象 + 幅制限 |
-| `<Wrapper>` | `isWrapper` | `is--wrapper` | コンテンツ幅制限 |
-| `<Layer>` | `isLayer` | `is--layer` | 絶対配置レイヤー（inset: 0） |
-| `<LinkBox>` | `isLinkBox` | `is--linkBox` | ボックス全体リンク化 |
-
-```jsx
-<Container size="l">...</Container>
-// → <div class="is--container is--wrapper -contentSize:l">...</div>
-
-<Wrapper contentSize="s">...</Wrapper>
-// → <div class="is--wrapper -contentSize:s">...</div>
-```
-
-
-## アトミックコンポーネント（Atomic Modules）
-
-特定の役割を持つ単機能コンポーネントです。
+## Atomic Primitives
 
 | コンポーネント | 出力クラス | 用途 |
 |-------------|-----------|------|
@@ -287,39 +236,45 @@ State Modules クラス（`is--*` / `set--*`）を出力するためのプロパ
 | `<Divider>` | `a--divider` | 区切り線 |
 | `<Decorator>` | `a--decorator` | 装飾要素（SCSS定義なし、クラス名のみ出力） |
 
-```jsx
-<Icon as={LucideArrowRight} fz="xl" />
-<Media as="img" src="/image.jpg" alt="説明" ar="16/9" />
-```
 
+各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
 
-## Layout 優先の原則: `<Layout isState>` vs `<State layout="...">`
 
-レイアウトとステートの両方の性質を持つ場合、以下の2つの書き方で同じ出力が得られます。
+## Trait Primitives
 
-```jsx
-// 方法A: レイアウトコンポーネント + is-- prop（推奨）
-<Stack isLayer>...</Stack>
-// → <div class="l--stack is--layer">...</div>
+`<Lism isXxx>`のエイリアスコンポーネントです。
 
-// 方法B: Lism で layout を指定
-<Lism layout="stack" isLayer>...</Lism>
-// → <div class="l--stack is--layer">...</div>
-```
+| コンポーネント | 内部処理 | 出力クラス |
+|-------------|------------|-----------|
+| `<Container>` | `isContainer` | `is--container` |
+| `<Wrapper>` | `isWrapper` | `is--wrapper` |
+| `<Layer>` | `isLayer` | `is--layer` |
+| `<BoxLink>` | `isBoxLink` | `is--boxLink` |
 
-**`<Layout isState>` の形式で書いてください（Layout 優先）。** レイアウトコンポーネントを軸にして、ステートを付加する書き方がコードの意図を明確にします。
+各プリミティブの詳細は SKILL.md の「プリミティブ単位の詳細リファレンス」、または `primitives/` 配下の各ファイルを参照。
 
-```jsx
-// OK: Layout 優先
-<Stack isLayer>背景レイヤー</Stack>
-<Flex isWrapper="l">コンテンツ</Flex>
-<Grid isContainer>グリッド</Grid>
 
-// NG: State 優先（避ける）
-<Layer layout="stack">背景レイヤー</Layer>
-<Wrapper layout="flex">コンテンツ</Wrapper>
-```
+## 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()` — 外部コンポーネントとの連携
 

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

@@ -25,10 +25,9 @@ import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
 - [Tabs](#tabs)
 - [ShapeDivider](#shapedivider)
 - [DummyText](#dummytext)
-- [DummyImage](#dummyimage)
 - [CLI でプロジェクトにコピーして使う](#cli-でプロジェクトにコピーして使う)
 
-[詳細](https://lism-css.com/docs/components/)
+[詳細](https://lism-css.com/ui/)
 
 ---
 
@@ -69,7 +68,7 @@ import { Accordion, Tabs, Modal, Button } from '@lism-css/ui/astro';
 | `type` | `'alert' \| 'point' \| 'warning' \| 'check' \| 'help' \| 'info'` | `'alert'` | アラートタイプ。keycolor と icon の組み合わせプリセット |
 | `keycolor` | `string` | — | キーカラー |
 | `icon` | `ReactNode \| string` | — | カスタムアイコン |
-| `layout` | `'flex' \| 'sideMain'` | `'flex'` | レイアウトモジュール |
+| `layout` | `'flex' \| 'sideMain'` | `'flex'` | レイアウトプリミティブ |
 | `flow` | `string` | `'s'` | コンテンツを囲む要素のフロー余白 |
 
 ```jsx
@@ -204,7 +203,7 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 | `modalId` | OpenBtn / CloseBtn | `string` | — | 対象モーダルの ID |
 | `duration` | Root | `string` | — | アニメーション持続時間。`--duration` 変数として出力 |
 | `offset` | Inner | `string` | — | 非表示時の位置オフセット。`--offset` 変数として出力 |
-| `layout` | Inner | `string` | — | Inner 要素のレイアウトモジュール |
+| `layout` | Inner | `string` | — | Inner 要素のレイアウトプリミティブ |
 
 ```jsx
 <Modal.OpenBtn modalId='modal-01'>Open</Modal.OpenBtn>
@@ -313,17 +312,6 @@ HTML の `details/summary` 要素をラップしたコンポーネント。Accor
 ```
 
 
-## DummyImage
-
-ソース: [DummyImage/](https://github.com/lism-css/lism-css/tree/main/packages/lism-ui/src/components/DummyImage)
-
-ダミーのプレースホルダー画像を出力するコンポーネント。`cdn.lism-css.com` からダミー画像を取得。
-
-```jsx
-<DummyImage />
-```
-
-
 ## CLI でプロジェクトにコピーして使う
 
 `@lism-css/ui` の UI コンポーネントは、CLI コマンドで自分のプロジェクトにソースコードをコピーして使うこともできます。コピーしたファイルは自由にカスタマイズ可能です。