Claude Codeで爆速開発したツール群をVitePress製のドキュメントサイトで管理する
Claude CodeでVibeCodingしてると、高機能なtoolがどんどんできます
README.mdは書いてくれるけど、だんだん把握しきれなくなってくるのでドキュメンテーションを考えます。
プロジェクト構造の全体像
完成したシステムの構造（一部省略）
vitepress-docs-system/
├── .claude/
│ └─── commands/
│ ├── doc-api.md # API文書のみ生成
│ ├── doc-full.md # フル文書セット生成
│ ├── doc-update.md # 既存文書の更新
│ ├── translate-docs.md # 英→日翻訳
│ └── update-nav.md # ナビゲーション更新
└─── docs/
├── .vitepress/config.ts
├── index.md
├── guide/
│── tools/
└── en/ # 英語版
├── index.md
├── guide/
└── tools/
docs
- .vitepress/config.ts
- サイトの設定
- 左サイドメニューの設定
- docs
- 直下がメインの言語（日本語）のページになります
- tools/
- 各toolのドキュメントを保存します
- docs/en/
- 英語版
docs以下をこのような構成にすることで、VitePressのヘッダーの言語切り替えが利用できます
自動ドキュメント生成システムの仕組み
VitePressを選んだ理由
- 高速なビルド
- 美しいデフォルトテーマ
- 多言語対応のサポート
- GitHub Pagesとの相性
標準化された文書構造（5セクション）
すべてのツールは統一された構造で文書化：
-
index.md- 概要と主要機能 -
installation.md- セットアップと前提条件 -
usage.md- 基本的な使い方とワークフロー -
api.md- 完全なコマンド/関数リファレンス -
troubleshooting.md- よくある問題と解決策
日英対応の設計
- 日本語：ルートロケール（デフォルト）
- 英語：
/en/プレフィックス - ナビゲーション：両言語で同期
実際の運用フロー
ccsc(claude code slash command)という、slash commandを管理する自作toolです
これを追加してみましょう。保存場所は~/src/claude-code/tools/cc-slash-command
❯ ccsc -h
Usage: ccsc [options] [command]
Manage Claude Code custom commands
Options:
-V, --version output the version number
-h, --help display help for command
Commands:
ls|list [options] List available commands
add [options] Add a new command interactively
show <name> Show command content
update <name> Update an existing command
delete|rm <name> Delete an existing command
help [command] display help for command
初期の状態
英語版ドキュメント生成
/doc-full ~/src/claude-code/tools/cc-slash-command
大体5分ほどかかりました
実行log
⏺ cc-slash-commandプロジェクトの完全なドキュメントセットを生成しました。
以下の5つのファイルを作成しました：
File: docs/en/tools/cc-slash-command/index.md
- プロジェクトの概要と主要機能
- プロジェクトコマンドとユーザーコマンドの説明
- アーキテクチャの概要
File: docs/en/tools/cc-slash-command/installation.md
- 前提条件（Node.js 16.0.0以上）
- 3つのインストール方法（npx、グローバル、プロジェクト固有）
- 初回セットアップと検証手順
File: docs/en/tools/cc-slash-command/usage.md
- 基本的なワークフロー
- プロジェクトコマンドとユーザーコマンドの使い分け
- 階層的なコマンド組織化
- テンプレートシステムの説明
File: docs/en/tools/cc-slash-command/api.md
- 全コマンドの完全なリファレンス（ls、add、show、update、delete）
- オプションとフラグの詳細
- テンプレートシステムとタイプ定義
File: docs/en/tools/cc-slash-command/troubleshooting.md
- インストールの問題
- コマンド実行の問題
- ファイルシステムの問題
- Claude Codeとの連携問題
すべてのドキュメントは、プロジェクトの分析に基づいて、実際のコード構造、
機能、使用方法を正確に反映しています。
日本語版生成（翻訳）
/translate-docs cc-slash-command
ここではpathではなく、project名を指定します
このリポジトリのdocs/en/project名を探して翻訳します
実行log
⏺ cc-slash-commandプロジェクトの英語ドキュメントを日本語に翻訳しました。
以下の5つのファイルを./docs/tools/cc-slash-command/に作成しました：
翻訳完了したファイル
index.md
- プロジェクト概要と主要機能の日本語版
- コマンドタイプ（プロジェクト・ユーザー）の説明
- クイックスタートガイド
installation.md
- インストール手順の日本語版
- 3つのインストール方法（npx、グローバル、プロジェクト固有）
- システム要件とトラブルシューティング
usage.md
- 詳細な使用方法ガイドの日本語版
- ワークフロー、コマンド作成、組織化方法
- ベストプラクティスとClaude Codeとの統合
api.md
- 完全なAPIリファレンスの日本語版
- 全コマンド仕様、オプション、例
- テンプレートシステムと型定義
troubleshooting.md
- 包括的なトラブルシューティングガイドの日本語版
- インストール、実行、統合の問題解決
- デバッグ情報とベストプラクティス
すべての翻訳で、技術用語の正確性、コード例の保持、構造の維持を確保し、日
本語ユーザーがccscを効果的に使用できるようにしました。
サイトナビゲーション更新
/update-nav
実行log
⏺ cc-slash-commandプロジェクトのナビゲーションを更新しました。
更新内容
docs/index.md
ホームページの「ツール」セクションに新しい項目を追加：
- cc-slash-command プロジェクトのエントリ
- 日本語での簡潔な説明
- 英語ドキュメントへのリンク
docs/.vitepress/config.ts
VitePressナビゲーション設定を更新：
日本語サイドバー（ルート）
- ccsc プロジェクトの完全な階層構造
- 5つの標準セクション（概要、インストール、使い方、API、トラブルシューテ
ィング） - 日本語での適切なセクション名
- collapsed: true（デフォルトで折りたたみ）
英語サイドバー（/en/）
- ccsc プロジェクトの完全な階層構造
- 5つの標準セクション（Overview, Installation, Usage Guide, API
Reference, Troubleshooting） - collapsed: false（デフォルトで展開）
これでユーザーは日本語・英語両方のサイトでcc-slash-commandのドキュメント
にアクセスできるようになりました。
更新結果
左にtoolの名前と作成した5つのファイルがlinkとして表示されています
右側には選択中のページの目次。コマンド一発で作ったにしては十分です
その他の写真
英語版
メニュー右上で切替
ダークモード対応
CI/CDパイプラインとGitHub Pages設定
あまり使う人はいない気がしますが、github workflowsの設定もあります
CI ワークフロー (.github/workflows/ci.yml)
- プルリクエストと main ブランチへのプッシュで実行
- Node.js 20.11.0 環境
- 自動ビルド検証
- リンクチェックとアクセシビリティ検証
デプロイワークフロー (.github/workflows/deploy.yml)
- main ブランチへのプッシュで GitHub Pages に自動デプロイ
- ビルド成果物の GitHub Pages へのアップロード
- 手動実行も可能（workflow_dispatch）
まとめ
この仕組みのキモはVitePressのレールに全力で乗っかることと、生成をslash commandでClaude Codeにやらせる点です
slash commandもClaude Codeに作らせる
slash commandの作成はハードル高いと感じるかもしれませんが、以下のような雑な指示でほぼ完璧に動くものを作ってくれます
指定したフォルダのプロジェクトを解析しvitepressで使い方を解説する新しいslash commandを作って
doc-full [project-name] で、指定したプロジェクトの完全なドキュメントセット（5セクション）を生成したい。
@.claude/commands/ に出力。
custom slash commandの例
きっかけ
TLに@mizchiのtweetが流れてきたのを見た
たしかにtoolたくさんあって困るな。せや！Claude Codeに全部やらせよ！
links
Discussion