メインコンテンツへスキップ

grill-me で要件を詰める開発環境を Dev Container で作る

    Claude Code のスキル 「grill-me」 を使って、実装前に要件を徹底的に詰められる開発環境を作る手順です。
    WSL 上の VS Code Dev Container として構築し、認証情報の永続化・GitHub 連携・日本語化までを汎用テンプレートとしてまとめます。
    プロジェクトの中身に依存しない構成なので、どんなリポジトリにもそのまま流用できます。ハマりどころも含めて再現可能な形で残します。

    この記事で作るもの

    • WSL(Linux ファイルシステム)上のプロジェクトディレクトリ

    • VS Code Dev Container(.devcontainer)で再現可能な開発環境

      • Node.js(Claude Code の実行基盤)

      • Claude Code と、その上で動く grill-me スキル

    • 認証情報をコンテナ再ビルドをまたいで保持する永続化設計

    • GitHub への push(GitHub CLI 利用)

    • grill-me を日本語でやり取りする設定

    grill-me とは

    grill-me は Matt Pocock 氏が公開した Claude Code 用のカスタムスキルで、X で大きな話題になりました。
    やることはシンプルで、計画や設計を投げると AI が共有理解に達するまで一問ずつ質問を重ねて前提を詰めてくれるというものです。
    各質問には推奨回答が添えられ、決定ツリーを枝ごとに潰していくため、「曖昧なまま実装に入って手戻りする」事故を防げます。
    本体は短い SKILL.md(指示文)だけで、レバレッジはすべてその言葉にあります。

    前提

    • Windows + WSL2

    • Docker Desktop(Settings → Resources → WSL integration で対象ディストロを有効化)

    • VS Code + 拡張「Dev Containers」
      (ms-vscode-remote.remote-containers)

    • GitHub アカウント


    Step 1. プロジェクトを WSL 側に作る

    作業ディレクトリは必ず Linux ファイルシステム側(~/projects 配下)に置きます。
    /mnt/c/...(Windows 側)に置くとコンテナの I/O が極端に遅く、ファイル監視も不安定になるためです。

    mkdir -p ~/projects/my-project
    cd ~/projects/my-project

    my-project は任意のプロジェクト名に置き換えてください。


    Step 2. Dev Container を定義する

    .devcontainer/(フォルダ名は単数が慣例)に devcontainer.json を置きます。grill-me を動かすだけなら base イメージ + features で十分で、独自の Dockerfile は不要です。

    .devcontainer/devcontainer.json

    {
      "name": "grill-me Dev Environment",
      "image": "mcr.microsoft.com/devcontainers/base:ubuntu-22.04",
      "features": {
        "ghcr.io/devcontainers/features/github-cli:1": {},
        // Claude Code は Node.js 18+ が前提。base イメージに Node が無いので必須
        "ghcr.io/devcontainers/features/node:1": { "version": "lts" }
      },
      "customizations": {
        "vscode": {
          "extensions": [
            "streetsidesoftware.code-spell-checker"
          ]
        }
      },
      // 認証/設定をリビルドをまたいで永続化(プロジェクト別のボリューム名にする)
      "mounts": [
        "source=grillme-claude,target=/home/vscode/.claude,type=volume",
        "source=grillme-gh,target=/home/vscode/.config/gh,type=volume"
      ],
      // ボリュームの所有者を vscode に揃えてから Claude Code を導入
      "postCreateCommand": "sudo chown -R vscode:vscode /home/vscode/.claude /home/vscode/.config/gh && npm install -g @anthropic-ai/claude-code",
      "remoteUser": "vscode"
    }
    

    設計のポイント

    • Node.js feature が最重要:
      base:ubuntu-22.04 には Node が入っていないが、Claude Code(grill-me の実行基盤)は Node 18+ が必須。これが無いと claude が動かない。

    • Claude Code は postCreateCommand で導入:
      npm install -g @anthropic-ai/claude-code
      先頭で .claude / .config/gh ボリュームの所有者を vscode に揃えているのは、名前付きボリュームが初期に root 所有となり権限エラーになりがちなため。

    • 永続化ボリューム:
      /home/vscode/.claude(Claude Code の認証・設定)
      /home/vscode/.config/gh(GitHub CLI のトークン)
      を名前付きボリュームにして、リビルドしても再ログイン不要にする。
      詳細は Step 6。
      ボリューム名はプロジェクトごとに変えておくと混線しません。

    (任意)追加ツールが要るときは Dockerfile

    プロジェクト固有の CLI ツールを焼き込みたい場合だけ、devcontainer.json の image を build に差し替えて Dockerfile を用意します。

    // devcontainer.json の "image" 行を次に置き換える
    "build": { "dockerfile": "Dockerfile" },
    # .devcontainer/Dockerfile
    FROM mcr.microsoft.com/devcontainers/base:ubuntu-22.04
    
    RUN apt-get update && apt-get install -y \
        curl \
        git \
        ca-certificates \
        && rm -rf /var/lib/apt/lists/*
    
    WORKDIR /workspace

    補足:APT キャッシュの削除パスは /var/lib/apt/lists/* です。
    lists を別名に書き間違えると削除が空振りしてイメージが膨らみます。地味だが実害があるので注意。


    Step 3. grill-me スキルを入れる

    grill-me はリポジトリ内の .claude/skills/grill-me/SKILL.md に置けば、コンテナの内外を問わず(リポジトリがマウントされるため)使えます。
    本家から取得します。

    mkdir -p ~/projects/my-project/.claude/skills/grill-me
    curl -fsSL \
      https://raw.githubusercontent.com/mattpocock/skills/main/skills/productivity/grill-me/SKILL.md \
      -o ~/projects/my-project/.claude/skills/grill-me/SKILL.md

    .claude は 2 か所あることに注意

    混乱しやすいのですが、役割の違う .claude が 2 つあります。

    場所役割永続化のされ方/home/vscode/.claude(ホーム)Claude Code の認証情報・設定名前付きボリューム(Step 2 で設定)<repo>/.claude(リポジトリ)スキル・コマンド・CLAUDE.mdワークスペース(ホスト側に保存)\begin{array}{|l|l|l|} \hline \text{場所} & \text{役割} & \text{永続化のされ方} \\ \hline \text{/home/vscode/.claude(ホーム)} & \text{Claude Code の認証情報・設定} & \text{名前付きボリューム(Step 2 で設定)} \\ \hline \text{<repo>/.claude(リポジトリ)} & \text{スキル・コマンド・CLAUDE.md} & \text{ワークスペース(ホスト側に保存)} \\ \hline \end{array}

    grill-me の本体は後者(リポジトリ側)に置きます。
    前者のボリュームには grill-me の中身はコピーされません。


    Step 4. コンテナで開いて動作確認

    VS Code で ~/projects/my-project を WSL 接続で開き、コマンドパレット(Ctrl+Shift+P)から 「Dev Containers: Reopen in Container」 を実行します。(初回ビルドは時間がかかります)

    ビルドが終わったらコンテナ内のターミナル(`Ctrl+``)でツールを確認します。

    node -v          # v18 以上
    claude --version # postCreateCommand で導入済み

    claude が無い場合は postCreateCommand が走りきっていない可能性があるので、npm install -g @anthropic-ai/claude-code を手動実行します。


    Step 5. Claude Code にサインインして grill-me を呼ぶ

    cd /workspaces/my-project
    claude

    初回はサインインを求められます。
    済んだら入力欄で / を打ち、候補に grill-me が出れば認識成功です。そのまま /grill-me を実行できます。

    ハマりどころ:Unknown command: /grill-me

    /grill-me が「Unknown command」になる典型的な原因は スキルのファイルがリポジトリに置かれていないことです(Step 3 未実施)

    バージョン自体は通常問題になりません。
    Claude Code は v2.1.101 以降で カスタムスラッシュコマンドがスキルに統合され、.claude/commands/*.md でも .claude/skills/*/SKILL.md でも、同じ /コマンド名 形式で呼び出せます。
    つまりファイルさえ正しい場所にあれば /grill-me で動きます。

    確認・対処は次のとおり。

    # 配置されているか確認
    ls -la /workspaces/my-project/.claude/skills/grill-me/
    head -n 15 /workspaces/my-project/.claude/skills/grill-me/SKILL.md

    SKILL.md の先頭 frontmatter に name: があり、その値がスラッシュコマンド名になります。
    配置後は Claude Code を起動し直すと読み込まれます(スキルはセッション開始時にロードされるため)

    成功すると、こんな具合に動き出します。

    ● Skill(grill-me)
      ⎿  Successfully loaded skill
    ● Let me first explore the codebase to understand the project before I start grilling you.
    ● Q1: What is the top-level goal of this project?
      ...

    Step 6. 永続化の設計を確認する

    「リビルドしても認証が消えないか」は重要なので、実際にボリュームが効いているか確認します。

    findmnt /home/vscode/.claude

    次のように名前付きボリュームが裏にあれば永続化されています。

    TARGET               SOURCE                                                    FSTYPE
    /home/vscode/.claude /dev/sdd[/var/lib/docker/volumes/grillme-claude/_data]    ext4

    restart と rebuild の違い

    • 停止・再起動(restart):
      ボリューム無しでもコンテナの書き込みレイヤーは残るので .claude も残る。

    • リビルド(recreate):
      書き込みレイヤーは作り直される。ここで認証を消さずに残すのが名前付きボリュームの役割。

    何がどこで永続化されるか

    • ホーム /home/vscode/.claude(認証)→ 名前付きボリューム(Step 2)

    • リポジトリ <repo>/.claude(スキル)→ ワークスペース(ホスト側)

    • GitHub CLI /home/vscode/.config/gh(トークン)→ 名前付きボリューム(Step 2)


    Step 7. GitHub と連携する

    7-1. Git の初期化と identity 設定

    ワークスペースがまだ Git 管理されていなければ初期化します。

    cd /workspaces/my-project
    git init
    git branch -m main   # 任意(master → main)

    git commit で「Author identity unknown」が出る場合は、コミット者情報を設定します。--global を付けない設定は .git/config(=ワークスペース上=永続領域)に書かれるので、リビルドしても残ります(コンテナ内の ~/.gitconfig はボリューム化していないので消えます)。

    git config user.name "Your Name"
    git config user.email "you@example.com"

    devcontainer と grill-me をコミットします。

    git add .devcontainer .claude/skills/grill-me/SKILL.md
    git commit -m "Add devcontainer and grill-me skill"

    全コンテナで共通の identity を使いたいなら、WSL ホスト側(コンテナの外)で git config --global ... を設定しておくと、Dev Containers 拡張がコンテナ作成時にホストの gitconfig を自動コピーしてくれます。

    7-2. GitHub CLI で認証

    github-cli feature 済みなので gh が使えます。

    gh auth login

    GitHub.com → HTTPS → 「Authenticate Git with your GitHub credentials? = Yes」→ 「Login with a web browser」を選択。
    表示されるワンタイムコード(XXXX-XXXX 形式)を控え、案内された https://github.com/login/device を開いてコードを入力し、Authorize します。
    完了するとターミナルに ✓ Logged in as <ユーザー名> が出ます。

    url.parse() の DeprecationWarning が出ることがありますが無害です。

    7-3. リポジトリ作成と push

    リポジトリ root で 1 コマンドです。

    gh repo create my-project --private --source=. --remote=origin --push

    「GitHub 上にリポジトリ作成 → origin 追加 → 現在のブランチを push」までまとめて実行されます。公開リポにするなら --private を --public に。

    gh のトークンは /home/vscode/.config/gh/ に保存されますが、Step 2 でこのパスもボリューム化しているため、リビルド後も再ログイン不要です。


    Step 8. grill-me を日本語でやり取りする

    grill-me の指示文は英語ですが、定義しているのは「進め方」だけで、モデルは多言語対応です。やり取り自体は日本語にできます。

    毎回設定不要にするなら、リポジトリ直下に CLAUDE.md を置きます。Claude Code が毎セッション自動で読み込み、grill-me を含むすべての応答に効きます。

    cat > /workspaces/my-project/CLAUDE.md <<'EOF'
    # プロジェクト共通指示
    
    ## 言語
    - ユーザーとのやり取りは常に日本語で行う。
    - スキル(grill-me 等)実行時の質問・選択肢・推奨回答・要約もすべて日本語で出力する。
    EOF
    
    git add CLAUDE.md
    git commit -m "Add CLAUDE.md (respond in Japanese)"
    git push

    CLAUDE.md はセッション開始時に読まれるので、作成後は Claude Code を起動し直します。
    なお grill-me の起動は、日本語の合図だと自動で引っかからないことがあるため、呼び出しは /grill-me(スラッシュ)で確実に行い、中身を日本語にするのが安定します。


    使い方:要件を grill-me で詰める

    /grill-me を起動し、設計の叩き台や要件メモを渡します。
    提案文を添えると、その前提に踏み込んだ質問になり精度が上がります。

    /grill-me
    
    以降の質問・推奨回答・要約はすべて日本語でお願いします。
    以下の設計を叩き台に、実装前の曖昧さを徹底的に詰めてください。
    特に次を明確化したい:
    - 何を作るか(スコープと非スコープ)
    - 想定ユーザーと利用シーン
    - 入出力(インターフェース/データ形式)
    - 成功条件と失敗条件、エラー時の挙動
    - 実行・配布の方法
    ---
    (設計の提案文・要件メモをここに貼る)
    ---
    

    質問が一巡したら「ここまでの合意を docs/spec.md にまとめて」と頼むと、共有理解の取れた仕様が手元に残ります。
    これを基に実装フェーズへ進めます。


    つまづきどころまとめ

    • /grill-me が Unknown command
      スキルファイルがリポジトリに無いのが原因。.claude/skills/grill-me/SKILL.md を置いて Claude Code を再起動する。commands と skills は v2.1.101 で統合済みなので /名前 で呼べる。

    • Claude Code が動かない
      base イメージに Node が無い。
      node feature を入れる(Node 18+ 必須)

    • Dockerfile の APT キャッシュ削除(Dockerfile を使う場合)
      削除パスは /var/lib/apt/lists/*。
      書き間違えると空振りする。

    • git commit で identity エラー 
      git config(--global 無し)で repo に設定すれば永続。

    • リビルドで認証が消える 
      ~/.claude と ~/.config/gh を名前付きボリュームにする。

    • 権限エラー 
      ボリュームは初期 root 所有。postCreateCommand で chown する。


    まとめと次の一歩

    WSL + Dev Container 上に、Claude Code + grill-me を載せた再現可能な汎用環境を作り、認証の永続化・GitHub 連携・日本語化まで通しました。
    grill-me を挟むことで、実装前に「何を作るか」を AI と詰めてから動けるのが大きな利点です。

    このテンプレートはプロジェクトの中身に依存しないので、新しいリポジトリを始めるたびに .devcontainer と .claude/skills/grill-me、CLAUDE.md をコピーするだけで同じ体験を再現できます。
    次の一歩としては、grill-me で固めた仕様(docs/spec.md)をそのまま実装タスクの要件に落とし込み、必要なら CI の受け入れ条件に展開していくのが自然な流れです。

    あなたへのおすすめ