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 に追加してください：

{
  "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 等）の詳細