create-orelop

Qlio の Web 制作スターター環境をワンコマンドでセットアップする CLI ツール

必要環境

• Node.js >= 22.12.0
• pnpm / npm / yarn のいずれか
• WordPress テンプレートを使う場合: Docker

使い方

npm create orelop@latest
# または
pnpm create orelop@latest
# または
yarn create orelop@latest

対話式の質問に答えるだけで、プロジェクト環境が自動生成されます。

オプション

# プロジェクト名を引数で指定
npm create orelop@latest my-project

# テンプレートを直接指定
npm create orelop@latest --template=static
npm create orelop@latest --template=astro
npm create orelop@latest --template=wp

テンプレート

Static — --template=static

Vite + HTML / CSS / TypeScript による静的サイト開発環境。

• CSS / Sass のどちらでも開発可能
• カスタムメディアクエリ・fluid() 関数が利用可能（VaultCSS 選択時）
• 画像最適化・WebP 自動生成（ビルド時）

Astro — --template=astro

Astro + CSS / TypeScript による静的サイト・コンテンツサイト開発環境。

• Astro コンポーネントベースの開発
• VaultCSS / Tailwind CSS v4 / Sass に対応

WordPress — --template=wp

Vite + PHP / wp-env による WordPress テーマ開発環境。

• Docker 不要で WordPress 環境を即構築（wp-env）
• PHP ファイルの HMR 対応（vite-plugin-php-loader）
• ビルド時に CSS / JS のパスを自動書き換え

CSS の選択（複数選択可）

セットアップ時に以下から複数選択できます。

| 選択肢 | 内容 | |--------|------| | VaultCSS | lightningcss ベースの CSS フレームワーク。fluid() / カスタムメディアクエリ付き | | Tailwind CSS v4 | Tailwind CSS v4 を追加。VaultCSS との共存も可能 | | Sass | Sass（sass-embedded）を追加。glob import 対応 |

JS ライブラリの選択（複数選択可）

| 選択肢 | パッケージ | |--------|-----------| | vaultscript | vaultscript | | GSAP | gsap | | Lenis | lenis | | Splide | @splidejs/splide | | Rola | @hilosiva/rola | | htmx | htmx.org | | Alpine.js | alpinejs + @types/alpinejs |

MCP サーバー

セットアップ時に「Claude Code 用 MCP サーバーを設定しますか？」を選択すると、 プロジェクトに .mcp.json が生成され、以下の MCP サーバーが自動設定されます。

• orelop — Orelop ドキュメント参照用
• configs — @hilosiva/configs ドキュメント参照用
• vaultcss — VaultCSS 選択時のみ
• vite-plugins — @hilosiva/vite-plugin-* 使用時のみ
• lightningcss-plugins — lightningcss プラグイン使用時のみ

ライセンス

MIT License