devcontainer-setup

Devcontainer セットアップスキル

許可された範囲

ユーザーの依頼と既存の承認の範囲内でのみ作業してください。このスキルを読み込んでも、新たな権限は付与されません。報告のみの依頼は報告のみにとどめ、依頼者が指定した対象、ホスト、プロバイダー、コスト上限を守ってください。範囲を広げる前に確認し、これらの制限を委任先にも伝えてください。

契約

入力：

• プロジェクトのランタイム、既存のコンテナー設定、依頼された開発環境のセットアップ
• 承認済みのディレクトリマウントと任意のツール

出力：

• Dev Container の設定と起動手順

作成／変更するもの：

• 承認されたセットアップ範囲内の .devcontainer/ ファイル

外部への副作用：

• 依頼された場合に限り、イメージのプル、パッケージのインストール、またはコンテナーの起動を行います

確認が必要な場合：

• 既存の設定を上書きする前、または選択したプロジェクト外のディレクトリをマウントする前
• 承認されたセットアップの範囲外でツールを追加する前、またはコンテナーを起動する前

委任先：

• コンテナー設定の詳細については docker-expert

情報の収集

devcontainer を作成する前に、以下の情報をユーザーから収集してください。

必須情報

1. プロジェクト名：プロジェクト／コンテナーの名前は何ですか？（例：my-project、shipshitdev-api）

2. ベースイメージ：このプロジェクトで使用するランタイムは何ですか？

   • oven/bun:1.3.5 — Bun プロジェクト（速度重視の場合に推奨）
   • node:20-slim — Node.js プロジェクト
   • node:20 — より多くのツールを含む Node.js
   • カスタムイメージのパス

3. パッケージマネージャー：どのパッケージマネージャーを使用しますか？

   • bun — Bun（Bun プロジェクトのデフォルト）
   • npm — npm
   • pnpm — pnpm
   • yarn — Yarn

4. ポート：転送する必要があるポートは何ですか？（カンマ区切り。例：3000, 3001, 5432）

5. ポートラベル（任意）：各ポートに付けるラベルを指定してください。（例：3000=Web, 5432=Postgres）

6. 親ディレクトリのマウント：リポジトリ間でアクセスできるように、親ディレクトリをマウントしますか？

   • はい — 親ディレクトリを /workspace としてマウントします（モノレポや共有ライブラリに適しています）
   • いいえ — このプロジェクトのみをマウントします

7. Claude Code のサポート：Claude Code CLI のセットアップを含めますか？

   • はい — Claude Code をインストールし、コンテナーで使用するためのシンボリックリンクを修正します
   • いいえ — Claude Code のセットアップを省略します

8. VS Code 拡張機能（任意）：追加でインストールする拡張機能を指定してください（拡張機能 ID をカンマ区切りで指定）

9. モノレポの構成（該当する場合）：

   • package.json ファイルが複数の階層にあるモノレポですか？
   • アプリ／パッケージのディレクトリはどれですか？（例：apps/*, packages/*）

作成するファイル構成

.devcontainer/
├── devcontainer.json      # VS Code dev container config
├── Dockerfile             # Container image definition
├── docker-compose.yml     # Docker compose config
├── setup.sh               # Post-create setup script
└── README.md              # Documentation

テンプレート

収集した情報をもとに、以下の 5 つのファイルを生成してください。

• devcontainer.json — ビルド設定、マウント、機能、VS Code の拡張機能／設定、転送するポート、postCreateCommand
• Dockerfile — ベースイメージ、作業ディレクトリ、依存関係のインストール（モノレポを考慮）、開発ツール、公開するポート
• docker-compose.yml — サービス定義、ボリューム（親ディレクトリのマウントと node_modules のキャッシュ）、ポート、開発コマンド
• setup.sh — 依存関係をインストールします。Claude Code のサポートがリクエストされた場合は、ホストとコンテナー間の Claude 設定のシンボリックリンクも修正し、API キーの設定手順を出力します
• README.md — クイックスタート、マウント／ポートの表、ディレクトリ構成、トラブルシューティング

各ファイルの記入済みテキスト全体については、references/templates.md を参照してください（{{PLACEHOLDER}} の値は、上記で収集した情報を使用します）。

パッケージマネージャーのリファレンス

パッケージマネージャー	ロックファイル	インストールコマンド	開発コマンド
bun	bun.lock*	bun install --frozen-lockfile	bun run dev
npm	package-lock.json	npm ci	npm run dev
pnpm	pnpm-lock.yaml	pnpm install --frozen-lockfile	pnpm run dev
yarn	yarn.lock	yarn install --frozen-lockfile	yarn dev

実装手順

1. AskUserQuestion を使用して、上記の必須項目をユーザーに質問します
2. .devcontainer ディレクトリを作成します
3. 収集した設定を使用して各ファイルを生成します
4. setup.sh を実行可能にします
5. 作成した内容と使用方法の概要を提示します

使用例

ユーザー：「Next.js プロジェクト用に devcontainer をセットアップしてください」

1. 情報を収集します：プロジェクトでは Bun を使用し、ポート 3000 を使い、Claude Code のサポートが必要です
2. .devcontainer/ に 5 つのファイルをすべて作成します
3. 出力：「devcontainer の設定を作成しました。VS Code で開き、『コンテナーで再度開く』をクリックしてください。」