@lism-css/mcp 0.10.1 → 0.10.2

package/README.ja.md

@@ -0,0 +1,84 @@
+# @lism-css/mcp
+
+[English](./README.md) | [日本語](./README.ja.md)
+
+[Lism CSS](https://lism-css.com) の [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) サーバーです。
+AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメント・API を正確に参照できるようにします。
+
+## 利用可能なツール
+
+| ツール | 説明 |
+|--------|------|
+| `get_overview` | フレームワークの全体像（アーキテクチャ、設計思想、パッケージ構成、ブレークポイント、インストール方法、CSS Layers） |
+| `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）の一覧・カテゴリ絞り込み |
+| `get_props_system` | Props システム対応表 — React/Astro の props が CSS クラス・スタイルにどう変換されるか。CSS プロパティ名での逆引き（例: `padding` → `p`）や Prop Class 記法（`-g:5` 等）にも対応 |
+| `get_component` | コンポーネント詳細（props、使用例、サブコンポーネント構成）。パッケージ（`lism-css` / `@lism-css/ui`）での絞り込みも可能 |
+| `search_docs` | ドキュメント全文検索（スコアリング付き）。カテゴリ絞り込みや CSS プロパティ名の自動展開に対応 |
+| `convert_css` | CSS コードを Lism CSS の props・コンポーネントに変換。既存 CSS から Lism CSS への移行に便利 |
+
+## 聞けること（例）
+
+- 「Lism CSS の基本的なアーキテクチャを教えて」→ `get_overview`
+- 「spacing トークンの一覧を見せて」→ `get_tokens(category: "spacing")`
+- 「`p` や `fz` などの省略 props は何に対応している？」→ `get_props_system(prop: "p")`
+- 「`-g:5` ってどういうクラス？」→ `get_props_system(prop: "-g:5")`
+- 「`fz` に対応する CSS プロパティは？」→ `get_props_system(prop: "font-size")`
+- 「Accordion コンポーネントの使い方は？」→ `get_component(name: "Accordion")`
+- 「UI コンポーネントだけ見たい」→ `get_component(name: "Accordion", package: "@lism-css/ui")`
+- 「レスポンシブ対応の方法を調べて」→ `search_docs(query: "レスポンシブ")`
+- 「ガイドだけ検索」→ `search_docs(query: "レスポンシブ", category: "guide")`
+- 「`display: flex; gap: 1rem;` を Lism に変換して」→ `convert_css(css: "display: flex; gap: 1rem;")`
+
+## セットアップ
+
+### Claude Code
+
+```bash
+claude mcp add lism-css -- npx -y @lism-css/mcp
+```
+
+### Cursor
+
+`.cursor/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "lism-css": {
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+### Windsurf
+
+`.windsurf/mcp.json`:
+
+```json
+{
+  "mcpServers": {
+    "lism-css": {
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```
+
+### VS Code (GitHub Copilot)
+
+`.vscode/mcp.json`:
+
+```json
+{
+  "servers": {
+    "lism-css": {
+      "type": "stdio",
+      "command": "npx",
+      "args": ["-y", "@lism-css/mcp"]
+    }
+  }
+}
+```

package/README.md

@@ -1,28 +1,35 @@
 # @lism-css/mcp
 
-[Lism CSS](https://lism-css.com) の [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) サーバーです。
-AI ツール（Claude Code, Cursor 等）が Lism CSS の最新ドキュメント・API を正確に参照できるようにします。
-
-## できること
-
-| ツール | 説明 |
-|--------|------|
-| `get_overview` | フレームワークの全体像（アーキテクチャ、CSS Layers、パッケージ構成、インストール方法） |
-| `get_tokens` | デザイントークン（色、余白、フォントサイズ、影、角丸など）の一覧・カテゴリ絞り込み |
-| `get_props_system` | Props システム対応表（React props → CSS クラス/スタイルの変換ルール）。Prop Class 記法（`-g:5` 等）での逆引きにも対応 |
-| `get_component` | コンポーネント詳細（props、使い方、サブコンポーネント構成） |
-| `search_docs` | ドキュメント全文検索（キーワードによるスコアリング付き）。Prop Class 記法（`-g:5`）や CSS プロパティ名（`font-size`）も自動展開して検索 |
-
-## 聞けること（例）
-
-- 「Lism CSS の基本的なアーキテクチャを教えて」→ `get_overview`
-- 「spacing トークンの一覧を見せて」→ `get_tokens(category: "spacing")`
-- 「`p` や `fz` などの省略 props は何に対応している？」→ `get_props_system(prop: "p")`
-- 「`-g:5` ってどういうクラス？」→ `get_props_system(prop: "-g:5")`
-- 「Accordion コンポーネントの使い方は？」→ `get_component(name: "Accordion")`
-- 「レスポンシブ対応の方法を調べて」→ `search_docs(query: "レスポンシブ")`
-
-## セットアップ
+[English](./README.md) | [日本語](./README.ja.md)
+
+An [MCP (Model Context Protocol)](https://modelcontextprotocol.io/) server for [Lism CSS](https://lism-css.com).
+Enables AI tools (Claude Code, Cursor, etc.) to accurately reference the latest Lism CSS documentation and API.
+
+## Available Tools
+
+| Tool | Description |
+|------|-------------|
+| `get_overview` | Framework overview (architecture, design philosophy, packages, breakpoints, installation guide, CSS Layers) |
+| `get_tokens` | List and filter design tokens (colors, spacing, font sizes, shadows, radii, etc.) |
+| `get_props_system` | Props system reference — how React/Astro props map to CSS classes and styles. Supports reverse lookup by CSS property name (e.g. `padding` → `p`) and Prop Class notation (e.g. `-g:5`) |
+| `get_component` | Component details (props, usage examples, sub-component structure). Optionally filter by package (`lism-css` or `@lism-css/ui`) |
+| `search_docs` | Full-text documentation search with relevance scoring. Supports category filtering and CSS property name expansion |
+| `convert_css` | Convert CSS code to lism-css props and component suggestions. Useful for migrating existing CSS to Lism CSS |
+
+## Example Queries
+
+- "What is the basic architecture of Lism CSS?" → `get_overview`
+- "Show me the spacing tokens" → `get_tokens(category: "spacing")`
+- "What do shorthand props like `p` or `fz` map to?" → `get_props_system(prop: "p")`
+- "What does the class `-g:5` mean?" → `get_props_system(prop: "-g:5")`
+- "What CSS property does `fz` correspond to?" → `get_props_system(prop: "font-size")`
+- "How do I use the Accordion component?" → `get_component(name: "Accordion")`
+- "Show me only UI components" → `get_component(name: "Accordion", package: "@lism-css/ui")`
+- "How does responsive design work?" → `search_docs(query: "responsive")`
+- "Search only guide docs" → `search_docs(query: "responsive", category: "guide")`
+- "Convert `display: flex; gap: 1rem;` to Lism" → `convert_css(css: "display: flex; gap: 1rem;")`
+
+## Setup
 
 ### Claude Code
 

package/dist/data/components.json

@@ -197,7 +197,7 @@
     "category": "layout",
     "description": "コンテンツフロー用のレイアウト。display:flow-rootで、子要素間に一定の余白を管理する。記事本文のような縦方向のフローコンテンツに適している。見出しタグは余白が2倍になる。",
     "aliases": ["content flow", "記事本文", "本文レイアウト", "article body", "縦方向余白"],
-    "props": [{ "name": "flow", "type": "'s' | string", "description": "フロー方向の余白サイズ。's'で小さい余白。" }],
+    "props": [{ "name": "flow", "type": "'s' | 'l' | string", "description": "フロー方向の余白サイズ。's'で小さい余白、'l'で大きい余白。" }],
     "usage": "<Flow flow='s'>...</Flow>"
   },
   {

package/dist/data/docs-index.json

@@ -134,7 +134,7 @@
     "title": "Typography & Spacing",
     "description": "Lism CSS で使用するフォントやスペーシングに関するデザイントークンについて解説します。",
     "category": "guide",
-    "headings": ["Typography", "SPACE: 余白のスケーリング"],
+    "headings": ["Typography", "`SPACE`: 余白のスケーリング"],
     "keywords": ["typography", "タイポグラフィ", "font", "文字", "テキスト", "heading", "spacing", "余白", "スペーシング", "フィボナッチ"],
     "snippet": "フォントサイズ、行間、文字間隔などのタイポグラフィ設計と、フィボナッチ数列に基づいた余白のスケーリングについて解説。ハーフレディングによるline-height管理の仕組みを紹介。"
   },
@@ -152,7 +152,7 @@
     "title": "Customize",
     "description": "SCSS変数の上書きや@layerの切り替えなど、Lism CSS をカスタマイズする方法について解説します。",
     "category": "guide",
-    "headings": ["@layerをオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
+    "headings": ["`@layer`をオフにする", "SCSS でのカスタマイズ", "lism.config.js でのカスタマイズ"],
     "keywords": ["customize", "カスタマイズ", "設定", "config", "テーマ", "theme", "SCSS"],
     "snippet": "Lism CSS のトークンやスタイルのカスタマイズ方法について解説。SCSSの変数上書きやlism.config.jsでのコンポーネント挙動のカスタマイズが可能。"
   },
@@ -221,6 +221,7 @@
     "description": "Lism CSS の各バージョンにおける変更履歴をまとめています。",
     "category": "guide",
     "headings": [
+      "v.0.10.2 (2026.04.04)",
       "v.0.10.1 (2026.04.03)",
       "lism-css v.0.9.4 (2026.03.31)",
       "@lism-css/ui v.0.9.3 (2026.03.30)",
@@ -246,7 +247,7 @@
     "title": "-bd",
     "description": "ボーダーを指定する -bd プロパティクラスと関連するCSS変数の使い方について解説します。",
     "category": "props",
-    "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意のborderをインライン出力する方法"],
+    "headings": ["方向指定", "bdwをブレイクポイントで切り替える", "任意の`border`をインライン出力する方法"],
     "keywords": ["border", "ボーダー", "bd", "bdc", "bdw", "bds", "bdrs", "枠線", "border-color", "border-width", "border-style", "border-radius"],
     "snippet": "ボーダー関連のProp。bd, bdc, bdw, bds, bdrs を使ったボーダースタイルの設定方法。方向指定やブレイクポイントでの切り替えも解説。"
   },
@@ -255,7 +256,7 @@
     "title": "-hov",
     "description": "hover時の挙動をコントロールする -hov プロパティクラスの使い方について解説します。",
     "category": "props",
-    "headings": ["基本的な使い方", ".set--hov と特殊変数"],
+    "headings": ["基本的な使い方", "`.set--hov` と特殊変数"],
     "keywords": ["hover", "ホバー", "hov", "インタラクション", "animation", "set--hov", "set--transition", "transition"],
     "snippet": "ホバー関連のProp。hov を使ったホバーエフェクトの設定方法。set--hovとset--transitionの活用、子要素へのホバー状態伝播を解説。"
   },
@@ -464,7 +465,7 @@
     "title": "SideMain / l--sideMain",
     "description": "Lism CSS の SideMain モジュールについて解説します。メディアクエリ不要でサイドとメインの2カラムレイアウトを構築します。",
     "category": "modules",
-    "headings": ["基本構造", "CSS", "Import", "Props", "Usage", "Gridを使って似たレイアウトを構成する例"],
+    "headings": ["基本構造", "CSS", "Import", "Props", "Usage", "`Grid`を使って似たレイアウトを構成する例"],
     "keywords": ["SideMain", "サイドバー", "sidebar", "メイン", "l--sideMain", "2カラム", "is--side"],
     "snippet": "サイドバー + メインコンテンツの2カラムレイアウト。メイン側が可変幅。sideW, mainWで幅を制御。fxd='row-r'で反転も可能。"
   },

package/dist/data/meta.js

@@ -1,5 +1,5 @@
 export const meta = {
-    generatedAt: '2026-04-03',
-    sourceCommit: 'b2425799',
+    generatedAt: '2026-04-04',
+    sourceCommit: 'da8cfdb9',
     docsVersion: '0.1.0',
 };

package/dist/data/overview.json

@@ -6,7 +6,7 @@
       "name": "lism-css",
       "npmName": "lism-css",
       "description": "コアCSSフレームワーク。レイアウトモジュール、デザイントークン、Prop Class、React/Astroコンポーネントを提供。",
-      "version": "0.10.1"
+      "version": "0.10.2"
     },
     {
       "name": "lism-ui",
@@ -20,7 +20,7 @@
     "md": "800px (container query)",
     "lg": "1120px (container query, 要カスタマイズ)"
   },
-  "installation": "## CSSのみ (CDN)\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/lism-css@0.10.1/dist/css/main.css\" rel=\"stylesheet\" />\n```\n\n## npm パッケージ\n```bash\nnpm i lism-css\n# UI コンポーネントも使う場合\nnpm i @lism-css/ui\n```\n\n## CSS読み込み\n```js\nimport 'lism-css/main.css';\n// UI コンポーネントのCSS\nimport '@lism-css/ui/style.css';\n```\n\n## コンポーネント読み込み\n```jsx\n// React\nimport { Box, Flex, Stack } from 'lism-css/react';\nimport { Accordion, Modal } from '@lism-css/ui/react';\n\n// Astro\nimport { Box, Flex, Stack } from 'lism-css/astro';\nimport { Accordion, Modal } from '@lism-css/ui/astro';\n```\n\n## Astro での注意\n.astroファイルをnode_modules内から直接読み込めない場合、astro.config.jsのvite.ssr.noExternalに\"lism-css\"を追加してください。",
+  "installation": "## CSSのみ (CDN)\n```html\n<link href=\"https://cdn.jsdelivr.net/npm/lism-css@0.10.2/dist/css/main.css\" rel=\"stylesheet\" />\n```\n\n## npm パッケージ\n```bash\nnpm i lism-css\n# UI コンポーネントも使う場合\nnpm i @lism-css/ui\n```\n\n## CSS読み込み\n```js\nimport 'lism-css/main.css';\n// UI コンポーネントのCSS\nimport '@lism-css/ui/style.css';\n```\n\n## コンポーネント読み込み\n```jsx\n// React\nimport { Box, Flex, Stack } from 'lism-css/react';\nimport { Accordion, Modal } from '@lism-css/ui/react';\n\n// Astro\nimport { Box, Flex, Stack } from 'lism-css/astro';\nimport { Accordion, Modal } from '@lism-css/ui/astro';\n```\n\n## Astro での注意\n.astroファイルをnode_modules内から直接読み込めない場合、astro.config.jsのvite.ssr.noExternalに\"lism-css\"を追加してください。",
   "cssLayers": "Settings → @lism-base → @lism-modules(.is--, .l--, .a--, .c--) → @lism-utility(.u--) → @lism-custom → Prop Class(レイヤー外)。標準でsm,mdまでサポート、lg以降はSCSSカスタマイズが必要。",
   "classNaming": {
     "setClass": ".set--{style} (例: .set--plain, .set--transition) - @lism-base層で定義されるベーススタイル上書き・トークン再定義用クラス",

package/dist/data/tokens.json

@@ -26,8 +26,7 @@
       { "name": "--pink", "value": "oklch(calc(var(--L) + 2%) calc(var(--C) + 0.02) 348)" },
       { "name": "--gray", "value": "oklch(calc(var(--L) - 4%) 0.04 256)" },
       { "name": "--black", "value": "#000" },
-      { "name": "--white", "value": "#fff" },
-      { "name": "--keycolor", "value": "コンポーネントごとのキーカラー" }
+      { "name": "--white", "value": "#fff" }
     ]
   },
   {
@@ -95,6 +94,27 @@
       { "name": "--ff--mono", "value": "ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace", "description": "モノスペースフォント" }
     ]
   },
+  {
+    "category": "fontWeight",
+    "description": "フォントウェイトトークン。CSS変数名は --fw--{値}。",
+    "tokens": [
+      { "name": "--fw--thin", "value": "100", "description": "極細" },
+      { "name": "--fw--light", "value": "300", "description": "細め" },
+      { "name": "--fw--normal", "value": "400", "description": "標準" },
+      { "name": "--fw--medium", "value": "500", "description": "中太" },
+      { "name": "--fw--bold", "value": "700", "description": "太字" },
+      { "name": "--fw--black", "value": "900", "description": "最太" }
+    ]
+  },
+  {
+    "category": "opacity",
+    "description": "不透明度トークン。CSS変数名は --o--{値}。値はマイナス表記（n10 = -10）。",
+    "tokens": [
+      { "name": "--o--n10", "value": "0.75", "description": "75%の不透明度" },
+      { "name": "--o--n20", "value": "0.5", "description": "50%の不透明度" },
+      { "name": "--o--n30", "value": "0.25", "description": "25%の不透明度" }
+    ]
+  },
   {
     "category": "radius",
     "description": "角丸トークン。CSS変数名は --bdrs--{値}。段階的に値が大きくなる。",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lism-css/mcp",
-  "version": "0.10.1",
+  "version": "0.10.2",
   "description": "MCP server for lism-css documentation and API reference.",
   "type": "module",
   "bin": {