# orelop-mcp

Claude Code 用の MCP サーバーです。Orelop プロジェクトのディレクトリ構成・npm scripts・CSS/JS 開発ガイドを Claude が直接参照できるようにします。

## 対応テンプレート

- **Static** — Vite + HTML/CSS/TS による静的サイト
- **Astro** — Astro + CSS/TS による静的サイト
- **WordPress** — Vite + PHP + wp-env による WordPress テーマ

プロジェクトのファイル構成（`astro.config.ts` / `.wp-env.json` の有無）から自動でテンプレートを検出し、該当テンプレートの情報のみ提供します。

## インストール

`create-orelop` でプロジェクトを作成する際に MCP サーバーの設定を選択すると、自動的に `.mcp.json` に追加されます。

手動でセットアップする場合は `.mcp.json` に追加してください：

```json
{
  "mcpServers": {
    "orelop": {
      "command": "npx",
      "args": ["-y", "orelop-mcp"]
    }
  }
}
```

## 提供ツール

### 共通（全テンプレート）

| ツール名 | 内容 |
|---------|------|
| `get_orelop_overview` | Orelop の概要・テンプレート一覧・インストール方法 |
| `get_orelop_js_libraries` | CLI で選択できる JS ライブラリ（GSAP / Lenis / Splide / Rola / htmx / Alpine.js）の概要と基本的な使い方 |

### Static

| ツール名 | 内容 |
|---------|------|
| `get_orelop_directory` | ディレクトリ構成・各ファイルの役割 |
| `get_orelop_scripts` | npm scripts 一覧（dev / build / preview） |
| `get_orelop_css_guide` | CSS 開発ガイド（エントリーポイント・ネスティング・@import・@ エイリアス） |
| `get_orelop_image_guide` | 画像の使い方（HTML/CSS/JS でのパス・WebP/AVIF 自動生成） |
| `get_orelop_js_guide` | JS 開発ガイド（main.ts エントリー・ライブラリ import・モジュール分割） |
| `remove_start_page` | スタートページを削除（destructive） |

### Astro

| ツール名 | 内容 |
|---------|------|
| `get_orelop_directory` | ディレクトリ構成・各ファイルの役割 |
| `get_orelop_scripts` | npm scripts 一覧（dev / build / preview） |
| `get_orelop_css_guide` | CSS 開発ガイド（Layout.astro での import・ネスティング・@import） |
| `get_orelop_alias_guide` | エイリアス一覧（`@src` / `@layouts` / `@components` / `@assets` / `@styles` / `@`） |
| `get_orelop_image_guide` | 画像の使い方（`<Picture>` / `<Image>` / `img`・CSS パス） |
| `get_orelop_config_guide` | `src/config.ts` の使い方（SITE / COMPANY / SNS） |
| `get_orelop_js_guide` | JS 開発ガイド（`.astro` 内 `<script>`・`is:inline`・`define:vars`・View Transitions 対応） |
| `remove_start_page` | スタートページを削除（destructive） |

### WordPress

| ツール名 | 内容 |
|---------|------|
| `get_orelop_directory` | ディレクトリ構成・ViteHelper.php の役割・public/ の注意点 |
| `get_orelop_scripts` | npm scripts 一覧（dev / build / wp:stop / wp:destroy / wp:export 等） |
| `get_orelop_css_guide` | CSS 開発ガイド（main.js からの import・ネスティング・@import） |
| `get_orelop_vitehelper_guide` | ViteHelper.php の役割・`THEME_URL` と `ViteHelper::PUBLIC_URL` の違い |
| `get_orelop_image_guide` | 画像の使い方（PHP での URL 解決・メディアライブラリ・CSS エイリアス） |
| `get_orelop_wpenv_guide` | wp-env の構成・`plugins/` `uploads/` `sql/` の役割・ログイン情報 |
| `get_orelop_deploy_guide` | デプロイ手順・SQL エクスポート/インポート・本番 URL 置き換え |
| `get_orelop_js_guide` | JS 開発ガイド（main.js エントリー・CSS も main.js から import・モジュール分割） |
| `remove_start_page` | スタートページを削除（destructive） |

## 関連 MCP

- **vaultcss-mcp** — vaultcss の設定・fluid() 関数・カスタムメディアクエリ・vaultscript
- **lightningcss-plugins-mcp** — lightningcss プラグイン（fluid 等）の詳細