open-index/open-npm huggingface dataset:
npm package: @lism-css/cli
Description: CLI for adding Lism UI components to your project
Latest version: 0.1.3

# @lism-css/cli

[Lism UI](https://lism-css.com) のコンポーネントソースをプロジェクトに追加する CLI ツールです。

## 前提条件

- Node.js 18 以上
- `lism-css` がインストール済みであること

```bash
npm install lism-css
# or
pnpm add lism-css
```

## 使い方

### コンポーネントの追加

```bash
pnpm dlx @lism-css/cli add accordion
```

`lism-ui.json` が存在しない場合、対話形式でセットアップが始まります。

```
? フレームワークを選択してください: React
? コンポーネントの出力先ディレクトリ: src/components/ui
? helper の出力先ディレクトリ: src/components/ui/_helper
✔ lism-ui.json を作成しました。

accordion を展開中...
  作成: src/components/ui/Accordion/_style.css
  作成: src/components/ui/Accordion/getProps.js
  ...
```

### 複数コンポーネントを追加

```bash
pnpm dlx @lism-css/cli add accordion modal tabs
```

### 全コンポーネントを追加

```bash
pnpm dlx @lism-css/cli add --all
```

### コンポーネント一覧の確認

```bash
pnpm dlx @lism-css/cli list
```

### 初期設定（init）

`lism-ui.json` を対話形式で生成します。フレームワーク（React / Astro）や出力先ディレクトリを設定できます。

```bash
pnpm dlx @lism-css/cli init
```

`init` を実行しなくても、`add` コマンドの初回実行時に `lism-ui.json` がなければ自動でセットアップが始まります。事前に設定だけ済ませたい場合に使ってください。

## オプション

| オプション | 説明 |
|-----------|------|
| `-o, --overwrite` | 既存ファイルを確認なしで上書き |
| `-a, --all` | 全コンポーネントを追加 |

## 生成されるファイル構成

```
src/components/ui/
├── _helper/
│   ├── animation.ts
│   └── uuid.js
├── Accordion/
│   ├── _style.css
│   ├── getProps.js
│   ├── setAccordion.js
│   ├── script.js
│   └── react/
│       ├── Accordion.jsx
│       ├── AccIcon.jsx
│       └── index.js
└── Modal/
    ├── _style.css
    ├── ...
    └── react/
```

## lism-ui.json

`init` 時に生成される設定ファイルです。

```json
{
  "framework": "react",
  "componentsDir": "src/components/ui",
  "helperDir": "src/components/ui/_helper"
}
```

| フィールド | 説明 |
|-----------|------|
| `framework` | `"react"` または `"astro"` |
| `componentsDir` | コンポーネントの出力先ディレクトリ |
| `helperDir` | helper ファイルの出力先ディレクトリ |

## パッケージが見つからないエラーが出る場合

npm / pnpm の Safe Supply Chain 機能により、公開から間もないパッケージがブロックされる場合があります。

```
No versions available for @lism-css/cli
ℹ Safe-chain: Some package versions were suppressed due to minimum age requirement.
```

`--safe-chain-skip-minimum-package-age` フラグで回避できます。

```bash
# npx の場合
npx --safe-chain-skip-minimum-package-age @lism-css/cli add accordion

# pnpm dlx の場合
pnpm --safe-chain-skip-minimum-package-age dlx @lism-css/cli add accordion
```

この制限はパッケージ公開から一定期間が経過すると自動的に解除されます。

## License

MIT
npm package: @lism-css/mcp
Description: MCP server for lism-css documentation and API reference.
Latest version: 0.12.0

# @lism-css/mcp

[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 Property 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`) |
| `get_guide` | Detailed guide on a specific topic (CSS rules, responsive design, utility classes, module classes, set classes, base styles, etc.) |
| `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 the CSS layer structure work?" → `get_guide(topic: "css-rules")`
- "How does responsive design work?" → `get_guide(topic: "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

```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"]
    }
  }
}
```
npm package: @lism-ui/core
Description: For details, see [Docs](https://lism-ui.com/)
Author: ddryo
Latest version: 0.0.14

## Installation

For details, see [Docs](https://lism-ui.com/)

### 1. Installation

```bash
npm i @lism-ui/core
```

or

```bash
pnpm add @lism-ui/core
```

### 2. Loading CSS

Please import CSS as a global style.

```js
import '@lism-ui/core/css/all.css';
```

(For example, if it is Next.js, load it with `_app.js` or `layout.js`.)

For HTML sites, you can also load CSS via CDN.

```html
<link href="https://cdn.jsdelivr.net/npm/@lism-ui/core/dist/css/all.css" rel="stylesheet" />
```

### 3. Using Components

```jsx
import { Box, Text, ... } from '@lism-ui/core';

// ...
<Box p={20} bgc="base-2">
	<Text fz="l">Lorem ipsum text...</Text>
</Box>
// ...
```

---

## include package

© Phosphor Icons
Website: https://phosphoricons.com/
Source: https://github.com/phosphor-icons
License: MIT License, https://opensource.org/licenses/MIT