--- name: naoya-setup description: Claude Code 環境セットアップウィザード。非エンジニア向けにプラグイン・外部サービス・CLAUDE.mdを一括セットアップする。/naoya-setup で実行、/naoya-setup YYYY/MM/DD-YYYY/MM/DD で有効期限を変更。 --- # Claude Code 環境セットアップウィザード 非エンジニアの方がClaude Code開発環境を完全にセットアップするためのステップバイステップガイドです。 ## アクセス制御（最優先で実行） このコマンドは引数の有無で動作が分岐する。 ### 引数パターン: 日付変更モード 引数が `YYYY/MM/DD-YYYY/MM/DD` 形式（例: `2026/06/01-2026/06/30`）の場合: 1. 引数をパースし、`-` の前を `valid_from`、後を `valid_until` とする 2. `~/.claude/skills/naoya-setup/assets/access-config.json` を以下の形式で上書きする: ```json { "valid_from": "YYYY-MM-DD", "valid_until": "YYYY-MM-DD" } ``` 3. 以下を表示して **終了**（セットアップは実行しない）: ``` 有効期限を更新しました: YYYY/MM/DD 〜 YYYY/MM/DD ``` ### 引数パターン: セットアップ実行モード 引数がない、または日付形式でない場合: 1. `~/.claude/skills/naoya-setup/assets/access-config.json` を読み込む 2. 現在の日付が `valid_from` 〜 `valid_until` の範囲内か確認する 3. **範囲外の場合**、以下を表示して **終了**: ``` このセットアップウィザードは現在利用できません。 有効期間: {valid_from} 〜 {valid_until} ``` 4. **範囲内の場合**、以下のセットアップ手順に進む --- ## 実行手順 ### 0. 初期化 1. 進捗ファイル `~/.claude/skills/naoya-setup/assets/state.json` を読み込む 2. 既に完了済みのフェーズがあれば表示し、スキップするか再実行するか確認する 3. 初回実行時は `started_at` に現在時刻を記録する 以下の挨拶を表示してから開始: ``` Claude Code 環境セットアップウィザードへようこそ！ これから3つのフェーズでセットアップを進めていきます。 フェーズ1: プラグインのインストール（12個） フェーズ2: GitHub・Vercel・Supabaseの設定 フェーズ3: グローバル設定ファイル（CLAUDE.md）の配置 各ステップの前に確認しますので、ご安心ください。 わからないことがあれば、いつでも質問してください。 準備ができたら「はい」と入力してください。 ``` --- ### フェーズ1: プラグインの一括インストール **目的**: Claude Codeの機能を拡張するプラグインを全てインストールする #### 手順 1. **現在の状態を確認** - `~/.claude/settings.json` を読み込み、既にインストール済みのプラグインを確認 - 既にインストール済みのものはユーザーに「スキップします」と伝える 2. **マーケットプレイスの登録**（3つ） 以下を順に実行（既に登録済みならスキップ）: ```bash claude plugins add-marketplace claude-plugins-official --source github:anthropics/claude-plugins-official claude plugins add-marketplace kuu-marketplace --source github:fumiya-kume/claude-code claude plugins add-marketplace marketingskills --source github:coreyhaines31/marketingskills ``` 各コマンドの実行結果をユーザーに日本語で説明する。 エラーが出た場合は、何が問題かを平易な言葉で説明し、対処法を提案する。 3. **プラグインのインストールと有効化**（12個） 以下を順にインストール: | プラグイン | コマンド | 用途（ユーザーに説明） | |-----------|---------|---------------------| | clarify | `claude plugins install clarify@kuu-marketplace` | 要件を整理してくれます | | context7 | `claude plugins install context7@claude-plugins-official` | ライブラリのドキュメントを参照できます | | code-review | `claude plugins install code-review@claude-plugins-official` | コードレビューをしてくれます | | code-simplifier | `claude plugins install code-simplifier@claude-plugins-official` | コードを綺麗にしてくれます | | github | `claude plugins install github@claude-plugins-official` | GitHubと連携できます | | playwright | `claude plugins install playwright@claude-plugins-official` | ブラウザを自動操作できます | | supabase | `claude plugins install supabase@claude-plugins-official` | Supabaseと連携できます | | vercel | `claude plugins install vercel@claude-plugins-official` | Vercelにデプロイできます | | frontend-design | `claude plugins install frontend-design@claude-plugins-official` | フロントエンドのデザインを支援します | | marketing-skills | `claude plugins install marketing-skills@marketingskills` | マーケティングを支援します | | security-guidance | `claude plugins install security-guidance@claude-plugins-official` | セキュリティのガイドをしてくれます | | skill-creator | `claude plugins install skill-creator@claude-plugins-official` | 新しいスキルを作成できます | 各プラグインのインストール後、以下のように報告: ``` [1/12] clarify をインストールしました - 要件を整理してくれるプラグインです [2/12] context7 をインストールしました - ライブラリのドキュメントを参照するプラグインです ... ``` 4. **settings.json の確認** 全プラグインが `enabledPlugins` に `true` で登録されていることを確認。 もし `claude plugins` コマンドが使えない場合は、`settings.json` を直接編集する: ```json { "enabledPlugins": { "clarify@kuu-marketplace": true, "context7@claude-plugins-official": true, "code-review@claude-plugins-official": true, "code-simplifier@claude-plugins-official": true, "github@claude-plugins-official": true, "playwright@claude-plugins-official": true, "supabase@claude-plugins-official": true, "vercel@claude-plugins-official": true, "frontend-design@claude-plugins-official": true, "marketing-skills@marketingskills": true, "security-guidance@claude-plugins-official": true, "skill-creator@claude-plugins-official": true }, "extraKnownMarketplaces": { "kuu-marketplace": { "source": { "source": "github", "repo": "fumiya-kume/claude-code" } }, "claude-plugins-official": { "source": { "source": "github", "repo": "anthropics/claude-plugins-official" } }, "marketingskills": { "source": { "source": "github", "repo": "coreyhaines31/marketingskills" } } } } ``` 5. **完了報告** ``` フェーズ1 完了！ 12個のプラグインがインストールされました。 ※ プラグインを反映するには Claude Code の再起動が必要な場合があります。 ``` 6. `state.json` の `phase1_complete` を `true` に更新 --- ### フェーズ2: GitHub / Vercel / Supabase セットアップ **目的**: 開発に必要な外部サービスのCLIツールをインストールし、認証する #### 重要: セキュリティ方針 - パスワードはどこにも保存しない - 各CLIの公式認証フロー（ブラウザOAuth）を使用する - 認証トークンは各CLIが自身で安全に管理する - Playwrightはアカウント作成ページを開く補助にのみ使用 #### 2-1. GitHub セットアップ 1. ユーザーに確認: ``` GitHub のアカウントはお持ちですか？ (はい / いいえ) ``` 2. **「いいえ」の場合**: ``` GitHubのアカウントを作成しましょう。 ブラウザでサインアップページを開きます。 アカウント作成が完了したら「完了」と入力してください。 ``` Playwrightで https://github.com/signup を開く。 ユーザーに自分で登録してもらう。 3. **GitHub CLI のインストール**: ```bash # 確認 command -v gh # 未インストールなら brew install gh ``` 4. **認証**: ``` ブラウザが開きます。GitHubにログインして認証を許可してください。 ``` ```bash gh auth login --web ``` 5. **確認**: ```bash gh auth status ``` 成功したら: ``` GitHub の設定が完了しました！ ``` 6. `state.json` の `phase2_github` を `true` に更新 #### 2-2. Vercel セットアップ 1. ユーザーに確認: ``` Vercel のアカウントはお持ちですか？ (はい / いいえ) ``` 2. **「いいえ」の場合**: Playwrightで https://vercel.com/signup を開く。 ``` Vercelのアカウントを作成しましょう。 GitHubアカウントでサインアップすることをおすすめします。 ブラウザでサインアップページを開きます。 完了したら「完了」と入力してください。 ``` 3. **Vercel CLI のインストール**: ```bash # 確認 command -v vercel # 未インストールなら npm install -g vercel ``` 4. **認証**: ``` ブラウザが開きます。Vercelにログインして認証を許可してください。 ``` ```bash vercel login ``` 5. **確認**: ```bash vercel whoami ``` 成功したら: ``` Vercel の設定が完了しました！ ``` 6. `state.json` の `phase2_vercel` を `true` に更新 #### 2-3. Supabase セットアップ 1. ユーザーに確認: ``` Supabase のアカウントはお持ちですか？ (はい / いいえ) ``` 2. **「いいえ」の場合**: Playwrightで https://supabase.com/dashboard を開く。 ``` Supabaseのアカウントを作成しましょう。 GitHubアカウントでサインアップすることをおすすめします。 ブラウザでサインアップページを開きます。 完了したら「完了」と入力してください。 ``` 3. **Supabase CLI のインストール**: ```bash # 確認 command -v supabase # 未インストールなら npm install -g supabase ``` 4. **認証**: ``` ブラウザが開きます。Supabaseにログインしてアクセストークンを生成してください。 ``` ```bash supabase login ``` 5. **確認**: ```bash supabase projects list ``` 成功したら: ``` Supabase の設定が完了しました！ ``` 6. `state.json` の `phase2_supabase` を `true` に更新 #### トラブルシューティング 各ステップでエラーが発生した場合: - **brew が見つからない**: `Phase 0 の setup.sh を先に実行してください` と案内 - **npm が見つからない**: Node.js のインストールを案内 - **認証エラー**: Playwrightでログインページを開いて手動でのログインを提案 - **ネットワークエラー**: インターネット接続の確認を案内 --- ### フェーズ3: グローバル CLAUDE.md 設定 **目的**: Claude Codeの動作ルールを設定するグローバル設定ファイルを配置する 1. **既存ファイルの確認**: `~/.claude/CLAUDE.md` が存在するか確認 2. **存在する場合**: ``` 既に CLAUDE.md が存在します。内容を確認してください: [ファイル内容を表示] どうしますか？ 1. 上書きする（推奨テンプレートで置き換え） 2. スキップする（現在の内容を維持） ``` 3. **書き込み**: `~/.claude/skills/naoya-setup/assets/claude-md-template.md` の内容を読み込み、 `~/.claude/CLAUDE.md` に書き込む。 4. **確認**: ``` CLAUDE.md を設定しました！ この設定により、Claude Codeは以下のルールで動作します: - プランモードで計画を立ててから実行 - サブエージェントを活用して効率的に作業 - 作業の教訓を記録して改善を続ける - 完了前に必ず動作確認を行う ``` 5. `state.json` の `phase3_complete` を `true` に更新 --- ### 完了 全フェーズ完了後、以下を表示: ``` ╔══════════════════════════════════════════════╗ ║ セットアップが全て完了しました！ ║ ╚══════════════════════════════════════════════╝ インストールされたもの: - プラグイン 12個（GitHub連携、Vercel連携、ブラウザ操作 等） - GitHub CLI（gh）+ 認証済み - Vercel CLI + 認証済み - Supabase CLI + 認証済み - CLAUDE.md（Claude Codeの動作ルール） 次のステップ: 1. 新しいプロジェクトフォルダを作成: mkdir my-first-project && cd my-first-project 2. Claude Codeに何でも聞いてください！例: 「Next.jsでブログサイトを作りたい」 「ToDoアプリを作って」 「このフォルダにウェブサイトを作って」 お疲れ様でした！楽しい開発ライフをお過ごしください！ ``` `state.json` の `completed_at` に現在時刻を記録する。 --- ## 注意事項 - 全ての案内は日本語で行うこと - 技術用語は可能な限り平易に説明すること - エラーが出た場合は、ユーザーを責めず、何が起きたか・どうすれば良いかを明確に伝えること - 手動操作が難しい場合はPlaywrightでのブラウザ操作を提案すること - 各フェーズの完了後に state.json を更新し、中断・再開に対応すること