Codebase to Course (Claude Skill) — インストール & ライブデモ

なぜ使うのか

主な機能

単一ファイルHTML出力 — ビルドパイプラインなし
READMEではなく実際のコードから生成されたアーキテクチャ概要
モジュールごとの「これが存在する理由＋動作方法」セクション
実際のエントリポイントを追うリクエストフローウォークスルー
行ごとの説明付き注釈コードブロック
非エンジニア（PM・デザイナー・新入社員）向けに設計

ライブデモ

実際の動作

準備完了

インストール

クライアントを選択

~/Library/Application Support/Claude/claude_desktop_config.json · Windows: %APPDATA%\Claude\claude_desktop_config.json

{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop → Settings → Developer → Edit Config を開く。保存後、アプリを再起動。

~/.cursor/mcp.json · .cursor/mcp.json

{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

Cursor は Claude Desktop と同じ mcpServers スキーマを使用。プロジェクト設定はグローバルより優先。

VS Code → Cline → MCP Servers → Edit

{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

Cline サイドバーの MCP Servers アイコンをクリックし、"Edit Configuration" を選択。

~/.codeium/windsurf/mcp_config.json

{
  "mcpServers": {
    "codebase-to-course-skill": {
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ],
      "_inferred": true
    }
  }
}

Claude Desktop と同じ形式。Windsurf を再起動して反映。

~/.continue/config.json

{
  "mcpServers": [
    {
      "name": "codebase-to-course-skill",
      "command": "git",
      "args": [
        "clone",
        "https://github.com/zarazhangrui/codebase-to-course",
        "~/.claude/skills/codebase-to-course"
      ]
    }
  ]
}

Continue はマップではなくサーバーオブジェクトの配列を使用。

~/.config/zed/settings.json

{
  "context_servers": {
    "codebase-to-course-skill": {
      "command": {
        "path": "git",
        "args": [
          "clone",
          "https://github.com/zarazhangrui/codebase-to-course",
          "~/.claude/skills/codebase-to-course"
        ]
      }
    }
  }
}

context_servers に追加。保存時に Zed がホットリロード。

claude mcp add codebase-to-course-skill -- git clone https://github.com/zarazhangrui/codebase-to-course ~/.claude/skills/codebase-to-course

ワンライナー。claude mcp list で確認、claude mcp remove で削除。

ユースケース

実用的な使い方： Codebase to Course

新入社員向けのセルフペースオンボーディングコースを生成する

👤 エンジニアリングマネージャー／テックリード ⏱ ~45 min beginner

使うタイミング： 内定承諾の翌金曜日：「コードを読んで」の代わりに本物のオンボーディング成果物が欲しい場合。

前提条件

スキルのインストール — git clone https://github.com/zarazhangrui/codebase-to-course ~/.claude/skills/codebase-to-course
リポジトリのチェックアウト — 標準の git clone

フロー

リポジトリをスキャン

codebase-to-course: scan ./our-app. Output the proposed course structure first — section list — before writing.✓ コピーしました

→ 具体的なTOC：アーキテクチャ・モジュール・リクエストフロー
コースを生成

Looks good. Generate the full HTML to /onboarding/course.html. Target audience: new full-stack hire who knows React + Node but not our domain.✓ コピーしました

→ HTMLファイルが生成される；ブラウザで開く
正確さを検証

Spot-check: does the 'auth flow' walkthrough match what's actually in src/auth/? Quote the real code.✓ コピーしました

→ ウォークスルーが実際のファイルパスと現在のコードを引用している

結果： チームの2週間分の説明を節約できる本物のオンボーディング成果物。

注意点

コースが長すぎて実際に読めない — 最大セクション数を指定する；完全性より品質
コードの抜粋が古くなる — 大きなリファクタ後に再生成する；スキルは高速

組み合わせ： filesystem · git-mcp-idosal

複雑な機能を非技術PMに説明する

👤 テックリード ⏱ ~20 min beginner

使うタイミング： PMが「なぜ3スプリントかかるの？」と聞き続ける — 具体的な成果物が欲しい場合。

フロー

機能にスコープを絞る

codebase-to-course: scope to src/payments/. Audience: PM with no engineering background. Lean on diagrams + analogies, light on code.✓ コピーしました

→ コースがハイレベル；コードブロックが最小限

結果： PMがメンタルモデルを持って帰る。

注意点

アナロジーが過度に単純化する — スポットチェックする；プッシュすればスキルは正確さを優先する

オープンソースプロジェクト向けの「動作原理」ページを生成する

👤 OSSメンテナー ⏱ ~30 min intermediate

使うタイミング： READMEに機能はあるがアーキテクチャの解説がない場合。

フロー

docsページとして生成

codebase-to-course: scan main branch. Output ARCHITECTURE.html for the docs site. Target: experienced devs evaluating the project.✓ コピーしました

→ 出力が思慮深いコントリビューターガイドのように読める

結果： 評価者とコントリビューターにとってより良い開発体験。

注意点

コースのブランディングが間違っている（汎用的に見える） — promptにプロジェクト名＋スタイルのヒントを渡す

組み合わせ

他のMCPと組み合わせて10倍の力を

codebase-to-course-skill + filesystem

ローカルリポジトリを読んでコースを書く

codebase-to-course: scan ./our-app, write /onboarding/course.html.✓ コピーしました

codebase-to-course-skill + git-mcp-idosal

クローンせずに外部リポジトリのコースを作る

Use GitMCP for owner/repo. Then codebase-to-course on top of that.✓ コピーしました

ツール

このMCPが提供する機能

ツール	入力	呼び出すタイミング
scan_repo	path	常に最初に実行
propose_toc	scan_result, audience	スキャン後、生成前
generate_course	scan_result, toc, target_html_path	最終ステップ
scope_to_subdir	subdir_path	大規模なモノリポや機能フォーカス

コストと制限

運用コスト

APIクォータ: N/A
呼び出しあたりのトークン: 大きい — スキルはリポジトリ全体を読む（典型的に10k〜50k token）
金額: 無料；使用するモデルのtoken料金が適用される
ヒント: モノリポではscope_to_subdirを使用；一度に全体をコース化しないこと

セキュリティ

権限、シークレット、影響範囲

最小スコープ： filesystem-read filesystem-write

認証情報の保管： なし

データ送信先： なし — 純粋なローカルの読み書き

生成されたコースにコードの抜粋が含まれる可能性がある；リポジトリに秘密情報が含まれる場合は外部共有前にレビューすること

トラブルシューティング

よくあるエラーと対処法

Course is too generic / doesn't reference real code

promptをより具体的にする；file:line引用を要求する

Repo too large; runs out of context

scope_to_subdirを使用；モジュールごとのコースを作成してリンクする

HTML formatting broken

スキルに出力の検証を依頼する；必要なら再生成

代替案

Codebase to Course 他との比較

代替案	代わりに使う場面	トレードオフ
Repomix + manual prompt	コードベースのClaudeへの渡し方を完全にコントロールしたい場合	セットアップが多い；意見のある出力フォーマットなし
DocsGPT / Mintlify	ホスティングされたドキュメントが欲しい場合	全く異なる製品；単一ファイルHTMLではない
absolutely-skilled / autodoc	自動生成APIドキュメントが欲しい場合	APIリファレンス ≠ チュートリアル

その他

リソース

📖 GitHub の公式 README を読む

🐙 オープンな issue を見る

🔍 400以上のMCPサーバーとSkillsを見る