@super_studio/mockup-upload

別リポジトリで作成したモックアップを mockup-library に登録するツールです。 Cloudflare Access（Okta SSO）認証付きでアップロード API を呼び出し、 GitHub Actions による認証情報の自動設定パイプラインに乗せます。

どの方法を使うか

| 状況 | 推奨する方法 | |------|------------| | たまにアップロードしたい、管理者権限がない | Web UI（インストール不要） | | GitHub Actions などの CI/CD | CLI + Service Token（cloudflared 不要） | | 開発者、brew が使える | CLI + cloudflared |

Web UI: https://mockup-library.pages.dev/mockup-upload/（Okta ログインのみ、追加インストール不要）

インストール不要（npx で実行）

npx @super_studio/mockup-upload --slug acme-redesign --dir ./dist

使い方

npx @super_studio/mockup-upload --slug <slug> --dir <directory> [options]

オプション

| オプション | 説明 | |-----------|------| | --slug <slug> | 案件スラッグ（半角英小文字・数字・ハイフン、3〜50文字） | | --dir <directory> | アップロードするディレクトリ（index.html を含むこと） | | --base-url <url> | API のベース URL（デフォルト: https://mockup-library.pages.dev） | | --help | ヘルプを表示 |

スラッグのルール

• 半角英小文字・数字・ハイフン（-）のみ
• 先頭と末尾はハイフン不可
• 3〜50 文字
• 例: acme-top-redesign, lp-product-launch-v2

認証

手動（開発者・brew が使える場合）

cloudflared を使って Okta SSO でブラウザ認証します。 初回のみブラウザが開きます。2 回目以降はキャッシュ済みトークンを使用します。

cloudflared のインストール

brew 経由を推奨します。 直接バイナリをダウンロードする方法は macOS の Gatekeeper や PATH 設定の問題で動作しないケースがあります。

brew install cloudflared

brew を使えない・管理者権限がない場合は Web UI を利用してください: https://mockup-library.pages.dev/mockup-upload/（Okta でログインするだけ、追加インストール不要）

# インストール後、実行（ブラウザが開く）
npx @super_studio/mockup-upload --slug acme-redesign --dir ./dist

CI/CD（Service Token）

Cloudflare Access の Service Token を環境変数にセットすると、 ブラウザなしで自動認証されます。

CF_ACCESS_CLIENT_ID=<client-id> \
CF_ACCESS_CLIENT_SECRET=<client-secret> \
  npx @super_studio/mockup-upload --slug acme-redesign --dir ./dist

GitHub Actions の例

- name: Upload mockup
  env:
    CF_ACCESS_CLIENT_ID: ${{ secrets.CF_ACCESS_CLIENT_ID }}
    CF_ACCESS_CLIENT_SECRET: ${{ secrets.CF_ACCESS_CLIENT_SECRET }}
  run: npx @super_studio/mockup-upload --slug acme-redesign --dir ./dist

Service Token のセットアップ（初回のみ）

1. Cloudflare Zero Trust ダッシュボードを開く
2. Access → Service Tokens → Create Service Token
3. 生成された Client ID と Client Secret を控える
4. Access → Applications → /mockup-upload/* アプリを選択
5. Policies → Add a Policy
   • Action: Service Auth
   • Include: Service Token → 先ほど作成したトークンを選択
6. Client ID と Client Secret を CI の環境変数にセット

ローカル開発（wrangler dev）

# 1. wrangler pages dev を起動
wrangler pages dev ./public

# 2. 別ターミナルで CLI を実行（認証スキップ）
npx @super_studio/mockup-upload \
  --slug test-cli-upload \
  --dir ./public/projects/sample-project \
  --base-url http://localhost:8788

ローカル開発サーバー（localhost）では Cloudflare Access ミドルウェアが自動バイパスされるため、 認証なしでアップロードできます。

動作フロー

1. --dir のディレクトリを再帰的に走査してファイルを収集
2. index.html の存在、ファイルサイズ（25 MiB/ファイル、50 MiB 合計）を検証
3. 認証ヘッダーを取得（Service Token または cloudflared）
4. POST /mockup-upload/api/upload に JSON を送信
5. Cloudflare Workers が GitHub Git Data API でコミットを作成
6. GitHub Actions（setup-auth.yml）が起動し、認証情報を自動設定
7. 1〜2 分後に Notion に URL・ID・パスワードが記録される

除外ファイル

以下のファイルは自動的に除外されます:

• __MACOSX/ ディレクトリ配下
• .DS_Store
• Thumbs.db
• ._ で始まるファイル

Claude Code スキルのインストール

別リポジトリで Claude にモックアップを作ってもらいたい場合、プロジェクトルートで以下を実行するとスキルがインストールされます:

npx @super_studio/mockup-upload --init-skill

.claude/skills/mockup-upload/SKILL.md が作成され、Claude Code で /mockup-upload スキルが使えるようになります。

使い方（スキルインストール後）

# Claude Code で:

# モックアップをゼロから作成してアップロード
/mockup-upload LP用のランディングページを作成して acme-lp としてアップロード

# ビルド済み成果物をアップロード
/mockup-upload acme-redesign ./dist

スキルを実行すると、Claude がモックアップ作成ルール（HTML 構成・メタタグ・アセット配置など）に従って作業し、アップロードまで自動で行います。

要件

• Node.js 18 以上
• 手動認証の場合: cloudflared CLI
• 外部依存ゼロ（Node.js 標準ライブラリのみ使用）