HTML レポートスキル 社内配布手順書

1新規 Git リポジトリを作成 Claude or 手動

GitHub（または社内 GitLab）で新規リポジトリを作成します。名前は分かりやすく:

Private でも Public でも可。社員配布だけなら Private で問題ありません。

ローカルにクローンします:

git clone https://github.com/snowmole/snowmole-claude-plugin.git
cd snowmole-claude-plugin

2プラグインのディレクトリ構造を作成 🤖 Claude 可

💡 ここから先（サブステップ 2〜10）は上の「まとめてお任せプロンプト」で一括実行できます。以下は個別に確認したい / 手動でやりたい場合のリファレンスです。

以下の構造を作ります:

コマンドで一気に作成:

mkdir -p .claude-plugin skills/html-report scripts
touch .claude-plugin/plugin.json
touch skills/html-report/deploy.md
touch scripts/setup.ps1 scripts/setup.sh
touch README.md LICENSE

3プラグインマニフェストを配置 🤖 Claude 可

.claude-plugin/plugin.json に以下を書きます:

{
  "name": "snowmole-html-report",
  "version": "1.0.0",
  "description": "snowmole 社内向け HTML レポート生成スキル + Cloudflare Pages 自動デプロイ",
  "author": "snowmole.co.jp",
  "license": "MIT",
  "skills": [
    {
      "name": "html-report",
      "path": "skills/html-report"
    }
  ]
}

4既存のスキルファイルをコピー 🤖 Claude 可

管理者の PC 上で、既存のスキルをプラグインリポジトリへコピー:

# macOS / Linux
cp ~/ClaudeCode/.claude/skills/html-report/*.md \
   skills/html-report/

# Windows (PowerShell)
Copy-Item "$HOME\ClaudeCode\.claude\skills\html-report\*.md" `
          ".\skills\html-report\"

コピー対象: SKILL.md, design-system.md, components.md

5Cloudflare API トークンを発行 🖐 手動のみ

社員全員が同じ Cloudflare アカウントにデプロイできるよう、共有 API トークンを発行します。

1. 「Create Token」をクリック
2. テンプレート一覧から「Custom token」→「Get started」
3. 以下の Permission を 2 つ追加:
   • Account → Cloudflare Pages → Edit
   • User → User Details → Read
4. Account Resources → 対象アカウント（snowmole.co.jp）を選択
5. 有効期限: 1 年推奨（更新ルール決めておく）
6. 「Continue to summary」→「Create Token」
7. 表示されたトークン文字列をコピーして安全な場所に保存（再表示不可）

6スキルに Cloudflare デプロイ機能を追加 🤖 Claude 可

skills/html-report/deploy.md を作成し、以下を書きます:

# Cloudflare Pages 自動デプロイ

HTML ファイル生成後に、ユーザーが「公開して」「共有リンクを」「デプロイして」等
と言ったら、自動で Cloudflare Pages にデプロイして URL を返す。

## 前提条件

- 環境変数 `CLOUDFLARE_API_TOKEN` が設定されていること
- Node.js 18+ が使えること
- `npx wrangler` が実行できること

## デプロイワークフロー

### 1. プロジェクト名を決定

HTML ファイル名からスラッグ化する。例:
- `customer-onboarding-setup.html` → プロジェクト名 `customer-onboarding-setup`
- 日本語ファイル名は英数字にローマ字変換またはハッシュ化

### 2. Cloudflare Pages プロジェクト作成（初回のみ）

```bash
npx wrangler pages project create <project-name> \
  --production-branch=main
```

既に存在する場合はエラーを無視して次へ。

### 3. ファイルをデプロイ

HTML ファイルを `index.html` にコピー or リネームしてから:

```bash
npx wrangler pages deploy <dir> \
  --project-name=<project-name> \
  --branch=main \
  --commit-dirty=true
```

### 4. URL を返却

デプロイ完了時、以下の URL でアクセス可能:

- `https://<project-name>.pages.dev/`

ユーザーに絶対 URL と「カスタムドメインを設定したい場合は別途手順書参照」を案内。

## 認証の確認

デプロイ前に `CLOUDFLARE_API_TOKEN` が設定されているか確認:

```bash
echo $CLOUDFLARE_API_TOKEN
# Windows: echo $env:CLOUDFLARE_API_TOKEN
```

未設定の場合はデプロイせず、以下を案内:

> Cloudflare API トークンが未設定です。管理者から受け取ったトークンを
> 環境変数 `CLOUDFLARE_API_TOKEN` に設定してください。
> 詳細: scripts/setup.sh または setup.ps1 を実行

## エラー時の挙動

- 認証失敗 (401): トークン期限切れ or 権限不足の可能性。管理者に連絡
- プロジェクト名重複: 別名を自動で生成して再試行
- ネットワークエラー: 3 回まで自動リトライ

7SKILL.md にデプロイ参照を追記 🤖 Claude 可

既存の SKILL.md の Step 8（完了後の案内）の直後に以下セクションを追加:

### Step 9. Cloudflare Pages への自動デプロイ（オプション）

ユーザーが「公開して」「共有リンクを」「デプロイして」「URL ください」等と
言った場合、`deploy.md` の手順に従って Cloudflare Pages に自動デプロイする。

- デプロイ前に `CLOUDFLARE_API_TOKEN` の有無を確認
- プロジェクト名は HTML ファイル名から自動生成
- 完了後、絶対 URL をユーザーに返す
- カスタムドメイン化は別手順書を参照案内

8セットアップスクリプトを作成 🤖 Claude 可

社員が 1 コマンドで完了できるように、OS 別のブートストラップを用意します。

scripts/setup.sh （macOS / Linux）:

#!/usr/bin/env bash
set -e

echo "🚀 snowmole Claude プラグインをセットアップします..."

# 1. Node.js 確認
if ! command -v node >/dev/null 2>&1; then
  echo "❌ Node.js が見つかりません。https://nodejs.org からインストールしてください。"
  exit 1
fi

# 2. Claude Code 確認
if ! command -v claude >/dev/null 2>&1; then
  echo "❌ Claude Code CLI が見つかりません。先にインストールしてください。"
  exit 1
fi

# 3. プラグインを追加
echo "📦 プラグインをインストール中..."
claude plugin add https://github.com/snowmole/snowmole-claude-plugin.git

# 4. Cloudflare API トークンを設定
if [ -z "$CLOUDFLARE_API_TOKEN" ]; then
  echo ""
  echo "🔑 Cloudflare API トークンを入力してください"
  echo "（管理者から受け取ったもの）"
  read -s -p "トークン: " token
  echo ""

  # シェル設定ファイルに追記
  SHELL_RC="$HOME/.bashrc"
  [ -n "$ZSH_VERSION" ] && SHELL_RC="$HOME/.zshrc"

  echo "" >> "$SHELL_RC"
  echo "# snowmole Claude plugin" >> "$SHELL_RC"
  echo "export CLOUDFLARE_API_TOKEN=\"$token\"" >> "$SHELL_RC"

  echo "✅ トークンを $SHELL_RC に保存しました"
  echo "⚠  新しいターミナルを開いて反映してください"
else
  echo "✅ CLOUDFLARE_API_TOKEN は既に設定されています"
fi

echo ""
echo "🎉 セットアップ完了！"
echo ""
echo "使い方: Claude Code セッション内で以下を試してみてください:"
echo "  「テスト用の HTML を作って公開して」"

scripts/setup.ps1 （Windows）:

# snowmole Claude Plugin Setup (Windows)

Write-Host "🚀 snowmole Claude プラグインをセットアップします..." -ForegroundColor Cyan

# 1. Node.js 確認
if (-not (Get-Command node -ErrorAction SilentlyContinue)) {
    Write-Host "❌ Node.js が見つかりません。https://nodejs.org からインストールしてください。" -ForegroundColor Red
    exit 1
}

# 2. Claude Code 確認
if (-not (Get-Command claude -ErrorAction SilentlyContinue)) {
    Write-Host "❌ Claude Code CLI が見つかりません。" -ForegroundColor Red
    exit 1
}

# 3. プラグインを追加
Write-Host "📦 プラグインをインストール中..."
claude plugin add https://github.com/snowmole/snowmole-claude-plugin.git

# 4. Cloudflare API トークンを設定
if (-not $env:CLOUDFLARE_API_TOKEN) {
    Write-Host ""
    Write-Host "🔑 Cloudflare API トークンを入力してください" -ForegroundColor Yellow
    Write-Host "（管理者から受け取ったもの）"
    $token = Read-Host -AsSecureString "トークン"
    $plainToken = [System.Net.NetworkCredential]::new("", $token).Password

    # ユーザー環境変数として永続化
    [Environment]::SetEnvironmentVariable("CLOUDFLARE_API_TOKEN", $plainToken, "User")

    Write-Host "✅ トークンをユーザー環境変数に保存しました" -ForegroundColor Green
    Write-Host "⚠  新しい PowerShell ウィンドウを開いて反映してください" -ForegroundColor Yellow
} else {
    Write-Host "✅ CLOUDFLARE_API_TOKEN は既に設定されています" -ForegroundColor Green
}

Write-Host ""
Write-Host "🎉 セットアップ完了！" -ForegroundColor Green
Write-Host ""
Write-Host "使い方: Claude Code セッション内で以下を試してみてください:"
Write-Host "  「テスト用の HTML を作って公開して」"

9README.md を整備 🤖 Claude 可

README.md に社員向けのセットアップ案内を書きます:

# snowmole Claude Plugin

snowmole 社内向け Claude Code プラグイン。
HTML レポート生成 + Cloudflare Pages 自動デプロイを統合。

## クイックセットアップ（社員向け）

### macOS / Linux

```bash
curl -sL https://raw.githubusercontent.com/snowmole/snowmole-claude-plugin/main/scripts/setup.sh | bash
```

### Windows (PowerShell)

```powershell
iwr -useb https://raw.githubusercontent.com/snowmole/snowmole-claude-plugin/main/scripts/setup.ps1 | iex
```

セットアップ中に Cloudflare API トークンの入力を求められます。管理者
（@admin）から受け取ったトークンを入力してください。

## 使い方

Claude Code セッションで以下のように話しかけるだけ:

- 「顧客オンボーディング手順書を HTML で作って公開して」
- 「Q3 の振り返りレポートを HTML にして共有リンクを」
- 「この内容を手順書として配布できる形に」

→ 自動で HTML 生成 + Cloudflare Pages デプロイ + URL 返却

## 前提条件

- Node.js 18+
- Claude Code CLI
- Git

## プラグインの更新

```bash
claude plugin update snowmole-html-report
```

## 質問・不具合

Slack #claude-plugin チャンネル、または GitHub Issues で連絡してください。

10GitHub にプッシュ 🤖 Claude 可

git add .
git commit -m "Initial plugin setup with html-report skill and Cloudflare auto-deploy"
git push origin main

プッシュ完了したら、リポジトリ URL を社員に共有します（Slack の固定メッセージ or 社内 Wiki）。

11社員への案内メッセージを準備 🤖 Claude 可

以下のテンプレを使って社内 Slack や社内 Wiki に投稿:

1前提環境を確認 🤖 Claude 可

ターミナル（Windows なら PowerShell）を開いて以下を実行:

node --version
git --version
claude --version

全て何かしらバージョン番号が表示されれば OK。1 つでもエラーなら:

• Node.js: nodejs.org から v18 以上を入れる
• Git: git-scm.com からインストール
• Claude Code: 社内 IT 担当に確認

21 コマンドでセットアップ 🖐 手動実行

💡 トークン入力が対話的なので、このコマンドは自分のターミナルで実行してください（Claude には任せない）。

OS に合わせて以下をターミナルで実行:

macOS / Linux:

Windows (PowerShell):

スクリプトが実行されると、以下が自動で起きます:

1. 前提環境の確認
2. プラグインのインストール
3. Cloudflare API トークンの入力を求められる → 管理者から受け取ったトークンを貼り付け
4. 環境変数として永続化

3新しいターミナルを開く

環境変数を反映させるため、ターミナルを一度閉じて新しく開き直します。

4トークンが読めているか確認 🤖 Claude 可

# macOS / Linux
echo $CLOUDFLARE_API_TOKEN

# Windows
echo $env:CLOUDFLARE_API_TOKEN

トークン文字列が表示されれば OK。空行なら再ログインやシェル設定を確認。

1Claude Code を起動

claude

セッション内で /help または利用可能スキル一覧を確認。html-report が表示されれば成功。

2テスト生成

以下のようなフレーズを Claude に投げます:

Claude は以下を自動で実行します:

1. html-report スキルが起動
2. Hard Gate 6 要素を満たす HTML 生成
3. Cloudflare Pages に自動デプロイ
4. 共有 URL を返却

3URL を開いて確認

返却された URL をブラウザで開いて以下を確認:

• 左サイドバー TOC が動く
• 「現状 vs ありたい姿」の Before/After 切替が動く
• コピーボタンが動く
• モバイル幅でも崩れない

正常に動作すれば、以降は自由に使えます。例:

• 「顧客オンボーディングの手順書を作って公開して」
• 「Q3 の振り返りレポートを HTML にまとめて共有リンクを」
• 「新人向け Slack マナーガイドを配布可能な形にして」