npm package: @super_studio/mockup-upload
Description: CLIツール — Cloudflare Access 認証付きで mockup-library にアップロード
Latest version: 1.0.3

# @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 で実行）

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

## 使い方

```bash
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 設定の問題で動作しないケースがあります。

```bash
brew install cloudflared
```

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

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

### CI/CD（Service Token）

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

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

#### GitHub Actions の例

```yaml
- 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）

```bash
# 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 にモックアップを作ってもらいたい場合、プロジェクトルートで以下を実行するとスキルがインストールされます:

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

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

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

```bash
# Claude Code で:

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

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

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

## 要件

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