LukeRenton/explore-claude-code

解決する問題

Claude Code には多くの設定ファイル、フォルダ、組み込み機能がありますが、それぞれの機能を学ぶには、散在するドキュメントを読むか、実際のプロジェクトを掘り下げる必要があります。このプロジェクトは、その学習を実際の Claude Code リポジトリのクリック可能なレプリカに変え、各ファイルがどこにあるかを確認し、注釈付きの実際の設定例を読み、各概念を文脈で理解できるようにします。

仕組み

このサイトは、プレーンな HTML、CSS、バニラ JavaScript で構築されたシングルページの静的アプリです。依存関係、フレームワーク、ビルドステップは一切ありません。ファイルエクスプローラのサイドバーには、実際のリポジトリとまったく同じファイルとフォルダのツリーが表示され、.claude/ の下（作成してコミットするプロジェクト設定）と built-in/ の下（Claude Code に標準搭載されている機能）の2つのセクションに分かれています。

任意のファイルをクリックすると、実際の設定ファイルとして書かれた内容が表示され、各行に注釈が付いています。設定について読むだけでなく、設定自体を読み、設定方法を学ぶことができます。UI 全体は、ツリー構造、コンテンツ参照、バッジを保持する単一の manifest.json ファイルによって駆動されます。ソースコンテンツは content/ フォルダにマークダウンと設定ファイルとして保存されます。

ナビゲーション機能には、任意のエントリにジャンプするクイック検索パレット（Ctrl/Cmd + K）、選択を記憶するライト/ダークテーマ、任意のページを共有できるディープリンク、矢印キーによるエントリ間のナビゲーション、/help、/init、/doctor などのスラッシュコマンドをエミュレートするインタラクティブなターミナルパネルが含まれます。ブラウザに保存された完了トラッカーで、探索した機能を追跡することもできます。

対象読者

Claude Code を学ぶすべての人。.claude/ が実際に何をするのか知りたい初心者から、自分のプロジェクトに直接コピーできる注釈付きの例を求める経験豊富なユーザーまで。また、権限、コマンド、スキル、エージェント、フック、MCP サーバーなどの概念が実際のリポジトリレイアウトでどのように組み合わさるかを確認したい開発者にも役立ちます。

ハイライト

• サイドバーのすべてのファイルとフォルダは実際の Claude Code の概念です。CLAUDE.md、.claude/settings.json、.claude/rules/、.claude/commands/、.claude/skills/、.claude/agents/、.claude/hooks/、.claude/plugins/、.claude/mods/、.mcp.json など。
• 組み込み機能は視覚的に分離され、/simplify、/batch、/code-review、/run、/plugin-authoring などのバンドルされたスキルのエントリがあります。
• コンテンツは注釈付きの実際の設定ファイルとして書かれているため、足場を自分のプロジェクトに直接コピーできます。
• exploreclaudecode.com でライブ公開。インストール、サインアップ、ビルドステップは不要。静的サーバーからローカルでも実行可能。
• クリーンで手作りのアーキテクチャ。マニフェストファイルが UI 全体を駆動し、コンテンツの追加や更新が簡単。
• 新機能コンテンツ、アクセシビリティ、モバイル改善、翻訳への貢献を歓迎します。