LukeRenton/explore-claude-code

它解决的问题

Claude Code 带有许多配置文件、文件夹和内置功能，但了解每个功能通常需要阅读分散的文档或深入研究真实项目。这个项目将学习过程变成一个可点击的真实 Claude Code 仓库副本，让你可以看到每个文件所在的位置，阅读带注释的真实配置示例，并在上下文中理解每个概念。

工作原理

该网站是一个使用纯 HTML、CSS 和原生 JavaScript 构建的单页静态应用——零依赖、零框架、零构建步骤。文件资源管理器侧边栏显示一个文件树，与真实仓库完全一致，分为两个部分：.claude/ 下的所有内容（你创建并提交的项目配置）和 built-in/ 下的所有内容（Claude Code 开箱即用的功能）。

点击任何文件即可查看其实际内容，内容以真实配置文件的形式编写，并带有逐行注释。因此，你不仅是在阅读配置，而是在阅读配置本身并学习如何设置。整个 UI 由一个 manifest.json 文件驱动，该文件包含树结构、内容引用和徽章；源内容以 markdown 和配置文件形式存储在 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，便于添加或更新内容。
• 欢迎贡献新功能内容、可访问性、移动端优化和翻译。