@lism-css/mcp 0.13.0 → 0.15.0

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

@@ -0,0 +1,77 @@
+# Trait クラス
+
+Lism CSS では、要素に対して宣言的に「役割」や「機能」を付与するクラス群を **Trait クラス**（`is--` / `has--`）として定義します。これらは `@layer lism-trait` に属します。
+
+
+## TOC
+
+- [プレフィックス一覧](#プレフィックス一覧)
+- [`is--` Trait（役割宣言）](#is-- trait役割宣言)
+- [`has--` Trait（機能付与）](#has-- trait機能付与)
+
+[詳細](https://lism-css.com/docs/trait-class/)
+
+---
+
+## プレフィックス一覧
+
+| プレフィックス | 種類 | レイヤー | 役割 |
+|--------------|------|---------|------|
+| `is--` | Trait（役割宣言） | `lism-trait` | 要素に「〜である」という役割・存在を宣言する |
+| `has--` | Trait（機能付与） | `lism-trait` | 要素に「〜を持つ」という単一機能を付与する。CSS 変数でカスタマイズ可能 |
+
+併用ルールおよび `is--` / `has--` の判定軸は [css-rules.md](./css-rules.md#プレフィックスとクラス分類) を参照してください。
+
+
+## `is--` Trait（役割宣言）
+
+要素に**役割・存在の宣言**を付与するクラスです。他の Primitive / Component と自由に組み合わせられます。
+
+| クラス | 用途 |
+|--------|------|
+| `is--container` | コンテナクエリの基準要素を定義する（`container-type: inline-size`を付与する）。Lism のレスポンシブ機能の判定基準となるラッパーに付与する |
+| `is--wrapper` | 直下の子要素のコンテンツ幅を一括で制限する。`-contentSize:s` / `-contentSize:l` で事前定義したプリセットサイズを指定可能（デフォルト: `--sz--m`）。セクション・ヘッダー・フッター・記事コンテンツなどで、共通したコンテンツ幅を使用する |
+| `is--layer` | 親要素全体に被さる絶対配置レイヤー（`position: absolute; inset: 0;`）。背景画像・カラーオーバーレイ・フィルターレイヤー・コンテンツ等を重ねて表示する |
+| `is--boxLink` | ボックス全体をクリッカブルなリンク領域にする。自身を`a`タグにして利用するか、もしくは自身を`div`にして内部の`a`タグに`is--coverLink`を付与して使う |
+| `is--coverLink` | 親要素全体に被さるクリック領域を持つリンク（`::before` を `inset: 0` で広げる）。`is--boxLink` と併用する |
+| `is--skipFlow` | `l--flow` 直下で使用し、次の兄弟要素のフロー余白をゼロにする。`l--flow`の中にあるが`position:absolute`にしたい要素などに使用する |
+| `is--side` | `l--sideMain` 直下で使用し、サイド側の要素であることを示す |
+
+Lism コンポーネントでは `isContainer`, `isLayer` 等の Props として利用できます（例: `<Lism isContainer>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [is--container](./trait-class/is--container.md)
+- [is--wrapper](./trait-class/is--wrapper.md)
+- [is--layer](./trait-class/is--layer.md)
+- [is--boxLink](./trait-class/is--boxLink.md)
+
+
+## `has--` Trait（機能付与）
+
+要素に**単一機能の trait を付与**するクラスです。CSS 変数によりカスタマイズポイントを提供します。
+
+| クラス | 用途 | 主な CSS 変数 |
+|--------|------|--------------|
+| `has--transition` | transition プロパティをまとめてセット。主に hoverクラス（`-hov:*`）と組み合わせて使用 | `--transitionProps`, `--duration`, `--ease`, `--delay`（グローバル上書きは `--transition-duration`） |
+| `has--gutter` | コンテンツの左右に統一した余白（gutter）を設定する | `--gutter-size`（デフォルト `var(--s30)`） |
+| `has--snap` | `scroll-snap-` 系プロパティを CSS 変数経由でセットできるようにする | `--snapType`, `--snapAlign` 等 |
+| `has--mask` | `--maskImg` 変数と組み合わせて、要素自身にマスクを適用する | `--maskImg`, `--maskPos`（`50%`）, `--maskSize`（`contain`）, `--maskRepeat`（`no-repeat`） |
+
+Lism コンポーネントでは `hasTransition`, `hasGutter`, `hasSnap`, `hasMask` という Props として利用できます（例: `<Lism hasTransition>`）。
+
+詳細は以下の個別ドキュメントを参照してください:
+- [has--transition](./trait-class/has--transition.md)
+- [has--gutter](./trait-class/has--gutter.md)
+- [has--snap](./trait-class/has--snap.md)
+- [has--mask](./trait-class/has--mask.md)
+
+
+## `is--` と `has--` の判断軸
+
+| | `is--` | `has--` |
+|---|---|---|
+| 意味 | 〜である（役割・存在の宣言） | 〜を持つ（機能の付与） |
+| CSS 変数 | 必須ではない | 必須（カスタマイズポイント） |
+
+- その要素が **何であるか**（役割）を表すなら → `is--`
+- その要素に **どんな機能を持たせるか**（カスタマイズポイント付き）なら → `has--`

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

@@ -31,7 +31,6 @@ Lism コンポーネントでの `util` prop による指定方法は [component
 | `u--cbox` | `--keycolor` を使い `color-mix()` で `--c` / `--bgc` / `--bdc` を自動生成する色付きボックス | [`_cbox.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_cbox.scss) |
 | `u--collapseGrid` | Grid / Flex の子要素間に `box-shadow` で境界線を表現する | [`_itemDivider.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_itemDivider.scss) |
 | `u--srOnly` | スクリーンリーダー専用（視覚的に非表示）。`clip-path: inset(50%)` で実装 | [`_hidden.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_hidden.scss) |
-| `u--snap` | スクロールスナップコンテナ。`--snapType`, `--snapAlign`, `--snapStop` で制御 | [`_snap.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_snap.scss) |
 | `u--clipText` | テキストで背景をクリッピング（`background-clip: text`） | [`_clipText.scss`](https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/utility/_clipText.scss) |
 
 

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-14',
-    sourceCommit: '9a7c9ffa',
+    generatedAt: '2026-04-21',
+    sourceCommit: '0e370dbf',
     docsVersion: '0.1.0',
 };

package/dist/lib/load-markdown.js

@@ -4,7 +4,7 @@ import { fileURLToPath } from 'node:url';
 const __dirname = dirname(fileURLToPath(import.meta.url));
 // スキル Markdown の正本を直接参照（開発・テスト時）
 // npm パッケージとして利用される場合は dist/data/guides/ にフォールバック
-const skillsDir = resolve(__dirname, '..', '..', '..', '..', '.claude', 'skills', 'lism-css-guide');
+const skillsDir = resolve(__dirname, '..', '..', '..', '..', 'skills', 'lism-css-guide');
 const distDir = resolve(__dirname, '..', 'data', 'guides');
 const guidesDir = existsSync(skillsDir) ? skillsDir : distDir;
 const cache = new Map();

package/dist/lib/search.js

@@ -97,7 +97,8 @@ export function searchDocs(entries, query, options) {
 /**
  * `sourcePath`（実 MDX ファイルの相対パス）を公開 URL のスラッグに変換する。
  *
- * - `primitives/` 配下のみファイル名の casing を保持（CSS クラス名と URL を一致させるための例外）
+ * - `primitives/` / `trait-class/` 配下のみファイル名の casing を保持
+ *   （CSS クラス名と URL を一致させるための例外）
  * - それ以外は全て小文字化（Astro content collections の `generateId` と揃える）
  *
  * IMPORTANT: `apps/docs/src/lib/contentSlug.ts` の `toContentSlug` と必ず同じロジックに保つこと。
@@ -105,11 +106,13 @@ export function searchDocs(entries, query, options) {
  * apps/docs 側を変更した場合は必ずここも合わせて更新する。
  *
  * 例:
- *   `primitives/l--tileGrid.mdx`   → `primitives/l--tileGrid`
- *   `core-components/Group.mdx`    → `core-components/group`
- *   `ui/DummyImage.mdx`            → `ui/dummyimage`
+ *   `primitives/l--tileGrid.mdx`    → `primitives/l--tileGrid`
+ *   `trait-class/is--boxLink.mdx`   → `trait-class/is--boxLink`
+ *   `core-components/Group.mdx`     → `core-components/group`
+ *   `ui/DummyText.mdx`              → `ui/dummytext`
  */
+const PRESERVE_CASE_PREFIXES = ['primitives/', 'trait-class/'];
 function sourcePathToUrlSlug(sourcePath) {
     const withoutExt = sourcePath.replace(/\.mdx$/, '');
-    return withoutExt.startsWith('primitives/') ? withoutExt : withoutExt.toLowerCase();
+    return PRESERVE_CASE_PREFIXES.some((prefix) => withoutExt.startsWith(prefix)) ? withoutExt : withoutExt.toLowerCase();
 }

package/dist/tools/get-component.js

@@ -23,18 +23,19 @@ function parsePrimitiveHeading(md) {
         return null;
     return { className: match[1], componentName: match[2] };
 }
+const ALIAS_SOURCE_DIRS = ['primitives/', 'trait-class/'];
 let classAliasMap = null;
 let componentAliasMap = null;
-/** primitives/*.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
- *  angle-bracket 形式の問い合わせ（`<Vertical>` など）には componentAliasMap のみを照合し、
- *  クラス専用プリミティブ（例: is--vertical）を誤ってヒットさせないために分離している。 */
+/** primitives/ および trait-class/ 配下の *.md を走査して、クラス名由来 / React コンポーネント名由来の alias map を構築する（遅延初期化・キャッシュ）。
+ *  angle-bracket 形式の問い合わせには componentAliasMap のみを照合し、
+ *  クラス専用プリミティブへの false positive を避けるために分離している。 */
 function buildAliasMaps() {
     if (classAliasMap && componentAliasMap)
         return;
     const classMap = new Map();
     const componentMap = new Map();
     for (const filename of getGuideFilenames()) {
-        if (!filename.startsWith('primitives/'))
+        if (!ALIAS_SOURCE_DIRS.some((dir) => filename.startsWith(dir)))
             continue;
         const parsed = parsePrimitiveHeading(loadMarkdown(filename));
         if (!parsed)
@@ -78,7 +79,7 @@ export function registerGetComponent(server) {
             const isAngle = isAngleBracketNotation(name);
             // --- 1) lism-css コア: primitives/ の個別ファイルを alias map で解決 ---
             //   angle-bracket 形式 (`<Vertical>`) は React コンポーネント alias のみと照合し、
-            //   クラス専用プリミティブ (is--vertical 等) への false positive を避ける。
+            //   クラス専用プリミティブへの false positive を避ける。
             if (!pkg || pkg === 'lism-css') {
                 const componentHit = getComponentAliasMap().get(normalizedKey);
                 if (componentHit) {
@@ -136,7 +137,7 @@ export function registerGetComponent(server) {
                     for (const [key, file] of map) {
                         if (key.includes(normalizedKey) && !seenFiles.has(file)) {
                             seenFiles.add(file);
-                            moduleCandidates.push(file.replace(/^primitives\//, '').replace(/\.md$/, ''));
+                            moduleCandidates.push(file.replace(new RegExp(`^(${ALIAS_SOURCE_DIRS.join('|')})`), '').replace(/\.md$/, ''));
                         }
                     }
                 }

package/dist/tools/get-guide.js

@@ -14,7 +14,7 @@ const GUIDE_TOPICS = {
         label: 'UI components (Accordion, Modal, Tabs, Button, etc.)',
     },
     'base-styles': { file: 'base-styles.md', label: 'Base styling, reset CSS, HTML element styles' },
-    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--shadow, set--hov, etc.)' },
+    'set-class': { file: 'set-class.md', label: 'Set classes (set--plain, set--var:bxsh, set--var:hov, etc.)' },
     'primitive-class': { file: 'primitive-class.md', label: 'Primitive class prefixes (is--, l--, a--) and Component class (c--)' },
     'utility-class': { file: 'utility-class.md', label: 'Utility classes (u--trim, u--cbox, etc.)' },
     'css-rules': { file: 'css-rules.md', label: 'CSS methodology, layer structure, naming conventions' },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.13.0",
+  "version": "0.15.0",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {
@@ -23,7 +23,7 @@
   "license": "MIT",
   "scripts": {
     "format": "prettier --write . --ignore-path ../../.prettierignore",
-    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../.claude/skills/lism-css-guide dist/data/guides",
+    "build": "tsc -p tsconfig.build.json && cp src/data/docs-index.json dist/data/ && rm -rf dist/data/guides && cp -r ../../skills/lism-css-guide dist/data/guides",
     "dev": "tsc --watch",
     "test": "vitest run"
   }

package/dist/data/guides/primitives/is--vertical.md

@@ -1,52 +0,0 @@
-# is--vertical
-
-要素に縦書きモード（`writing-mode`）を適用するクラス。対応するコンポーネントエイリアスはありません（直接クラス指定で使用）。
-
-## 基本情報
-
-- クラス名: `is--vertical`
-- SCSSソース: https://raw.githubusercontent.com/lism-css/lism-css/main/packages/lism-css/src/scss/primitives/trait/_vertical.scss
-- ドキュメント（人間向け）: https://lism-css.com/docs/primitives/is--vertical/
-
-## クラスバリエーション
-
-縦書き用の値はトークン（`--vertical-mode`）で管理されており、`lang` 属性に合わせて `vertical-rl` / `vertical-lr` を上書きできます。
-
-| クラス名 | 説明 |
-|---------|------|
-| `is--vertical` | 常に縦書きモードにする |
-| `is--vertical@sm` | `sm` サイズ以上で縦書きにする |
-| `is--vertical@md` | `md` サイズ以上で縦書きにする |
-
-**注意**: `is--vertical@sm`, `is--vertical@md` を使う場合は、**`set--bp` クラスを併用する必要があります**。
-
-## Usage
-
-### 常に縦書き
-
-```html
-<div class="is--vertical">
-  <p>縦書きテキスト...</p>
-</div>
-```
-
-### `sm` 以上で縦書きにする
-
-```jsx
-<Flow set="gutter" py="20" w="100%" h="20em" className="is--vertical@sm set--bp">
-  <p>本文テキスト...</p>
-  <p>本文テキスト...</p>
-</Flow>
-```
-
-```html
-<div class="is--vertical@sm set--bp l--flow set--gutter -py:20 -w:100% -h" style="--h: 20em">
-  <p>本文テキスト...</p>
-  <p>本文テキスト...</p>
-</div>
-```
-
-## 関連プリミティブ
-
-- [l--flow](./l--flow.md) — 縦書きコンテンツと組み合わせる記事フロー
-- [is--wrapper](./is--wrapper.md) — コンテンツ幅の制限